Compartir información útil: diseño web + proporción áurea
¿Qué es la proporción áurea?
Por lo general, utilizamos la división de segmentos de línea para explicar este concepto: un segmento de línea se divide en dos partes. La relación entre la longitud de la parte más corta y la longitud de la parte más larga es igual a la relación de la parte más larga. longitud de la parte más larga a la longitud total La relación es un número irracional y su valor aproximado a los primeros tres dígitos es 0,618. Debido a que esta proporción a menudo aporta armonía y belleza al diseño, se llama proporción "áurea" (o sección áurea, proporción chino-extranjera, etc.).
La proporción áurea se ha utilizado durante miles de años. Desde las pirámides de Egipto hasta el Partenón de Atenas, desde la Capilla Sixtina de Miguel Ángel hasta la Mona Lisa de Da Vinci, desde el diseño del logotipo de Twitter hasta el diseño del logotipo de Pepsi, incluso los rostros de las personas siguen esta proporción numérica. De hecho, parece que naturalmente nos sentimos más atraídos por los objetos y las imágenes con proporciones áureas. Esta reacción es casi subconsciente, y nuestro cerebro incluso afinará lo que nuestros ojos ven para acercarlo a la proporción áurea, profundizando nuestros recuerdos e impresiones de las cosas. La proporción áurea también se puede aplicar a los gráficos. La más típica es la espiral dorada, también llamada espiral de Fibonacci. Hay muchos patrones de espirales de Fibonacci en la naturaleza: helechos, flores, conchas e incluso huracanes.
Entonces, ¿cómo utilizar la proporción áurea para realzar la belleza del diseño del sitio web? Debido a que la proporción áurea se presenta en varias formas, podemos usarla en diseño, espaciado, contenido, imágenes y gráficos.
1. Diseño: establezca el tamaño de la página en la proporción áurea.
Usar la proporción áurea en el diseño es muy efectivo. El punto clave es controlar la proporción y el tamaño, y captar la proporción áurea de 0,618. Por ejemplo, si utiliza un diseño de 960 px de ancho, multiplíquelo por 0,618 para obtener 594 px, que es la altura del diseño de página. Sobre esta base, puede dividir todo el diseño en una columna de cuadrados y una columna de rectángulos para presentar la sección áurea de manera más intuitiva y hacer que el sitio web sea más atractivo. Este diseño de dos columnas es muy práctico en diseño web y muchos sitios web eligen este método de diseño. Incluso la conocida revista National Geographic es así. Toda la página se ve ordenada y fácil de leer, y los elementos están organizados de manera ordenada, lo que permite a los usuarios navegar con mayor fluidez.
2. Espaciado: adopte un diseño de espiral dorada.
El espaciado, al igual que los espacios en blanco, es un factor clave en el diseño. Un espacio razonable ayudará a resaltar el contenido principal del sitio web y hará que el diseño del sitio web esté más coordinado, mientras que un espacio inadecuado afectará la experiencia del usuario y la imagen de marca del sitio web. Al mismo tiempo, crear un espacio razonable en el sitio web suele llevar mucho tiempo. Entonces, ¿cómo podemos organizar de forma rápida y eficaz el espaciado de las páginas web? Usar una espiral dorada es una buena opción. Utilice gráficos para colocar elementos estratégicamente de modo que el espacio en su sitio siga proporciones cuidadosamente calculadas, no solo la intuición. Además, si trabaja con varios elementos al mismo tiempo, también puede superponer la espiral dorada para que el diseño proporcional de la página web esté más coordinado.
Moodley Design Studio es un modelo que diseñó carteles, programas y logotipos para Bray GNC Arts Festival. El diseño general del programa adopta el método de collage de fotografías, con una gran cantidad de espacios en blanco, y la proporción del diseño, la posición y los espacios en blanco de varios elementos se organizan con la ayuda de una espiral dorada.
La empresa de diseño LemonGraphic, con sede en Singapur, también utilizó el diseño en espiral dorada al diseñar la identidad visual de Terkaya Wealth Management Company. Los tres elementos de la tarjeta: el número del águila, el texto y la posición del águila se basan todos sobre una base razonable.
3. Contenido: a lo largo de la trayectoria de la espiral dorada.
Además de utilizar la espiral dorada para ordenar el espaciado del sitio web, también podemos utilizarla para determinar la posición del contenido web. Según el teorema de la espiral dorada, los ojos humanos siempre se enfocan inconscientemente en el centro de la espiral, por lo que debemos enfocarnos en el centro de la espiral y colocar aquí el contenido más importante que pueda interesar a los usuarios para que sea más fácil de obtener para los visitantes. información. Además, dentro de la espiral se debe colocar información más importante para que llame más la atención.
He aquí tres ejemplos relevantes:
Tomemos la página web de la revista National Geographic. Si observa detenidamente su página de inicio, encontrará que su contenido está ordenado según la trayectoria de la espiral dorada. Debido a que la gente puede concentrarse inconscientemente en el centro de esta pista, la revista National Geographic colocó su logotipo aquí, resaltando una vez más la imagen de la marca. Otros elementos importantes de su sitio web también se incluyen en la espiral.
Lo mismo ocurre con el sitio web del diseñador Tim Roussilhe. Aunque el sitio web tiene mucho contenido e información, el diseño general del sitio web es muy ajustado, la información está muy organizada y hay muchos elementos sin resultar confusos. El contenido de la esquina superior izquierda está diseñado según la trayectoria de la espiral dorada. Cuando los visitantes inicien sesión, verán las palabras "BonjourMyNameisTim", seguidas de texto detallado, botones de menú y el logotipo en la esquina superior izquierda. El usuario ha escaneado toda la información necesaria antes de notar suficiente espacio en blanco, que es para lo que sirve el diseño.
Cuando Helms Studio diseñó la marca para FullsteamBrewery, también utilizó la espiral dorada para organizar el contenido del sitio web. Diversos elementos están colocados en diferentes bloques, y el visitante puede seguir el recorrido de la figura central, el sello, la figura ABV y la ubicación del fabricante. Esta experiencia de navegación es natural y conveniente.
4. Imágenes: proporción áurea y trigonometría
La composición de las imágenes también es importante, ya sea que sirvan para transmitir información o para una presentación estética. Al utilizar la sección áurea y los tercios en una imagen, puedes usar líneas e intersecciones para construir un centro visual, haciéndolo más llamativo y resaltando información importante. Usar la proporción áurea en una imagen significa dividir la imagen en tres bloques desiguales. La proporción de los tres bloques debe ser 1: 0,618: 1, lo que significa que el ancho de la primera y tercera columnas es 1, y el ancho de la segunda. La columna es 0,618, al igual que el área horizontal. De esta forma, podemos utilizar estas líneas o intersecciones para organizar razonablemente la posición y el tamaño de la imagen para ver cómo atraer la atención del usuario y aumentar el interés y la vitalidad. Además de la proporción áurea, también podemos utilizar la regla de los tercios para recortar imágenes. En cierto sentido, la dicotomía es una variación de la sección áurea que es más sencilla de utilizar. Divide la imagen en tres partes iguales en una proporción de 1:1:1, haciendo que la imagen esté completamente equilibrada y uniforme. De esta forma podemos organizar los elementos importantes alrededor del rectángulo central.
La portada de la revista Complex presenta un retrato especial de la actriz Solange Knowles. Utiliza la proporción áurea para organizar racionalmente los espacios positivos y negativos de la imagen. La nariz y los ojos del personaje caen exactamente en la intersección de las líneas, lo que es una posición ideal para atraer la atención del visitante.
Cuando Jason Mildren diseñó la portada de la revista "Pilot", utilizó la regla de los tercios para construir el centro de gravedad visual. En la imagen, los ojos, los pulgares y los ejes de los brazos del modelo están todos en el centro de gravedad visual. El personaje está ubicado en la parte inferior derecha y la parte superior izquierda está en blanco, lo que no solo resalta los puntos clave, sino que también logra. armonía y unidad.
5. Gráficos: Círculo de proporción áurea
Así como la sección áurea se puede usar para crear un rectángulo proporcional, también se puede usar en un círculo. Un círculo perfecto debe seguir la proporción de 0,618. ¡Utilicemos los logotipos de Pepsi-Cola y Twitter para analizar cuidadosamente la aplicación del círculo de proporción áurea en el diseño web!
El logotipo de Pepsi-Cola consta de dos círculos de proporción áurea que se cruzan. Si bien el círculo más pequeño es menos prominente en la superposición, prepara el escenario para el bloque blanco en el medio del logotipo. El diseño del logotipo de Twitter se construye con la ayuda de varios círculos de proporción áurea, pero cuando se utilizan círculos de proporción áurea, no se utilizan círculos de proporción adyacentes para construirlo. Puede que no parezca exacto a primera vista, pero es igualmente armonioso.
La proporción áurea no sólo permite que los elementos del sitio web existan de forma independiente, sino que también los conectan armoniosamente. El uso inteligente de la proporción áurea en el sitio web hará que el diseño de nuestro sitio web sea más excelente.
Diseño web