Textos con sentido para negocios que hablan de verdad

Cómo usar la proporción áurea en diseño web

¿Qué es la proporción áurea?

 

La proporción áurea es una relación matemática que se encuentra en la naturaleza, el arte y el diseño. Se trata de un número irracional que se representa con la letra griega phi (Φ) y  tiene un valor aproximado de 1,618.

Esta proporción se obtiene al dividir un segmento en dos partes de tal forma que la longitud total del segmento sea al segmento mayor como el segmento mayor es al segmento menor. Pero espera, alto... vamos por partes que nos enteremos...

Un tal Fibonacci, si, un matemático que planteaba  una sucesión de números infinita. Esta: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, etc. 

Pues según Fibonacci la suma de un número y su anterior da como resultado el siguiente y este resultado se acerca más y más y mucho más hasta un NÚMERO ÁUREO, número dorado, perfecto, tanto que en se le llamaba la proporción áurea. la proporción divina.


¿Pero qué es la proporción áurea?


Tranquilidad, no voy a darte un discurso sobre geometría ni pretendo hablar de formulaciones, en internet tienes cientos de páginas magnificas que te dan una explicación matemática con todo tipo de presentaciones. No es mi intención.

Desde la Grecia clásica, al Renacimiento, del Neoclásico hasta nuestros días, se habla de que existe una proporción áurea, que algunos dicen que es perfecta para composiciones visuales. ( en otro artículo hablaremos de otras normas compositivas como la regla de los tercios ).

Siguiendo los consejos de Fibonacci, si queremos usar una composición de rectangulos, deberíamos usar esta proporción: coger los números que siguen o anteceden a la  medida que buscamos.

Por ejemplo, vamos a dividir nuestra web en espacio y lateral. Recuerda la serie: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, etc.

Seguimos con este ejemplo y tomamos un espacio útil de 890 pixels.

  • Para usar el ancho áureo:  usamos de la serie de Fibonacci el número anterior o siguiente, este caso 55 tenemos  un espacio de 550 pixels de ancho.
  • el lateral usaríamos 340 pixels
  • para el alto, con 89 usaríamos el anterior: 55 es decir 550 pixels de alto
  • En esencia nuestra web según la proporción aurea: tendría un total de 890 pixels de ancho por 550 de altura.
  • Y estaría divida en zona de post de 550 pixels y el slider lateral 340.

Es curioso que si sumamos 890 +550 =1440 que es la resolución de HQ de las nuevas pantallas, y si sumamos ¿1440+890? nuevas resoluciones.
 

Curiosa la serie de Fibonacci y su uso en la realidad.

¿Qué tiene de especial esta división?


Esta proporción se considera armoniosa, y se puede encontrar, dicen,,  en muchas cosas de la naturaleza, como las flores, las conchas o las galaxias. Dicen, incluso que los pétalos de algunas flores se rigen por esta serie.

Para comprobar que algo mantiene la proporción áurea , sólo hay que dividir el lado más grande entre el lado más pequeño y comprobar que el resultado es aproximadamente 1.62,
Cuando esto ocurre estamos hablando una proporción áurea.


No es una chorrada, muchísimas cosas nos rodean que están enmarcadas dentro de un rectángulo aureo:

  • el dni actual 
  • las tarjetas de crédito 
  • cumplen con el formato ID-1 (85,6 x 53,98 mm) :cuyo cociente da 1,59  se acerca mucho al número  aureo 1.62. 
  • Yo no fumo, pero dicen que los paquetes de tabaco son rectángulos áureos, 
  • los smarphone son áureos

  • Si metes en Google obras de arte con proporción áurea vas a flipar con la cantidad de obras famosas que salen.


    La verdad es que llega un momento que pones la espiral sobre cualquier imagen y encuentras algo "dorado".


  • ¿Y cómo se aplica todo esto al diseño web?


    En el diseño gráfico y web, la proporción áurea puede ser una herramienta útil para crear composiciones equilibradas y atractivas. Aunque claro, todo esto es aplicable para diseños de uso en Ordenadores que tienen una superficie mayor, en un teléfono móvil la cosa ya se complica con los diseños responsive ,  pero todo es probar si es verdad que la proporción áurea funciona o no.

     Algunas formas de aplicarla son las siguientes:

  • Usar la proporción áurea para dividir el espacio de la pantalla en zonas o columnas. Te expliqué arriba un caso de división de espacio.
  • Puedes Usar la proporción áurea para determinar el tamaño y la posición de los elementos dentro de cada zona o columna. Por ejemplo, si se quiere colocar una imagen dentro de una columna de 618 píxeles, se puede usar la proporción áurea para calcular el tamaño óptimo de la imagen (382 píxeles) y el espacio que debe quedar entre la imagen y los bordes de la columna (118 píxeles).
  • Yo uso las imágenes usando esta proporción 500 x 309 pixels. 
  • Usar la proporción áurea para crear una espiral áurea que sirva como guía para distribuir los elementos más importantes del diseño.
  • la fotografía que he usado para este artículo, está formada así:

  • La espiral áurea se forma al trazar arcos de circunferencia que conectan los vértices de una serie de rectángulos áureos (rectángulos cuya relación entre el lado mayor y el lado menor es igual a la proporción áurea).

    La espiral áurea tiene la propiedad de que cuanto más se acerca al centro, más rápido gira. Esto puede crear un efecto dinámico y atraer la atención del usuario hacia el punto focal del diseño.

    En el caso de la foto de portada el punto focal esta encima de la mano.

  • Conclusiones

    La proporción áurea no es una regla fija ni una solución mágica para el diseño web, sino una referencia que puede inspirar y orientar al diseñador.

    Es importante combinarla con otros principios y criterios de diseño, como el contraste, el ritmo, la simetría o la usabilidad. La proporción áurea puede ser una aliada para crear diseños web armoniosos y bellos, pero también hay que tener en cuenta las necesidades y preferencias del público objetivo y los objetivos del proyecto.


    Si quieres practicar, puedes usar esta herramienta online que te ayuda a crear rectángulos áureos.

    Si quieres explicaciones matemáticas:


    Espero que te haya quedado más claro lo que es la proporción áurea y cómo se puede usar en el diseño web. ¿Te ha sido útil esta información? Pues suscríbete y nos vemos en breve. 😊

    ¡Hasta pronto!

     

    Créditos de imagen: https://www.freepik.es/   rawpixel.com

Publicar un comentario

deja tu comentario!

Artículo Anterior Artículo Siguiente