Gestalt: la teoría útil en el día a día de un diseñador

«Crear»…que bonita palabra para una actividad que de tan sencilla se vuelve compleja. Para mi la creatividad y el hecho de «crear» algo nuevo cada día, es un proceso cotidiano, como lavarte los dientes. Sin embargo he aprendido que no para todos es igual.

Recientemente trabajando en una clase de «creatividad e innovación» con jóvenes universitarios cuyas carreras no tienen nada que ver con el Diseño o la Comunicación, pude notar la falta de importancia que le damos a la creatividad en nuestra vida cotidiana.

Y es que la mente humana es compleja y prioriza actividades de diversa forma, por eso cada persona entiende y percibe según sus propias reglas.

A pesar de esto existen conductas que cada ser humano sigue un patrón o conducta al momento de percibir el entorno, una teoría psicológica que ha estudiado esto es la Gestalt. La Gestalt es uno de los enfoques psicológicos más atractivos, sobre todo para aquellas personas que creen que la manera de ser, comportarse y sentir del ser humano no puede resumirse a lo que es directamente observable o medible.

La palabra alemana Gestalt, que muchas veces se traduce al español como «forma», representa el proceso por el que construimos marcos (patrones) de percepción de la realidad: todas las personas interpretamos la realidad y tomamos decisiones sobre ella con base a estas «formas» o «figuras» mentales que vamos creando sin darnos cuenta. La teoría de la Gestalt se centra en dar explicaciones acerca de nuestra manera de percibir las cosas y tomar decisiones a partir de las “formas” que creamos.

psicologiaymente.com

¿Y qué tiene que ver la Gestalt con el diseño?

Los principios sobre percepción visual que trata la psicología de la Gestalt han sido utilizados desde entonces como algo habitual a la hora de diseñar. Existen 6 principios básicos que se pueden adaptar tanto al diseño gráfico tradicional (carteles, flyers, revistas, libros), como al diseño digital (websites, redes sociales, UX,UI, etc). Estos «comportamientos» establecidos por la Gestalt nos ayudan a construir mensajes más claros, y fáciles de entender para la mente humana, e incluso nos ayudan a simplificar y ejecutar una perfecta jerarquía del contenido de nuestras plataformas y/o diseños.

Similitud

Reconocer elementos de características iguales es algo inherente al ser humano, buscamos coincidencias en todo lo que vemos y eso nos ayuda a comprender mejor nuestro entorno.

En un diseño o en la estructura de una interfaz los elementos que comparten características, deberían agruparse, es decir, el motivo por el que en una tarjeta de presentación (tarjeta de visita) los datos como la dirección, teléfono, e-mail, etc.,suelen están juntos en una sola sección ya demás comparten características como:tamaño de la fuente, color, alineación entre otros.La razón de que esto suceda es, ok ok porque para la percepción humana, esto resulta más fácil de asimilar y por ende funciona mejor.

Los datos de contacto se encuentras alienados a un nivel distinto del nombre y comparten tamaño e interlineado para facilitar su lectura.

Dentro de una aplicación o sitio web la similitud te puede ayudar para agrupar y a la vez categorizar información, a través de formas o iconos que comparten características, como forma, color o distribución, esto hace que tu aplicación se acerque mas a los modos y costumbres de tu usuario.

Aún cuando los iconos están situados sobre colores distintos, el echo de contenerse en la misma forma (circulo), estandariza un menú de usuario.

Continuación

Generar equilibrio y coherencia visual, resulta importante y tranquilizador para el espectador, además crear un entorno uniforme, ayuda otro elemento importante de la composición: el contraste. Y con el contraste generamos puntos específicos de atracción o atención.

Usar la continuación en el diseño resulta sencillo, partimos de una secuencia de elementos que nos darán uniformidad con al finalidad de resaltar un sólo elemento en la composición:

Generar gotas de lluvia con código binario, además de proporcionar una atmósfera de continuidad, permite inserta un elemento de contraste como lo es la sombrilla y conduce le ritmo y la vista del espectador.

Por otro lado la continuidad aplicada en interfaces web, cumple con una función más: guía la lectura, guía al usuario. Cuando tenemos una barra de navegación, respetamos las misma características gráficas, con la finalidad de indicarle al usuario los pasos a seguir, la continuidad es el equivalente a una guía de lectura:

En la barra superior observamos menus y submenus con el mismo formato y colocados de forma continua a la misma distancia uno de otro.

Cierre

Un comportamiento natural del ser humano es «completar» lo que percibe, es decir, cuando vemos una figura incompleta, nuestra mente se encarga de agregar las partes que faltan, como si se tratara de un rompecabezas. El efecto es muy similar algo que hacemos cuando buscamos formas en las nubes, es una actividad común para nuestro cerebro.

Como recurso gráfico, sirve para generar efectos verdaderamente atractivos que captan más fácil la atención del público:

El automobil cubre de forma parcial la palabra «FORCE» creando un efecto novedoso y visualmente muy atractivo y a pesar de no tener una lectura completa de la palabra, podemos leerlo sin problema, porque nuestro cerebro llena los espacios cubiertos.

Dentro del diseño digital, los elementos más comunes que tienden a utilizar este recurso son los loaders o cargadores, los cuales adicionalmente añaden movimiento para mantener «entretenido» al usuario:

Proximidad / agrupación

Si bien dentro del recurso de «similitud» agrupamos elementos, que comparten características similares, no debemos confundirnos con la proximidad o agrupación.

La diferencia radica en que la similitud busca guiar la vista del lector o hacer más sencilla la experiencia de usuario dentro de una plataforma o página web y la aproximación a partir de diversos elementos que pueden ser completamente distintos entre si, crean una sola figura, el único requisito es que compartan al menos una característica como por ejemplo color o textura.

La intención de la proximidad es crear elementos figurativos a base de pequeños elementos que interactúan entre sí:

La figura creada a través de la proximidad es una letra «N», sin embargo esta creada de pequeños átomos para reforzar el nombre y concepto de la marca.

Figura/fondo

Una técnica que en otros contextos se puede llamar «positivo/negativo» es el recurso «figura/fondo». La percepción humana, así como tiende a completar elementos incompletos, también tiende a separar objetos independientes en una imagen, el más claro ejemplo de esta técnica es una imagen muy común que circula en internet que nos muestra dos rostros frente a frente y un jarrón, y dependiendo de tus hábitos de percepción, observarás una imagen antes que otra:

Este principio básico es un recurso muy utilizado en el diseño gráfico:

Mientras algunas personas se enfocan en ver al personaje de la película y las rocas en donde queda atrapado en el filme, algunas otras podrán separar la figura más clara (tonalmente hablando): un reloj de arena (al menos su contorno)

Un modal box o pop-up es un ejemplo muy básico de como este principio se aplica a los medios digitales:

Visualmente le deja claro al usuario, a través de contornos y sombras que existe una separación evidente entre el contenido de fondo y el contenido dentro de la caja, ayudando a la jerarquía del contenido en general.

Simetría y orden

Como mencionaba al principio, la naturaleza humana busca equilibrio, y también porque no decirlo busca lo «fácil», los humanos no andamos por ahi buscando problemas y por eso es importante no generarles ruido visual.

Crear imágenes ordenadas, simétricas y con ritmos conocidos siempre ayudara una mejor comprensión del mensaje que deseamos comunicar.

Páginas web saturadas de elementos innecesarios generarán desconfianza, tedio y sobre todo un nivel de comprensión muy bajo:

Esta página web ubicada en la parte superior, podemos observar como esta cargada de elementos que dificultan al lectura, tiene una imagen de fondo, encima un banner, el buscador esta sobre la imagen de fondo, el logotipo no se lee bien, en fin muchos elementos mal equilibrados y colocados.
En contraste esta página tiene estructura, bloques definidos de acuerdo al tipo de contenido, buena estructura de las cajas de textos, la información esta jerarquizada, y en conjunto genera armonía lo que da como resultado un orden fácilmente perceptible.

Ahora ya conoces principios muy básicos pero a la vez muy importantes, que de considerarlos en tu día a día, resultarán en una mejor ejecución de tu trabajo.

Recuerda que no se necesita ser un genio para crear una buena comunicación visual, pero sí se necesitan comunicadores comprometidos con su trabajo, que estén dispuestos a CREAR soportes estéticos, funcionales y bien estructurados para el público al que se quieren dirigir.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .