Gestalt: Principios de percepción

Transcripción

1 Unidad ELEMENTOS DEL DISEÑO GRÁFICO Gestalt: Principios de percepción Gestalt en el disen o de interfaces Principios de percepción: Relación fondo y figura Semejanza Proximidad, conectividad y continuidad Destino común Cierre 1 Qué es Gestalt? La psicología de la Gestalt es 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

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 de relación simple de figura y fondo 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 invita a ser "clickeado". Las luces y sombras generan la sensación de figura (texto) y fondo.

3 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 de la figura. Semejanza Nuestra mente agrupa los elementos similares en contraste con los diferentes. Cuál es la relación entre estos elementos?

4 Semejanza Nuestra mente agrupa los elementos similares en contraste con los diferentes. Cuál es la relación entre estos elementos? 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.

5 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. Semejanza Organización 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 división estructural, todos los elementos de la grilla están relacionados de igual manera.

6 Semejanza Columnas Organización y estructura Nuestra mente agrupa los elementos similares en una entidad. El color es el recurso gráfico que estructura en columnas, líneas horizontales o zonas. Líneas horizontales Zonas Proximidad Relacionamos los elementos que están próximos entre sí y percibimos como ajenos a los más alejados. Un grupo Dos grupos

7 Proximidad Si agregamos el principio de semejanza, aún prevalece el principio de proximidad. Un grupo Dos grupos Proximidad Si agregamos el principio de semejanza, aún prevalece el principio de proximidad.

8 Conectividad Aunque mantengamos la consistencia de espaciado y color entre elementos, una simple variación conecta ciertos elementos y los separa del resto. Conectividad Aunque mantengamos la consistencia de espaciado y color entre elementos, una simple variación conecta ciertos elementos y los separa del resto.

9 Continuidad Relacionamos aquellos elementos que están ordenados por una línea recta o curva. Entendemos mejor la información cuando está ordenada. El gráfico de la derecha es más fácil de entender.. La organización lineal relaciona los elementos. Continuidad Relacionamos aquellos elementos que están ordenados por una línea recta o curva. Entendemos mejor la información cuando está ordenada. Ejemplos de elementos de interfaz de usuario:

10 Continuidad Relacionamos aquellos elementos que están ordenados por una línea recta o curva. Entendemos mejor la información cuando está ordenada. Los elementos organizados en la curva se relacionan entre sí y no tienen una directa relación con los que no están posicionados en la curva. Continuidad Relacionamos aquellos elementos que están ordenados por una línea recta o curva. Entendemos mejor la información cuando está ordenada.

11 Destino común Relacionamos aquellos elementos que se mueven en una misma dirección. Ver demostración Cierre A simple vista, tendemos a reconocer un patrón reconocible. Nuestra mente agrega elementos faltantes para completar una figura.

12 Cierre A simple vista, tendemos a reconocer un patrón reconocible. Nuestra mente agrega elementos faltantes para completar una figura. Cierre A simple vista, tendemos a reconocer un patrón reconocible. Nuestra mente agrega elementos faltantes para completar una figura.

13 Referencias