Una de las mayores diferencias que tenemos al diseñar de forma digital con respecto a hacerlo en papel es que podemos a hacer ajustes casi a nivel atómico de forma muy sencilla. Seguro que cuando empezasteis, era todo un placer que con un solo clic, poder alinear cualquier elemento de forma instantánea, para hacer que todo estuviese en su posición y en el pixel correcto. Pero cuando todo está en su sitio, seguro que habéis experimentado la sensación de que aquello que está centrado, no nos parece que este justamente en el centro. Volvemos a comprobar y tenemos el mismo número de pixeles a cada lado, pero seguimos sin verlo centrado. Y es aquí cuando empieza el ajuste óptico, y tenemos que hablar de la percepción que nuestro cerebro nos da de nuestro alrededor.
Ya tratamos anteriormente en SiloCreativo las ilusiones ópticas al hablar sobre el efecto irradiación, y como a veces nuestro cerebro nos engaña en situaciones más allá de la lógica. Pues es el ajuste óptico no es más que la forma que tenemos de modificar algo que la lógica nos dice que es correcto, pero que nuestro cerebro interpreta que no es así. O dicho de otra manera, no nos resulta «visualmente placentero» lo que estamos viendo, y lo tenemos que modificar para conseguirlo.
En este artículo trataremos varios casos de este tipo que es habitual encontrarnos ante ellos, como son el ajuste óptico para los colores, y el de diferentes tipos de alineación. Y es que, es habitual que como diseñadores creemos algo, y de repente tenemos una visión externa, ya sea de un cliente o un compañero, que nos diga que algo está mal, a pesar que de hemos comprobado que, matemáticamente, todo parece correcto. Por eso hay que dejar claro que aquí no vamos a dar unas reglas exactas sobre como aplicar correctamente ciertas soluciones. Solo que siempre hay que tener en cuenta que, a veces, tenemos que hacer caso de nuestra percepción para hacer variaciones antes que a lo que nos dicte la lógica.
Ajustes ópticos de color según el fondo y el grosor
Hemos hablado en muchas ocasiones sobre el color, como hacer combinaciones o como aplicar de forma correcta el contraste. Pero también es importante saber como percibimos los colores, y que esta percepción no será la misma según la forma y el grosor de cada elemento. Veamos un ejemplo sencillo.
En la imagen anterior podemos ver un icono y un texto, ambos del mismo color. Pero parece que el texto tiene un color algo más claro que el icono, a pesar de que no es así. Podéis descargar la imagen por vosotros mismos para comprobarlo, o usar el cuentagotas que tiene el inspector de algunos navegadores web. ¿A qué se debe esto?.
Pues en este caso es por dos motivos. El primero es que, al usar una tipografía de un grosor tan pequeño, el color lo percibimos con más luminosidad. A lo que hay que sumarle que tenemos un fondo muy claro, por lo que en el contorno de la tipografía se produce una especie de efecto halo, que hace que dicho contorno sea mas claro que el centro de la tipografía. Pero claro, al ser tan fina, prácticamente solo tenemos contorno. Pero eso no nos ocurre en el icono, al tener mas zona de relleno, se pierde ese efecto halo, y lo percibimos su color tal y como es.
¿Cuál es la solución a esto?. Pues es tan sencillo como subir la luminosidad al icono, o bajarla en al texto. Si utilizáis el código de color HSL os resultará fácil hacerlo. Aquí ya empezaremos a jugar con dicha luminosidad hasta encontrar el punto en el que notemos que ambos elementos tengan un color similar.
Ajustes ópticos en formas y logotipos
La percepción que tenemos de las formas geométricas es un tema muy interesante. E intentar ajustarlas y alinearlas no se queda atrás. Hace poco empecé a diseñar el típico icono de play de un reproductor de video, un triángulo equilátero. Nada del otro mundo. Pero este triángulo iba dentro de un círculo. Centrar ambos elementos no fue tan sencillo como parecía sobre el papel.
Colocar el triángulo justo en el centro, justo con el mismo número de pixeles a cada lado, no hacía que lo percibiese centrado. Seguro que vosotros también os percatáis como la distancia entre el margen izquierdo y el lado izquierdo del triángulo es mucho menor que el lado derecho y el vértice derecho del triángulo. Cuando ambos son de 40px. Esto se produce porque el centro de masas del triángulo no está a la mitad de su altura, sino algo más bajo. Esta situación es fácil de solucionar si dibujamos el círculo concéntrico del triángulo, y hacemos la alineación con respecto al círculo concéntrico. Vemos como el resultado es más placentero para la vista.
Eso sí, esta no es una solución única, ya que la percepción visual no son unas reglas escritas en piedra. Como ejemplo, tenemos un logotipo que seguramente sea de los más vistos en el mundo a lo largo del día.
Si analizamos el logotipo de YouTube, vemos claramente como el triángulo no está centrado tal como vimos en el ejemplo del principio. Pero es que tampoco está centrado por su centro de masa, que fue la solución que adaptamos antes y que nos parecía correcta. Al no tener un fondo en formato cuadrado, sino rectangular, nuestra percepción vuelve a cambiar, por lo que sus diseñadores tuvieron que hacer otro ajuste óptico extra para que el logotipo se viese de forma correcta. Este es un ejemplo claro de como en el ajuste óptico no existe una norma única, sino que debemos fiarnos de nuestra percepción y, por supuesto, de nuestra experiencia.
Ajustes ópticos en tipografía
Por último queríamos hablar de otro elemento que tenemos muy presente a la hora de diseñar, como son las tipografías. Seguro que habrá alguno de vosotros que alguna vez se ha propuesto crear una tipografía propia en algún proyecto, y ha tenido que estudiar tipografías ya creadas para buscar inspiración. Pero cuando miramos al detalle algunas de estas tipografía, encontramos detalles tan curiosos como este de la fuente Roboto.
Si trazamos una linea horizontal por la parte superior de la f minúscula, vemos como la parte superior de la panza supera esa línea horizontal, al igual que la oreja de la r minúscula. Algo que posiblemente nunca hayamos notado al leer un texto. Pero es que si estas zonas redondeadas terminasen justo donde hemos añadido la línea vertical, si que notaríamos como si estuviesen por debajo. El diseñador de la tipografía es perfectamente consciente de estos detalles, y por eso hace estos pequeños ajustes para que la lectura sea agradable y no notemos cosas extrañas.
Pero no solo hay que realizar ajustes ópticos en el trazo de las grafías, sino también al alinear los propios textos. Si escribimos un texto con la tipografía Montserrat, lo alineamos a su izquierda sin tocar absolutamente nada, pasa esto.
Si utilizamos un tamaño muy grande de texto, o si hacemos zoom, vemos como no existe una alineación perfecta del margen izquierdo. Las letras que tienen un lado plano están desplazadas unos pixeles más a la derecha que aquellas redondeadas. Se produce el mismo efecto que vimos antes. Las grafías redondeadas tienen una superficie de contacto menor con el margen, por lo que nos da la sensación de que están algo desplazadas, cuando en realidad no es así.
Si sois asiduos a usar software de maquetación como InDesign, seguro que habéis visto que existe una opción llamada Alineación óptica, que precisamente sirve para corregir estos rasgos. Aparte, también nos ayudan a desplazar ciertos símbolos, como los guiones de las listas o los corchetes, para que el texto se note más equilibrados.
Como hemos podido ver, no siempre la lógica al elegir colores o alinear elementos a la hora de diseñar es la solución más adecuada. La forma en la que percibimos el mundo y nuestro cerebro lo interpreta hace que no siempre nos resulte confortable visualmente lo que estemos creando. Y aquí es donde entra de lleno el ajuste óptico, cuando tenemos que hacer pequeñas correcciones hasta que notemos que todo se muestra de forma correcta.
Esperamos que os haya resultado interesante este tema. Y como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias con el ajuste óptico.
