La proporción de oro: ¿Cómo?

Uno de los objetivos clave de cualquier diseñador es crear diseños claros y comprensibles; Las páginas que están bien organizadas, equilibradas, con información que es fácil de leer y absorber, naturalmente, dará como resultado una experiencia mucho mejor para sus usuarios. Tenemos varias herramientas a nuestra disposición, incluidas las cuadrículas, las reglas de espaciado, las columnas y las canaletas, para que esto suceda. En este artículo, sin embargo, vamos a ver una herramienta a menudo pasada por alto llamada la proporción de oro. La proporción de oro es una relación matemática, que se encuentra en muchas cosas tanto naturales como diseñadas, que dictan las proporciones más agradables de una forma o estructura.

La teoría detrás de la proporción dorada se remonta a la historia histórica de PI. La relación se ha utilizado a lo largo de la historia de los filósofos, arquitectos y diseñadores para crear diseños y estructuras llamativas llamativas. Algunos ejemplos históricos son el Partenón en Grecia, y las pirámides en Egipto, donde los arquitectos aprovechan esta relación para crear un equilibrio entre los elementos estructurales. La razón de la popularidad de la proporción de oro es la creencia de que es natural, y crea un equilibrio estéticamente agradable para el espectador.

Al igual que en la arquitectura, podemos aprovechar la proporción de oro en diseño digital, ya sea que estamos trabajando en Wireframes, desarrollo de la marca o creando diseños de producción finales. Así es cómo.

¿Qué es la relación dorada?

La relación en sí se define como 1: 1.618033987, y está representada por el símbolo griego PHI. Esto significa que si la longitud A es 100px, entonces la longitud B sería 161.80px. Esto puede aplicarse a formas u objetos uno junto al otro (comparando sus anchos o longitudes), o para formar una forma única como un rectángulo (es decir, longitud = 1.618x ancho).

La fórmula para calcular la relación es un% 2FB = (a b)% 2fa = 1.6180033987, aunque este número a menudo se redondea en aplicaciones prácticas para ser más fácil de trabajar. 1: 1.618 o 1: 1.62 se puede utilizar en estos casos.

La fórmula de proporción de oro muestra que la longitud A es 1.618 veces la longitud B. Puede validar si dos longitudes siguen la proporción al dividir sus longitudes.

Otro término que escuchará asociado con el cálculo de la proporción de oro es la secuencia Fibonacci, definida por el Fibonacci matemático. Esta secuencia establece que cada número en la secuencia es la suma de los dos valores que vinieron antes. Por ejemplo, 1 1 = 2, por lo tanto, los primeros tres números en la secuencia son 1, 1, 2, y el siguiente sería 3 (1 2 = 3). Esto continúa, creando los primeros 10 dígitos de 1,1,2,3,5,8,13,21,34,55.

La secuencia Fibonacci es lo que crea la espiral dorada, que es una espiral logarítmica que crece por un factor de la relación dorada. En la mayoría de las representaciones de la relación dorada, se muestra la espiral dorada, como a continuación. Esto crea otra guía al crear diseños, o diseñar activos de logotipo, y ayuda a definir el equilibrio.

.Una aproximación de la espiral dorada creada al dibujar arcos circulares que conectan las esquinas opuestas de cuadrados en la mosaica del fibonacci.

Aunque puede estar pensando que esto es solo una fórmula de lujo que se desarrollan matemáticos, es comúnmente ocurriendo en la naturaleza, principalmente la espiral. Se puede ver en plantas, la cáscara del Nautilus, e incluso las formaciones de la nube en los huracanes. Cuando excavas en él, la proporción de oro está a nuestro alrededor, tanto el hombre hecho como natural. Eche un vistazo al logotipo geográfico nacional, es un rectángulo proporcional que sigue a la proporción de oro.

Cómo usar la proporción de oro en diseño UX

El uso de la proporción de oro en su trabajo de diseño es más sencillo de lo que parece. Dado que se trata de la proporción, puede aprovechar la fórmula para generar columnas y diseños proporcionales. Por ejemplo, si desea crear un diseño con una barra lateral y un área de contenido principal en un ancho de 960px, calculará el ancho de la columna principal para ser 960px% 2f 1.618. Esto generará un ancho de 593px. Haría lo mismo con el ancho de la columna principal para obtener el ancho de la barra lateral (593px% 2F 1.618) para obtener 367 px. Por supuesto, esto no está factorando en el margen o en el relleno, y es posible que desee redondear estas mediciones para ser números pares, o se ajustará a un múltiplo en función de su sistema. Sin embargo, esto proporciona orientación sobre el equilibrio más agradable entre estas columnas.

Más ejemplos de la proporción de oro en el trabajo en diseño de sitios web. Diseño de crédito de imagen Shack.

En este escenario, es probable que quiera que estas columnas se llenen, y no se fijarán a una cierta altura. Si tiene bloques de contenido o widgets de la barra lateral, puede aprovechar la fórmula para determinar la mejor altura para estos bloques basados en su ancho (ya se multiplice o se divide por el valor de 1.618 para obtener una disposición que se ajuste a su solicitud).

Aunque es genial aprovechar esta ración en su diseño, aplicarla en toda la página o el diseño puede ser difícil, ya que muchos diseños son dinámicos y responden a los tamaños de visor o diseño cambiantes. Si enfoca su relación, use los componentes dentro del diseño, y aproveche una cuadrícula en función de la relación en la relación para alinear esos componentes, podrá obtener el beneficio con menos estrés.

Una excelente manera simple de comenzar es aprovechando las plantillas y los ejemplos de WireFrame que hacen uso de la relación para crear sus diseños y colocar elementos. Esta es una gran línea de base para usar al iniciar su diseño, ya que puede ver cómo funciona en la práctica. También hay muchas calculadoras para conectar mediciones y calcular las dimensiones apropiadas según la proporción. Si está utilizando aplicaciones como Adobe XD para su trabajo de diseño, puede descargar plantillas como esta cuadrícula dorada de Jon Vargas. Lo que sea que estés creando, espero que esto lo equipare a diseñar diseños impresionantes y equilibrados.