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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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