Conceptos básicos del equilibrio óptico en el diseño de interfaces

Nuestro cerebro percibe la información de manera diferente a lo que creemos en muchas ocasiones, es lo que llamamos ilusión óptica.

Con el diseño de interfaces (UI), debes romper las leyes de la física y las matemáticas y cambiar ligeramente la apariencia de los elementos para crear un equilibrio óptico.

Tamaño

Cuando colocamos un cuadrado y un círculo uno al lado del otro y les damos exactamente el mismo tamaño, podemos sentir visualmente que el círculo es más pequeño que el cuadrado. En ese caso, aumentamos ligeramente nuestro círculo, y las formas se verán visualmente más cercanas entre sí, aunque el diámetro del círculo sea, de hecho, mayor que el diámetro del cuadrado.

Este ajuste óptico también lo realizamos por ejemplo cuando diseñamos tipografías.

Las formas básicas poseen un peso visual relacionado con la superficie que ocupan. Para equilibrar estas diferencias visuales entre formas es necesario modificar sus dimensiones aumentando el tamaño del vértice superior en el triángulo y el tamaño del círculo por los extremos superior e inferior. Un claro ejemplo de este uso se puede ver en tipografía: para la creación de los caracteres triangulares (como la ‘A’ o la ‘V’) es necesario su ensanche por el vértice. Para la creación de caracteres circulares (como la ‘O’) es necesario compensar visualmente los dos extremos. Los caracteres mixtos (como la ‘D’) se compensan siguiendo estos principios.

Color

La compensación en el balance óptico con colores es menos apreciable. Sin embargo, en el caso de que coloquemos un icono lleno al lado de un texto, podríamos encontrar el siguiente problema: el texto podría verse un poco más tenue.

Este desajuste óptico ocurre porque los caracteres, en comparación con un icono lleno, están hechos de líneas finas y tienen menos peso visual que el icono.

Para contrarrestar el problema con respecto al peso visual, podríamos darle al texto un color ligeramente más oscuro en comparación con el icono.

Posición

Cuando colocamos un icono al lado de un texto y los alineamos verticalmente, podríamos terminar colocando el icono más alto en relación con el texto.

Aquí es donde también debemos considerar la línea de base del texto, ya que ambos objetos tienen pesos diferentes. En este caso, solo necesitamos bajar el icono dentro del cuadro delimitador, como se muestra en el ejemplo de la imagen a continuación.