Aplicando el Razón Dorado en los Diseños Modernos.
La página web ideal es funcional y armoniosa, pero incluso los diseñadores web más experimentados pueden tener problemas para decirle qué es lo que le da un diseño natural. A pesar de las teorías del color y la navegación, a veces el aspecto más crucial de la estética de una página web perfecta parece inefable. No sabemos por qué funciona, pero a veces simplemente lo hace. Todo podría ser por un concepto simple..
Al respaldar el diseño de su sitio web con un orden literalmente natural, los espectadores pueden encontrar su diseño más interesante y gratamente innato. Este concepto se llama relación de oro, Un concepto matemático que la naturaleza obedece y que los humanos reconocemos subconscientemente como una expresión de perfección..
El dorado que?
En términos simples, la proporción áurea (también conocida como proporción divina o la media dorada), es una constante matemática que aparece repetidamente en la naturaleza y en la obra de arte..
Expresado como una ecuación, cuando una Es mas grande que segundo, (a + b) dividido por una es igual a una dividido por segundo (solo mira la imagen de abajo), que es igual a aproximadamente 1.618033987. Ese número, a menudo representado por el carácter griego "phi", es el relación de oro.
(Fuente de la imagen: mathsisfun.com)
La misma teoría se puede usar para construir un rectángulo, llamado rectángulo dorado. Una imagen que sigue la proporción dorada se puede colocar limpiamente dentro de un rectángulo que obedece a la proporción.
(Fuente de la imagen: creativeautomaton.com)
Para construir un rectángulo dorado, elige un número que sea la longitud del lado corto del rectángulo. Por el bien del argumento, digamos 500 píxeles. Multiplica eso por 1.618. El resultado, 809 píxeles, es la longitud del lado largo de su rectángulo. Por lo tanto, un rectángulo de 500 píxeles por 809 píxeles es un rectángulo dorado. Obedece la proporción áurea..
Belleza natural
En verdad, los científicos no están seguros de qué se trata la proporción que les gusta tanto a los humanos. De lo que están seguros es de cuánto nos gusta. Los estudios sugieren que incluso los cambios mínimos en una imagen que lo hacen más fiel a la proporción áurea tienen un gran impacto en el cerebro de quienes lo buscan.
El rostro humano también sigue la proporción, y encontramos que las personas cuyas caras son más verdaderas son más atractivas. Las conchas marinas, las obras maestras del Renacimiento clásico, la arquitectura desde la antigüedad e incluso las partes del cuerpo humano se proporcionan en función de la proporción hasta los dedos..
(Fuente de la imagen: in2visualdesign)
Algo profundo en el núcleo de nuestra mente registra la proporción dorada como hermosa, un hecho que los artistas y arquitectos han utilizado durante miles de años, a sabiendas o no. Es el lenguaje primordial en las imágenes. El resultado es orgánico, intuitivo y se siente bien..
Composición divina
¿Cómo, entonces, utiliza este número mágico en la composición de su página web? La matemática puede parecer una caja sofocante en la que su creatividad luchará, pero la proporción áurea es simplemente una guía útil. Tener una guía básica sobre la cual construir puede terminar dándole espacio más creativo al eliminar algunas de las conjeturas de las proporciones y la ubicación..
Piense en ello como una herramienta en lugar de una jaula. En su forma más básica, puede utilizar la proporción áurea para designar el tamaño y la ubicación de las áreas de contenido y las barras laterales. Un diseño de ancho fijo es la aplicación más fácil. Decida el tamaño total de su diseño a través del método para crear un rectángulo dorado.
Para Rejillas / Bloques
El cuadrado creado por las líneas a sería su bloque de contenido. El rectángulo más pequeño sería una barra lateral o de navegación. Una vez que haya averiguado el tamaño de su rectángulo, descubrir qué tan amplia debe ser la barra de navegación es muy fácil..
- Para este ejemplo, diremos que tu rectángulo es 525 píxeles por 850 píxeles.
- 525 es una y 850 es (a + b), y segundo será el ancho de tu barra lateral.
- Encontrar segundo, simplemente restamos de (a + b), que es 325.
- Por lo tanto el ancho de tu barra lateral es 325.
Recuerde que su rectángulo se puede voltear para adaptarse a sus propósitos, colocando la barra lateral en la parte superior, inferior o en el lado opuesto. Mientras la relación se mantenga, su diseño se sentirá armonioso..
Para texto
Hay una forma más rápida de obtener las medidas que necesita y se puede aplicar con contenido de texto.
- Digamos que tu texto de contexto es tamaño 12.
- Multiplica 12 con 1.618, la proporción de oro, y obtendrá 19.416.
- Un tamaño de texto de encabezado de 19 o 20 seguiría de cerca la proporción de oro.
La proporción áurea es un lenguaje que su mente entiende, y al comunicarse con él, sus ideas aparecerán de manera más efectiva. Usted no tiene que adherirse a ella exactamente; El principio básico es suficiente. Aplicando la proporción al tamaño de la imagen, la relación entre el texto y la ubicación de la imagen y la creación de subdivisiones dentro de las barras laterales son todos conceptos posibles..
Trabajo de cuadrícula: La regla de los tercios
Si las matemáticas no son tu taza de té, el concepto de la proporción áurea se puede simplificar. los regla de los tercios Regula la colocación de puntos de interés en una escena. Divide cualquier imagen dada en tercios, tanto horizontal como verticalmente. Obtendrás 9 grillas.
(Fuente de la imagen: digital-photography-school.com)
De acuerdo con la regla de los tercios, los vértices de esas líneas (donde las líneas se cruzan) son la ubicación ideal para los puntos de interés. Es más probable que las personas que escanean la página noten cosas colocadas cerca de los puntos, y la división es cómoda de ver. Un diseño más complejo es posible dividiendo esos tercios en tercios adicionales.
(Fuente de la imagen: net.tutsplus.com)
En resumen, el ojo puede ser perezoso y no tener que buscar detalles importantes. A nuestros cerebros les gusta esto. Las imágenes principales, los cuadros de noticias, las barras de búsqueda y otros puntos de interés se pueden ubicar en o cerca de los vértices. Este pequeño atajo te dará un diseño que es fácil de usar y que hace que la gente se sienta atraída por datos clave..
Columnas y tamaños de fuentes: secuencias de Fibonacci
Otra herramienta simple para el diseño web vinculado a la proporción de oro es Números de fibonacci. Una secuencia de Fibonacci comienza con 0 y 1. Los dos números anteriores se suman para producir el siguiente número en la secuencia: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ... y así.
Un poco de matemáticas nos dice que la relación entre los números de secuencia de Fibonacci secuenciales es sorprendentemente cercana a la proporción áurea: divida cualquier número en la secuencia con el número anterior y obtendrá - lo adivinó - 1.618.
Al igual que con la proporción áurea, los números de Fibonacci se pueden usar para dictar la relación entre el encabezado y el tamaño del texto del contenido. También se podría usar para designar el ancho de las columnas y es especialmente efectivo en blogs y otros diseños densos en texto. La composición también podría basarse en el concepto de mosaico de Fibonacci, en el que el tamaño de mosaico se basa en el uso de la secuencia de Fibonacci.
(Fuente de la imagen: Wikipedia.org)
Espirales de oro y agrupación de contenido
Otro método posible de usar tanto la proporción áurea como los números de Fibonacci son los espirales de oro y espirales de fibonacci. Las espirales de oro se ensanchan en un factor igual a la proporción de oro por cada cuarto de giro que realizan, y las espirales de Fibonacci se forman utilizando el mosaico de Fibonacci.
Las espirales se han utilizado en obras de arte tanto como los números y las proporciones en sí. La teoría es que las áreas de espacio negativo e interés visual deberían encajar dentro de la espiral. Dentro de este diseño elegante, al igual que con la regla de los tercios, el ojo se atrae naturalmente hacia el centro de la espiral para buscar detalles..
(Fuente de la imagen: fabiovisentin.com)
Las espirales pueden servir como una guía para la densidad del contenido y la agrupación. Pueden servir como base para la proporción de imágenes de encabezado de su sitio web, barras de búsqueda y barras de herramientas.
Al elegir la imagen ideal para una página de inicio basada en grandes gráficos, como páginas de inicio de tiendas y sitios web de fotografía, también puede beneficiarse de las espirales doradas y de Fibonacci..
Los mensajes poderosos a menudo son subliminales, y la proporción áurea es uno de los anuncios subliminales más prolíficos de la naturaleza. Al utilizar la proporción divina, te das a ti mismo una ventaja de lógica natural y gracia orgánica a la que todos los humanos tienen una atracción subconsciente. La proporción áurea es otra herramienta a su disposición creativa..
Más lectura:
- Aplicación de la proporción áurea a diseños y objetos web
Nota del editor: Esta publicación está escrita por Chris Pentago para Hongkiat.com. Chris es un desarrollador web, diseñador y comercializador de Internet con experiencia en tecnologías clave para hacer que su negocio en línea funcione. Puede encontrarlo en Twitter..
