ley de la semejanza

Unidad 2

ELEMENTOS DEL DISEÑO GRÁFICO

Gestalt: Principios de percepción
●
●

Gestalt en el diseño de interfaces
Principios de percepción:
● Relación fondo y figura
● Semejanza
● Proximidad, conectividad y continuidad
● Destino común
● Cierre

UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

1

¿Qué es Gestalt?
La psicología de la Gestaltes una corriente de la psicología moderna, surgida en
Alemania a principios del siglo XX.
Las leyes de la Gestalt se apoyan en el principio de que el todo es mayor que la suma
de sus partes.
La mente configura, a través de ciertas leyes, los elementos que llegan a través de los
canales sensoriales (percepción), o de la memoria.
Principios de percepción:
● Relación fondo y figura
● Semejanza● Proximidad, conectividad y continuidad
● Destino común
● Cierre

UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

2

Relación figura y fondo
●
●
●

El cerebro no puede interpretar un objeto como figura o fondo al mismo tiempo.
Es la de mayor fuerza y trascendencia de las expuestas.
Lo principal en contraposición con lo secundario.

Ejemplo derelación simple de figura y fondo

UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

2

Relación figura y fondo
Ejemplo: menú de navegación
Ambos tienen la misma estructura pero en el segundo es complejo de diferenciar los
elementos que son figura o fondo (los bordes compiten en importancia con el texto).

Ejemplo: botones
El botón de la derecha invitaa ser "clickeado". Las luces y sombras generan la sensación
de figura (texto) y fondo.

UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

2

Relación figura y fondo
El efecto desenfocado y la baja
luminosidad de las burbujas
permiten que el titular en blanco se
reconozca como forma.

Un ejemplo que rompe las reglas.
El fondo comienza a ser parte dela figura.
UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

2

Semejanza
●

Nuestra mente agrupa los elementos similares en contraste con los diferentes.
¿Cuál es la relación entre estos elementos?

UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

2

Semejanza
●

Nuestra mente agrupa los elementos similares encontraste con los diferentes.
¿Cuál es la relación entre estos elementos?

UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

2

Semejanza
Ejemplo: Links
Todos los links son
del mismo color sin
importar familia y
cuerpo tipográfico.

También pueden
tener diferente color,
hay 4 colores
diferentes según la
zona y función que
ocupan.
UNSL |Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

2

Semejanza
Los recuadros de borde gris
indican que son los artículos.

Todos los elementos son
consistentes en su
comportamiento cuando el
cursor pasa sobre ellos.

UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

2

Semejanza
Organización y estructura
● Nuestra mente agrupalos elementos
similares en una entidad.

●

La similitud nos ayuda a relacionar un
elemento con otro. En este ejemplo no hay
división estructural, todos los elementos de
la grilla están relacionados de igual manera.

UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

2

Semejanza
Columnas

Organización y estructura
● Nuestra mente agrupa loselementos
similares en una entidad.
●

El color es el recurso gráfico que estructura
en columnas, líneas horizontales o zonas.

Líneas horizontales

Zonas

2

UNSL | Introducción al Diseño Gráfico| unsldg@gmail.com | http://cor.to/unsldg

Proximidad
●

Relacionamos los elementos que están próximos entre sí y percibimos como ajenos
a los más alejados.

Un grupo

UNSL |...