Unidad 2

ELEMENTOS DEL DISEO GRFICO

Gestalt: Principios de percepcin
Gestalt en el diseno de interfaces
Principios de percepcin:
Relacin fondo y figura
Semejanza
Proximidad, conectividad y continuidad
Destino comn
Cierre

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 1

Qu es Gestalt?

La psicologa de la Gestalt es una corriente de la psicologa 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 travs de ciertas leyes, los elementos que llegan a travs de los
canales sensoriales (percepcin), o de la memoria.

Principios de percepcin:
Relacin fondo y figura
Semejanza
Proximidad, conectividad y continuidad
Destino comn
Cierre

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Relacin 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 contraposicin con lo secundario.

Ejemplo de relacin simple de figura y fondo

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Relacin figura y fondo

Ejemplo: men de navegacin
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 botn de la derecha invita a ser "clickeado". Las luces y sombras generan la sensacin
de figura (texto) y fondo.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Relacin 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 de
la figura.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Semejanza

Nuestra mente agrupa los elementos similares en contraste con los diferentes.

Cul es la relacin entre estos elementos?

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Semejanza

Nuestra mente agrupa los elementos similares en contraste con los diferentes.

Cul es la relacin entre estos elementos?

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

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

Tambin pueden
tener diferente color,
hay 4 colores
diferentes segn la
zona y funcin que
ocupan.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Semejanza

Los recuadros de borde gris

indican que son los artculos.

Todos los elementos son

consistentes en su
comportamiento cuando el
cursor pasa sobre ellos.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Semejanza

Organizacin y estructura
Nuestra mente agrupa los elementos
similares en una entidad.

La similitud nos ayuda a relacionar un

elemento con otro. En este ejemplo no hay
divisin estructural, todos los elementos de
la grilla estn relacionados de igual manera.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Semejanza
Columnas
Organizacin y estructura
Nuestra mente agrupa los elementos
similares en una entidad.

El color es el recurso grfico que estructura

en columnas, lneas horizontales o zonas. Lneas horizontales

Zonas

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Proximidad

Relacionamos los elementos que estn prximos entre s y percibimos como ajenos
a los ms alejados.

Un grupo Dos grupos

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Proximidad

Si agregamos el principio de semejanza, an prevalece el principio de proximidad.

Un grupo Dos grupos

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Proximidad

Si agregamos el principio de semejanza, an prevalece el principio de proximidad.

http://www.rodrigogalindez.com/themes/modernist/

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Conectividad

Aunque mantengamos la consistencia de espaciado y color entre elementos, una

simple variacin conecta ciertos elementos y los separa del resto.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Conectividad

Aunque mantengamos la consistencia de espaciado y color entre elementos, una

simple variacin conecta ciertos elementos y los separa del resto.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Continuidad

Relacionamos aquellos elementos que estn ordenados por una lnea recta o curva.
Entendemos mejor la informacin cuando est ordenada.

El grfico de la derecha es ms
fcil de entender..

La organizacin lineal relaciona

los elementos.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Continuidad

Relacionamos aquellos elementos que estn ordenados por una lnea recta o curva.
Entendemos mejor la informacin cuando est ordenada.

Ejemplos de elementos de interfaz de usuario:

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Continuidad

Relacionamos aquellos elementos que estn ordenados por una lnea recta o curva.
Entendemos mejor la informacin cuando est ordenada.

Los elementos organizados en

la curva se relacionan entre s y
no tienen una directa relacin
con los que no estn
posicionados en la curva.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Continuidad

Relacionamos aquellos elementos que estn ordenados por una lnea recta o curva.
Entendemos mejor la informacin cuando est ordenada.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Destino comn

Relacionamos aquellos elementos que se mueven en una misma direccin.

Ver demostracin

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Cierre

A simple vista, tendemos a reconocer un patrn reconocible.

Nuestra mente agrega elementos faltantes para completar una figura.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Cierre

A simple vista, tendemos a reconocer un patrn reconocible.

Nuestra mente agrega elementos faltantes para completar una figura.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

Cierre

A simple vista, tendemos a reconocer un patrn reconocible.

Nuestra mente agrega elementos faltantes para completar una figura.

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2

 Referencias
http://es.wikipedia.org/wiki/Psicolog%C3%ADa_de_la_Gestalt
http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php

UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2