Desarrollada por primera vez en Alemania, la Gestalt es una teoría que aborda cómo nuestras conductas cognitivas se ven afectadas por diversas percepciones visuales.

Ilustra cómo nuestras mentes reaccionan a lo que vemos con nuestros ojos: cómo relacionamos y separamos elementos para dar sentido a una imagen.

Gestalt, en el diccionario, significa “un todo que se percibe como más que la suma de sus partes”.

En el diseño, esto simplemente significa que cuando agrega ciertos elementos de una manera específica, puede crear un gran diseño. Hay cinco principios de diseño que comprende la teoría de la Gestalt:

  • 1. Semejanza
  • 2. Continuación
  • 3. Cierre
  • 4. Proximidad
  • 5. Figura/Fondo

Estos principios se han aplicado en diseños desde hace un tiempo y dieron resultados positivos. Con eso, ¡vamos a conocerlos más!

1. Similitud

En pocas palabras, los elementos que se parecen, o al menos tienen un atributo visual común, tienden a percibirse como un grupo.

En un sentido psicológico, nuestra mente se inclina a organizar elementos con su relación con objetos adyacentes. También es cierto con lo contrario, los elementos que son diferentes tienden a resistir la agrupación.
semejanza
En la parte izquierda de la imagen de arriba, los 20 elementos similares parecen un solo grupo. En el lado derecho, los elementos redondos y cuadrados parecen pertenecer a dos grupos diferentes.

La similitud se puede lograr a través del color, los tamaños, las formas y las orientaciones.
categorías

Similitud en la práctica

Puede usar el principio de similitud para obtener conexión de elementos y unidad en su diseño.

Por otro lado, también puedes usarlo para dar más énfasis a las partes importantes al hacerlo diferente. Esto se llama ‘anomalía’.
anomalía

Ejemplos del principio de similitud

7 arriba
En este ejemplo de un anuncio de 7up, los colores de la lata de refresco son similares a las hojas y las frutas. Se mimetiza fácilmente con la rama, lo que nos facilita asociarlo al árbol y transmitir su mensaje de ser 100% natural.
anuncios 7up

flujo de trabajo
Este diseño es otro gran ejemplo de cómo el principio de similitud puede unificar un diseño, en este caso, con el uso del color y al mismo tiempo crear una anomalía en el botón de llamada a la acción para enfatizarlo.
flujo de trabajo

2. Continuación

El principio de continuación nos dice que cuando comenzamos a seguir una línea, real o imaginaria, tendemos a seguir su camino hasta que vemos algo significativo, o nos damos cuenta de que no hay nada significativo en absoluto.

En la imagen a continuación, puede ver dos líneas, una línea vertical y una línea curva que se cruzan en el medio.
continuación
Pero en realidad contiene 4 líneas que se encuentran en el centro.
actual

Continuación en la práctica

Este principio se puede aplicar a su diseño para guiar los ojos de los espectadores a un elemento específico.

Un buen ejemplo es una flecha y un círculo. En este caso, la flecha parece crear una línea percibida que guía los ojos hacia el elemento ‘significativo’.
flecha

Ejemplos del principio de continuación

bastantepequeñacosa
Aquí verás que las imágenes están dispuestas horizontalmente. Esto le da al espectador una perspectiva de una línea horizontal y les sugiere una presentación de diapositivas horizontal.
cosita bonita

Faro
Este diseño de logotipo tiene una línea amarilla que dirige nuestra atención hacia la derecha del diseño para enfatizar el nombre de la empresa.
faro

3. Cierre

El cierre representa la tendencia de nuestros ojos a “completar” una forma bastante incompleta completando la información que falta.

Nuestras mentes tienden a llenar los espacios en blanco cuando se nos da algún contexto de los objetos que lo rodean. Dicho esto, debe dar suficientes pistas o información para que los espectadores puedan completar el resto.

A continuación, puede ver una estrella en el centro aunque solo hay 5 círculos con cuñas disponibles.
cierre

Ejemplos del principio de cierre

FedEx
El logotipo de FedEx existe desde hace un tiempo, pero fue solo recientemente cuando notamos un diseño inteligente: la flecha entre la ‘E’ y la ‘x’. Furtivo.
logotipo de fedex

Red de EE. UU.
Otro gran ejemplo es el logo de USA Network. El diseño de las letras U y A nos hace ver la letra S.
logotipo de la red de EE. UU.

4. Proximidad

Básicamente, el principio de proximidad nos dice que los elementos cercanos se perciben más relacionados que los que están más separados.

En contraste con el principio de similitud, los elementos no necesitan ser iguales. Mientras estén cerca uno del otro, seguirán estando agrupados.

En la imagen de abajo a la izquierda, puedes ver un grupo de círculos. Pero, cuando se agrega una distancia en el medio, puede percibir dos grupos de círculos como se ve en el lado derecho.
proximidad

Proximidad en la práctica

El principio de proximidad puede ser de gran ayuda, especialmente en el diseño web. Puede minimizar el desorden innecesario en los sitios web y mejorar la experiencia del usuario. También puede ayudar a agrupar elementos relacionados para que la navegación sea más fácil para los lectores.

Ejemplos del principio de proximidad

en el viñedo
En este ejemplo, las imágenes cuadradas se colocan juntas manteniendo un espacio de otros elementos. Esto lo hace más agradable a la vista y fácil de navegar.
diseño web de proximidad

michi ramen
Aquí verá que en la sección del menú, los ingredientes se colocan cerca del nombre del plato para que se perciban fácilmente como relacionados entre sí.
ramen espacio en blanco

5. Figura/Fondo

Este principio aborda cómo percibimos el espacio. Describe cómo somos capaces de diferenciar los objetos (figura) del fondo que los rodea (fondo).

La figura es la que inmediatamente capta la atención del espectador, mientras que el suelo recibe menos atención pero ayuda a dar un contexto a toda la imagen.

Aquí el figura es el círculo negro mientras que el terrestre es el fondo gris.
figura-fondo

El principio de figura/fondo también explica cómo nuestro cerebro interpreta una imagen de la forma más sencilla posible.

Por ejemplo, aunque esta imagen a continuación muestra una vela, las personas pueden ver dos caras cerca una de la otra, ya que es más fácil de ver que la forma intrincada de la vela.
fondo de figura ambigua

Figura/Fondo en la práctica

Esto es importante porque es lo primero que las personas intentan determinar cuando miran una imagen. Está bien integrado en nuestro núcleo evolutivo. En cierto modo, nos ayuda a dar sentido rápidamente a lo que estamos viendo.

En el contexto del diseño web, este principio ayuda a los usuarios a distinguir el contenido (figura) de la estructura (fondo) del sitio web.

Ejemplos del principio de figura/fondo

Naturaleza
Este tema tiene un fondo vibrante que puede captar fácilmente la atención. Sin embargo, el cuadro verde (figura) es más prominente por cómo contrasta con el fondo y el borde que lo rodea.
tema de wordpress de la naturaleza

miércoles
Aquí también notará inmediatamente las gafas coloridas en esta imagen a continuación.
boda

¡Estás despierto!

Ahora que tiene una idea de lo que es la teoría de la Gestalt, puede comenzar a familiarizarse con sus principios observándolos en varios diseños en línea e incluso en su entorno cotidiano. Preste más atención a cómo estos principios de la Gestalt juegan su papel en ellos. Si lo hace, puede mejorar en gran medida sus conocimientos sobre el diseño y puede aprovecharlos e implementarlos para sus próximos proyectos.

christie ann

Sobre el Autor:
Un trabajador independiente filipino que no es sofisticado pero que también puede ser aventurero. Pasa mucho tiempo navegando por la red y leyendo. Es una pensadora muy optimista que cree que algún día podrá ver una estrella fugaz.

Deja una respuesta