Proporción áurea y diseño de interfaz de usuario. – Usabilidad web y seo

Proporción áurea y diseño de interfaz de usuario.

Vistas: 56
0 0
Tiempo de lectura:6 Minutos, 43 Segundos

Los sistemas proporcionales se basan en proporciones y se han utilizado durante siglos en arquitectura y arte. La proporción áurea se mencionó por primera vez alrededor del año 500 a. C. Fidias, Platón y luego Euclides. Es justo suponer que esta proporción se ha descubierto varias veces a lo largo de la historia, de ahí sus numerosos nombres, incluida la media áurea, la proporción áurea, la proporción áurea, la proporción divina (inventada por Leonardo da Vinci) y el símbolo griego φ.

La definición matemática exacta es la siguiente (según Wikipedia):

Proporción áurea: Dos cantidades ayb (a> b) están en proporción áurea φ si su razón es la misma que la razón de su suma a la mayor de las dos cantidades:

Dos segmentos en la proporción áurea (a / b = φ)

Se puede demostrar que la proporción áurea φ tiene una propiedad especial:

y es igual a 1,618033 … (número irracional). (Puede comprobar que 1 / 0,618 = 1,618.)

La investigación de Giacomo Rizzolatti y Cinzia Di Dio sugiere que el cerebro humano está programado para favorecer los cuerpos humanos con proporciones en la proporción áurea. En el estudio, a los participantes sin experiencia artística se les mostró la imagen original y versiones distorsionadas de la estatua. Las proporciones de la estatua original reflejaban la proporción áurea. La imagen original activó fuertemente un conjunto de células cerebrales, lo que no era el caso en las imágenes distorsionadas, lo que sugiere que la belleza es en parte una cualidad innata.

La proporción áurea se ha utilizado para analizar las cantidades encontradas en la naturaleza, la arquitectura, la pintura y la música. A menudo se asume que, cuando se usa, crea una composición orgánica, equilibrada y estéticamente agradable que se cree que es agradable al ojo humano.

Los ejemplos de edificios y obras de arte que están proporcionados en la proporción áurea van desde las pirámides de Giza, el Partenón de Atenas y la Mona Lisa da Vinci.

Mona Lisa Leonardo da Vinci: largo y ancho de la cabeza (segmentos1 y B1), así como la longitud y el ancho del cuerpo (desde la línea de los ojos hasta los brazos, segmentos a2 y B2) están en la proporción áurea.

Rectángulo dorado y espiral

Tel es un rectángulo dorado es simplemente un rectángulo cuyos lados son proporcionales a la proporción áurea.

El rectángulo áureo tiene los lados en la proporción áurea (a / b = φ).

El rectángulo áureo tiene una propiedad interesante: si lo divides en un cuadrado con un lado igual al rectángulo más pequeño y otro rectángulo (como en la imagen de abajo), resulta que el rectángulo más pequeño también es un rectángulo áureo. (Esta propiedad se deriva de la propiedad Proporción áurea descrita en la sección anterior).

Cuando divide el rectángulo áureo en un cuadrado y un rectángulo más pequeño, como en la imagen de arriba, el rectángulo más pequeño también se convierte en un rectángulo áureo.

Puede repetir este proceso sin cesar dividiendo cada rectángulo dorado en un cuadrado y otro rectángulo dorado. El resultado sera espiral dorada – se obtiene conectando las esquinas opuestas de cada uno de los cuadrados.

Para crear una espiral dorada, comience dividiendo el rectángulo áureo ABCD en el cuadrado ABEF y el rectángulo áureo más pequeño EFDC. Luego repita el proceso para el rectángulo EFDC dorado más pequeño. Se forma una espiral dorada conectando esquinas opuestas de los cuadrados resultantes.

La espiral dorada se encuentra en muchos elementos naturales como plantas y en condiciones climáticas como huracanes.

Ejemplos de la proporción áurea en el diseño de la interfaz de usuario

¿Cómo se utiliza la proporción áurea en el diseño de interfaces? Veamos un par de ejemplos comunes:

Tamaños de texto

Puede haber diferentes tamaños de fuente en la proporción áurea. Digamos que el tamaño de la fuente principal de su sitio web es de 16 píxeles. El tamaño de fuente del título puede ser un múltiplo de la proporción áurea del tamaño de su cuerpo, es decir, puede ser 16 φ = 16 x 1.618 = 25.88 o aproximadamente 26 píxeles.

Algunos también usan la proporción áurea para determinar la altura de línea requerida para que un tamaño de fuente particular esté en la proporción áurea. (La altura de la línea es la altura de la fuente más el espacio entre las líneas de texto; básicamente determina qué tan ajustadas están las líneas de texto en un párrafo). Por ejemplo, si tuvieras un tamaño de fuente de 16 píxeles para el texto del cuerpo, la línea la altura puede ser 16 φ = 16 x 1.618 = 25.88 o, nuevamente, aproximadamente 26 píxeles.

La altura de la línea es la altura de la fuente más el espacio entre las líneas de texto.
Arriba: el tamaño del encabezado y del cuerpo del texto corresponde a la proporción áurea. La altura de la línea también está en la proporción áurea con el tamaño de la fuente. El aumento de la altura de la línea facilita la lectura. Abajo: este cuadro de texto no utiliza la proporción áurea.

Sin embargo, resulta que las cosas son un poco más complicadas, porque a medida que la longitud de la línea se hace más larga, la altura de la línea también debe aumentar para mantener la legibilidad. Por ejemplo, un estudio de 2004 de la Universidad de Reading concluyó que las líneas largas requieren más espacio entre líneas para que los ojos puedan encontrar fácilmente la siguiente línea hacia abajo. Si realmente desea diseñar su tipografía teniendo en cuenta la proporción áurea, puede usar la Calculadora de tipografía de proporción áurea, que le dará la altura de línea ideal para un tamaño de fuente y ancho de línea determinados.

Recortando una imagen

La composición es importante al crear imágenes atractivas. Una forma rápida y sencilla de enmarcar imágenes y crear una composición sólida es superponer una espiral dorada sobre el enfoque de la imagen.

La composición fuerte se crea colocando la espiral en el foco de la imagen y recortando la imagen en consecuencia, como en el ejemplo de la izquierda.
Cómo utilizar la espiral dorada para recortar una imagen.

Diseño de página web

Un diseño de dos columnas se crea naturalmente cuando divide el rectángulo dorado en un cuadrado y un rectángulo dorado más pequeño. El diseño resultante es perfecto para el área de contenido principal y la barra lateral. Seguir este diseño crea estructura y equilibrio en la interfaz. Sin embargo, en los sitios web receptivos modernos, será difícil mantener completamente la proporción áurea para todos los tamaños de ventanas gráficas. Si se enfoca en crear una cuadrícula de línea de base basada en la relación de aspecto y alinear los componentes con ella, debería poder cosechar los principales beneficios de la relación de aspecto en al menos algunos tamaños de pantalla.

Estructura de cuadrícula web básica que utiliza la proporción áurea de la izquierda.
Cómo crear una cuadrícula de página suelta usando la proporción áurea

Conclusión

Algunos diseñadores están fascinados con la proporción áurea y la utilizan para crear y editar todo tipo de elementos de diseño de interfaz. Otros creen que la proporción áurea no es más poderosa que cualquier otro método utilizado para determinar dimensiones y proporciones. Sin embargo, la proporción áurea puede ser una referencia útil para los nuevos diseñadores visuales o diseñadores que buscan mejorar sus habilidades con un enfoque matemático específico.

Obtenga más información en nuestro curso Conceptos básicos de diseño visual en la Conferencia UX.

Referencias

Di Dio, C., Macaluso, E. y Rizzolatti, G. (2007). Belleza dorada: la respuesta del cerebro a las esculturas clásicas y renacentistas. MÁS UNO. https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0001201

Dyson, M.S. y Hazelgrove, M. (2001). Impacto de la velocidad de lectura y la longitud de la línea en el rendimiento de lectura de la pantalla. https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.108.4346&rep=rep1&type=pdf

Pearson, K. (2019). Sinfonía secreta: una introducción a la tipografía de proporción áurea. Pearsonified. https://pearsonified.com/golden-ratio-typography-intro/

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post Pesadillas de PPC y marketing digital que no olvidará pronto
Next post Diseño UI / UX: Conmutadores de proyectos | Nick Lawrence | Octubre de 2021

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta