Advertisement
  1. Web Design
  2. UX/UI
  3. Design Theory

Fuerzas Invisibles: Tamaño, Contraste y Equilibrio

Scroll to top
Read Time: 5 min
This post is part of a series called Invisible Forces in Design.
Invisible Forces: Alignment, Direction, and Focus
Invisible Forces: Spacing and Shape

() translation by (you can also view the original English article)

Este es el segundo artículo de una serie de tres partes acerca de “las fuerzas invisibles” en diseño. En el artículo anterior, aprendimos acerca de cómo la alineación puede ser usada para crear dirección y enfoque. En este artículo, aprenderemos acerca de cómo trabajar los cambios en el tamaño pueden crear contraste y equilibrio, y así, ayudar a tus diseños a comunicarse con más comprehensión.

Las cosas más grande se ven más importantes.

Es obvio, que cuando hacemos un elemento más grande, este tiene la tendencia a verse más importante que los elementos más pequeños.

Sin embargo, esto necesita ser considerado de acuerdo a otros factores que afectan la jerarquía visual. Por ejemplo, estos dos elementos toman el mismo nivel de importancia, porque tienen el mismo tamaño.

En todo caso, si usted viera el elemento de arriba antes de ver el elemento de abajo.

Pero si usted hace el elemento de abajo más grande que el elemento de arriba, este se verá más importante.

Sin embargo, otras cosas como el peso visual (es decir, está usando un fuente bold o light), o el contraste en el color, pueden revertir el efecto del tamaño más grande.

En esta ilustración, los elementos más claros lucen menos importantes, incluso, aunque son más grandes.

Sin embargo, con tan solo darle a la misma ilustración un fondo oscuro, bueno ahora el elemento más claro (y más grande) se convierte en el elemento dominante, gracias al hecho de que este hace contraste con el fondo más que el elemento más pequeño.

Haga significativos cambios de tamaño.

En especial, cuando este diseñando para las pequeñas pantallas de hoy en día, debería usar cambios de tamaño con propósito. No tiene sentido hacer una fuente más grande —y de ese modo ocupar el espacio valioso de la pantalla— si no es necesario.

Siempre que sea posible, usted puede usar los factores mencionados arriba para cambiar su jerarquía visual, pero pronto o más tarde, usted necesitará hacer una cosa más grande que la otra. Solamente, no lo haga irregularmente.

Mire estos diferentes elementos, cada uno más grande que el anterior.

Ahora, cuál se lee con más claridad para usted: ¿esa composición o esta otra?

Los elementos de la segunda composición están compuestos de un tamaño que está basado en una escala variada. Cada tamaño de fuente relaciona al siguiente tamaño más pequeño con la misma relación matemática con la que este se relaciona al más grande.

El tipo de tamaño en la escala variada tiene una relación proporcional al otro tipo. Las proporciones ayudan hacer que las partes de su diseño luzcan como si tienen un sentido común.

Puede ver las proporciones en acción en el logo de MailChimp.

Cada uno de los círculos que conforman los rasgos del chimpancé se relacionan a cada una de las otras partes por un factor de .75. Por ejemplo, el círculo que conforma el área del estómago es .75 del tamaño del círculo que conforma el cuerpo. Hicks Design, la firma que diseño este logo, lo hizo con este propósito.

No se deje engañar por el engaño del Radio de Oro.

Es probable que muchos de ustedes estén pensando acerca del concepto llamado “Radio Dorado” que causa mucho revuelo. El radio de oro es aproximadamente 1:1.618. Sí, el chimpancé todavía sería atractivo si este fuera diseñado basado en el concepto de radio de oro, sin embargo, ya no seria objetivamente algo más atractivo. A pesar de la expectativa, no hay evidencia de que El Radio de Oro es más atractivo que otros radios populares tales como .75 ó .67.

Para ilustrar esto, una vez encueste mi lista de correos acerca de cuál de los dos rectángulos, de los que están arriba, encontraron más atractivo. Uno de ellos es un cuadro, el otro es un rectángulo con una proporción .75 y el otro rectángulo con una media de .67 y otro es un rectángulo “Dorado”. ¿Cuál rectángulo luce más atractivo para usted?

Aquí están los resultados de la encuesta:

  • primero, en la esquina superior izquierda (Cuadro): 8%
  • segundo, en la esquina superior derecha (3:4 rectángulo): 29
  • tercero, en la esquina inferior izquierda (2:3 rectángulo): 37
  • finalmente, en la esquina superior derecha (“radio de oro”): 25

Como puede ver, el llamado rectángulo dorado se desempeño muy bien, pero no resulto ser el rectángulo más atractivo.

El rectángulo con la proporción d 2:3 gano en este caso, sin embargo, no hay que leer demasiado al respecto. El punto es que, cualquiera de los Radios de Oro a una proporción de 3:4 va a ser más atractivo un cuadro.

Usted puede usar este conocimiento para hacer que su tipografía luzca hermosa y, al mismo tiempo, ahorrará tiempo si usted trabaja con un pre-conjunto de una escala variada para su tipografía.

Por ejemplo, estos son los tamaños de fuente que siempre uso. Cada tamaño es más o menos una proporción de .75 del tamaño de aproximado del elemento anterior (claro, redondeando un poco las cantidades).

Un beneficio adicional al trabajar con una escala basada en la proporción de .75 en lugar del radio de oro, es que las matemáticas son más fáciles de hacer en su cabeza: ¿Qué es el 75% de 16? ¡Muy fácil! Sin embargo, si usaramos la proporción de radio de oro: ¿Qué es el 61.8% de 16?, nada fácil. Ve usted la diferencia

Conclusión

Al pensar en los cambios de tamaño que usted hace, sus diseños lucirán más nítidos y claros, y mientras sean más útiles, llegaran a ser mejores. Si usted usar una escala de variedad, entonces ¡usted, de hecho, puede hacer estupendos diseños más rápido!

Quédese para el artículo final de esta serie, en donde aprenderemos cómo configurar la pagina a través de la alineación y el tamaño, y cómo pensar acerca del espacio en blanco ayuda a darle a sus diseños incluso más claridad.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.