La proporción tiene una larga historia en el mundo del arte y el diseño, los antiguos egipcios utilizaban un sistema de cuadrícula en los murales, ayudando a establecer una guía para crear jerarquía. Los antiguos griegos también estaban fascinados con la proporción, especialmente la del cuerpo humano, como los Bronces de Riace o Afrodita de Cnido.
Hoy en día, la proporción sigue viva y es un principio universal de diseño que te ayuda a formar consistencia, jerarquía y belleza en tu diseño. Veamos cómo puedes usar la proporción en tus proyectos.
Proporción en el diseño de la interfaz de usuario (IU)
En la actualidad, tenemos un sinfín de dispositivos, cada uno con tamaños de pantalla y resoluciones muy dispares, por lo que no es fácil mantener una interfaz de usuario proporcionada.
Para afrontar estos obstáculos, podemos usar elementos estáticos y fluidos en la interfaz de usuario (UI):
- Los elementos estáticos siempre serán del mismo tamaño, independientemente de lo grande o pequeña que sea la pantalla.
- Los elementos fluidos se pueden escalar según el porcentaje especificado.
Como regla general, comparar o mezclar elementos estáticos con fluidos, no darán como resultado un diseño proporcionado, ya que los elementos no escalarán por igual. Sin embargo, normalmente utilizamos un mismo dispositivo mientras experimentamos con la interfaz de usuario, con lo que es posible usar proporción el diseño de interfaz de usuario (UI).
La proporción áurea
Si haces una búsqueda rápida en Google de "Proporción en el diseño de la interfaz de usuario", verás que los resultados hacen referencia a la proporción áurea, también conocida como número de Dios. Se trata de un número algebraico irracional, 1:1,618. La representación decimal es infinita y no tiene periodo.
Posee muchas propiedades geométricas interesantes, esta proporción se encuentra tanto en algunas figuras geométricas como en la naturaleza: en las hojas de algunos árboles, en el grosor de las ramas, en el caparazón del caracol, en los girasoles, etc. Para muchos representa la belleza estética.
Algunos diseñadores obvian el sistema proporcionado por cuadrícula a favor de crear proporción con la proporción áurea. Hay muchos ejemplos de cómo se ha utilizado la proporción áurea para todo, desde la Biblia de Gutenberg hasta el diseño de logotipos modernos.
La proporción áurea en el diseño de interfaz de usuario (UI)
En la jerarquía comentamos que en un diseño no debes tener más de 3 a 4 niveles de jerarquía. Con esto en mente puedes aplicar la proporción áurea en tus diseños siguiendo estos 4 pasos:
1. Define la altura de un rectángulo (en el ejemplo utilizamos 350pt) y multiplícalo por el número áureo (1,618) para encontrar el ancho. Esto dará como resultado un "Rectángulo Dorado".
2. Divide tu Rectángulo Dorado en cuadrados perfectos. Cada cuadrado perfecto resultará en un nuevo rectángulo dorado más pequeño.
3. Continúa dividiendo el rectángulo dorado hasta que tengas 3-4 cuadrados perfectos diferentes de diferentes tamaños.
4. Utiliza el tamaño de cada cuadrado como un marcador de posición para ayudarte a proporcionar tu diseño, generando jerarquía.
Como resultado, podrás diseñar proyectos muy estéticos y proporcionandos. Como el de este ejemplo de Prototypr.io:
Conclusión
La proporción es un principio universal de diseño útil y necesario. A pesar de tener una combinación de elementos estáticos y fluidos, puedes lograr una interfaz de usuario proporcionada. Una vez definidos los tamaños de los dispositivos, será mucho más fácil escalar los elementos en consecuencia, con proporción.
Photo by Sharon McCutcheon on Unsplash
Referencias:
· Principles of Design: Proportion
