4 principios de diseño visual para diseñadores web

Cuando abres un programa de edición o te pones manos a la obra, cada diseño visual que utilizas crea unidad entre elementos dispares o rompe esa unidad de forma creativa para fomentar una acción.

Aunque el diseño visual es una forma de arte, también se rige por leyes matemáticas. Como diseñador, no empiezas con un lienzo en blanco metafórico: existen unas pautas sencillas pero potentes para crear —y romper— diseños unificados. Los diseñadores web deben dar crédito a quien lo merece: los psicólogos de la Gestalt son los responsables de los principios de diseño visual que utilizas a diario.

¿Cuáles son los principios del diseño?

Probablemente aprendiste los principios del diseño en la clase de arte de la escuela.

Al ver un cuadro, una escultura, un folleto o un correo electrónico, es probable que tengas una reacción emocional inmediata. Sabes, por instinto, si te gusta o no. Sin embargo, quienes no tienen formación en diseño quizás no sepan explicar por qué. Los principios de diseño visual nos ayudan a dar sentido a las composiciones visuales. Los principios básicos del diseño incluyen:

• Espacio: En diseño web, a menudo se le llama "espacio en blanco" o el área entre elementos.
• Jerarquía: La importancia de algunos elementos con respecto a otros.
• Contraste: Cómo diferentes elementos pueden crear una composición más cohesiva.
• Escala/Proporción: La relación entre el tamaño de los elementos.
  

Aunque estos principios se desarrollaron junto con las artes visuales, los diseñadores web aplican principios de diseño que parten de estas ideas fundamentales.

¿Qué significa Gestalt?

El Diccionario de Cambridge define gestalt como:

Una estructura, configuración o patrón de fenómenos físicos, biológicos o psicológicos tan integrados que constituyen una unidad funcional con propiedades que no pueden derivarse de la suma de sus partes

Si estás pensando: "Oye, un sitio web bien diseñado sería una 'gestalt'", has dado en el clavo.

No todos los psicólogos de la Gestalt se apellidaban "Gestalt". Los psicólogos alemanes Max Wertheimer, Kurt Koffka y Wolfgang Kohler estudiaron cómo la mente humana procesa imágenes y patrones complejos en un mundo caótico. Se preguntaban: "¿Cómo llega la gente a percepciones significativas a partir de todo el caos que perciben sus cerebros?". A través de ese esfuerzo, estos científicos identificaron cuatro conceptos fundamentales que describen cómo los humanos interpretan los datos visuales.

Entender cómo los usuarios de dispositivos móviles y de escritorio interpretan cada píxel de tu sitio web te convierte en un diseñador más agudo e intuitivo. En general, los principios de la Gestalt se basan en la idea de que el cerebro procesa la información como un todo antes de pasar a las partes más pequeñas.

Los cuatro principios fundamentales del diseño se expanden en 13 reglas generales específicas sobre experiencias visuales que debes tener en cuenta al diseñar tu próximo sitio web de vanguardia. Antes de sumergirte en el mundo de cada principio de la Gestalt, domina estos principios de diseño visual.

Principio de emergencia

Basado en la idea central del círculo de pensamiento de la Gestalt, el principio de emergencia establece que los espectadores intentan dar sentido a una imagen completa antes de identificar sus partes.

Así que, cuando tu cerebro está procesando una imagen e intentando darle sentido, primero evalúa el contorno. Luego, compara ese contorno con otras formas almacenadas en tu memoria e intenta encontrar una coincidencia. Una vez que la encuentra, tu cerebro pasa a analizar cada componente. Cuando no logra encontrar una coincidencia, intenta examinar los componentes para entender la imagen completa.

Si ves la silueta borrosa de una persona caminando a lo lejos por la noche, tu cerebro sabe al instante que es una persona por la forma del cuerpo y sus extremidades. No necesitas ver las manos, los ojos o los pies para saber que es alguien, pero esos detalles visuales te ayudan a determinar quién es esa persona.

¿Qué significa la emergencia para el diseño?

Probablemente hayas escuchado la expresión, un poco trillada pero cierta, de "¡hazlo simple, idiota!". Lamentablemente, eso es lo que ocurre con tu sitio web. Al diseñar, el principio de emergencia sugiere que debes ceñirte a patrones familiares y fácilmente reconocibles.

Sabemos que te mueres de ganas por dejar tu sello personal en el diseño de tu próximo formulario y sorprender a tu jefe con una presentación realmente original. Pero, para tus usuarios, lo mejor es seguir con los estilos que ya conocen.

Unas casillas claramente delineadas y etiquetadas con un botón de "enviar" se reconocerán como un formulario mucho más rápido que una propuesta "creativa" que obligue a los visitantes del sitio a hacer gimnasia mental para entender qué están viendo.

¡Espera! No te vayas todavía. La regla de la emergencia no significa que debas dejar de diseñar de forma creativa. La emergencia indica una jerarquía de interpretación visual: los espectadores comienzan por el todo y luego se enfocan en las partes.

Usa tu talento visual y tu impresionante conocimiento de las tendencias de diseño actuales para ser creativo con los elementos individuales del formulario, siempre y cuando la imagen general sea reconocible como un formulario. La emergencia ofrece un argumento convincente a favor del minimalismo: un formulario más simple es más fácil de reconocer que uno complejo. Así que, como dijo aquel instructor pesado: "¡Hazlo simple!". Nosotros no te llamaremos idiota.

Principio de reificación

El principio de reificación establece que tu cerebro rellena los vacíos en la información visual para identificar objetos. No necesitas ver la totalidad de algo para entender qué es; si un diseño solo incluye una nariz, un ojo y el contorno de una mandíbula, puedes deducir que estás viendo una cara.

Debido al principio de reificación y a cómo funciona en tu mente, no tienes problemas para reconocer una señal de stop incluso cuando está cortada por la mitad:

¿Qué significa la reificación para el diseño?

La reificación significa que no tienes que incluir la totalidad de un objeto para que los espectadores lo reconozcan. Puedes usar este principio para ahorrar espacio en un diseño, sugerir el contenido de la siguiente diapositiva en un carrusel o hacer que tu página de "próximamente" sea más clara y atractiva.

La reificación es lo que hace que los diseños de logotipos minimalistas sean tan estéticamente agradables. Los seres humanos siempre intentamos dar sentido y orden al caos, y nuestros ojos lo logran mediante la reificación: rellenando los datos faltantes para darle sentido a lo que vemos.

Veamos una forma concreta de poner la reificación en práctica en un sitio web. La imagen de la izquierda es el "antes"; mira a la derecha para ver los ajustes que aprovechan el principio de reificación para lograr un diseño más memorable (y menos saturado).

Principio de multiestabilidad

Leer sobre el principio de multiestabilidad puede hacerte sentir como si estuvieras atrapado en una habitación con un estudiante de primer año de filosofía, así que seremos breves: la multiestabilidad explica por qué puedes ver solo las caras, o solo los jarrones en esa famosa ilusión óptica, pero nunca ambos al mismo tiempo.

A la mente no le gusta lo desconocido. Evolutivamente, el cerebro necesita una respuesta, y la necesita ya. Esta necesidad surge de la búsqueda de seguridad, pero tiene implicaciones fascinantes para el diseño visual. El cerebro se fija en una forma de ver las cosas y excluye otras alternativas. Fascinante, ¿verdad? O ves el brutalismo como una innovación arquitectónica o como una plaga, una mancha en un paisaje urbano por lo demás impecable. Pero sigamos adelante.

¿Qué significa la multiestabilidad para el diseño?

Si tienes un sexto sentido que te dice que algo pasa, vas por buen camino: la multiestabilidad contribuye inevitablemente a la confusión, por lo que es difícil de implementar con éxito en el diseño web. ¡Buscamos unidad y cohesión, no caos!

Pero, como han demostrado decenas de logotipos memorables a lo largo de los años, puedes usar la multiestabilidad para crear diseños impactantes y sorprendentes, como el logotipo de FedEx. Una vez que ves esa flecha (entre la E y la X), y las otras flechas que sugiere la reificación, es muy difícil dejar de verlas.

Principio de invariancia

El principio de invariancia establece que tu cerebro es experto en identificar similitudes y diferencias. Por eso es muy fácil hacer que algo destaque entre una multitud de objetos similares.

¿Recuerdas a la mujer del vestido rojo en Matrix? ¿O a la niña del abrigo rojo en La lista de Schindler? Esas dos destacan tanto —y son tan memorables— porque su color brillante resalta sobre los fondos en blanco y negro en los que se mueven. Eso las marca como algo significativo y digno de tu atención.

¿Qué significa la invariancia para el diseño?

En el ámbito del diseño, el principio de invariancia es una herramienta poderosa. Introduce un elemento diferente en un grupo de elementos por lo demás homogéneo para atraer la mirada e invitar a hacer clic.

Las páginas de precios de los productos son lugares fantásticos para la reificación. Los diseñadores web pueden hacer que una columna destaque sobre el resto de la tabla de precios mediante el color o el tamaño. En una página de "cancelar suscripción", el botón de "cancelar" puede ser pequeño y gris para integrarse en el fondo, mientras que el botón de "mantener suscripción" es vibrante y colorido.

Esta tabla de precios del tema de sitio web Modern Bootstrap 4 de Envato aplica claramente la invariancia al hacer que la opción de precio "Corporate" destaque sobre las demás.

Al mirar la página de facturación de MileIQ, puedes saber qué acción quieren que realice el usuario. El botón "Edit Payment Info" tiene un color brillante para motivar el clic, mientras que el botón "Cancel Subscription" apenas se nota.

En qué se diferencian estos 4 principios de diseño visual de los consejos de diseño de IU

Los principios de diseño visual, junto con las reglas generales de la Gestalt, se aplican a la imagen completa y a cómo tu cerebro da sentido a todo un diseño. Nuestros mejores consejos de diseño de IU, por otro lado, ofrecen consejos prácticos para los diseñadores que trabajan en cada elemento individual. Lee nuestro desglose para conocer consejos de diseño de IU que cubren la escala, el equilibrio, la jerarquía y el contraste, entre otros conceptos.

¿Estás listo para crear diseños atractivos, frescos y coherentes que representen tu marca a la perfección? Aplica nuestros principios fundamentales de diseño visual y olvídate de programar: echa un vistazo a nuestro tutorial de Webflow para descubrir cómo empezar a crear experiencias online centradas en el diseño.