WIREFRAMES Y MOCKUPS

PROTOTIPADO

TIPOS DE WIREFRAMES

BAJA FIDELIDAD

Caracterizado por un dibujo en bruto o un boceto rpido, los

wireframes de baja fidelidad tienen menos detalles y son
rpidos de producir.
Ayudan a un equipo de proyecto a colaborar ms
efectivamente debido a que son ms abstractos, usando
rectngulos y etiquetas para representar el contenido.
Muestra contenido simblico son utilizados para representar
datos cuando el contenido real no est disponible.

BAJA FIDELIDAD

ALTA FIDELIDAD

Los wireframes de alta fidelidad son usados a

menudo para documentar, porque ellos incorporan
un nivel de detalle que se acerca ms al diseo
final de una pgina web, pero toma ms tiempo
para ser creado.

ALTA FIDELIDAD

GUAS VISUALES

GUAS VISUALES

Son estructuras simples conformados principalmente

de lneas y cajas.

GUAS VISUALES

Estn diseados en escala de grises.

GUAS VISUALES

Todos los elementos que lo componen estn representados de

forma esquemtica.

GUAS VISUALES

Se utiliza una sola familia tipogrfica.

1234567890?
abcdefghijklmn
opqrstuvwxyz

GUAS VISUALES

Se debe usar contenido real.

Lorem ipsum
o no?...

PROTOTIPO DE PAPEL

PROTOTIPO DE PAPEL
Es ideal para hacer los primeros esbozos del funcionamiento de una futura
aplicacin constituyndose en un elemento de testeado y debate rpido
(econmico) que evitar futuros y costosos errores en fases posteriores de desarrollo.

PROTOTIPO DE PAPEL

https://www.youtube.com/watch?v=GrV2SZuRPv0

PROTOTIPO DE PAPEL
Profundidad: El prototipo de papel ayuda a entender tanto interacciones as como
tambin profundodad de las mismas y de los elementos de la interfaz.

PROTOTIPO DE PAPEL

contel - Memoria de Ttulo Diseo Grfico Rodrigo Vera

PROTOTIPO DE PAPEL

contel - Memoria de Ttulo Diseo Grfico Rodrigo Vera

PROTOTIPO DE PAPEL

http://es.gizmodo.com/asi-se-diseno-sobre-papel-cuadriculado-el-primer-supe-1711919268?utm_campaign=Gizmodo_facebook_SF_es&utm_source=Gizmodo_facebook_es&utm_medium=Socialflow
http://www.businessinsider.com/super-mario-bros-creators-on-game-story-2015-6

PROTOTIPO DE PAPEL

http://es.gizmodo.com/asi-se-diseno-sobre-papel-cuadriculado-el-primer-supe-1711919268?utm_campaign=Gizmodo_facebook_SF_es&utm_source=Gizmodo_facebook_es&utm_medium=Socialflow
http://www.businessinsider.com/super-mario-bros-creators-on-game-story-2015-6

PROTOTIPO DE PAPEL

http://es.gizmodo.com/asi-se-diseno-sobre-papel-cuadriculado-el-primer-supe-1711919268?utm_campaign=Gizmodo_facebook_SF_es&utm_source=Gizmodo_facebook_es&utm_medium=Socialflow
http://www.businessinsider.com/super-mario-bros-creators-on-game-story-2015-6

PSICOLOGA DE
LAS
FORMAS

GESTALT

QU ES GESTALT

Es una corriente de la psicologa moderna, surgida en Alemania

a principios del siglo XX y cuyos exponentes ms reconocidos
han sido los tericos Max Wertheimer, Wolfgang Khler,
Kurt Koka y Kurt Lewin.

QU ES GESTALT
El campo de la sicologa de la Gestalt explica cmo la mente
humana percibe y organiza los estmulos visuales

Estmulos

Respuestas

QU ES GESTALT

Pueden contar la cantidad de puntos blancos?

QU ES GESTALT

Estructura con tres extremidades?

ILUSIONES PTICAS

copas?

ILUSIONES PTICAS

Se mueve?

QU ES GESTALT

La mente configura, a travs de ciertas leyes, los

elementos que llegan a ella a travs de los canales
sensoriales (percepcin) o de la memoria (pensamiento,
inteligencia y resolucin de problemas).

POR LO CUAL

La percepcin humana pasa por un proceso de

reestructuracin que configura a partir de esa
informacin una forma, un gestalt, que se
destruye cuando se intenta analizar.

EN RESUMEN

El campo de la sicologa de la Gestalt explica cmo la mente

humana percibe y organiza los estmulos visuales
Relacin entre las partes y el todo en la percepcin visual:
El todo es algo mas que la suma de sus partes
Los estmulos visuales son complejos por lo que nuestra
mente tiende a simplificar y buscar el orden.
Podramos referirnos a la Experiencia de Usuario es
saber cmo percibimos el mundo y sus estmulos

LEYES DE GESTALT

LEYES GESTALT

1 Proximidad
2 Similitud
3 Cierre

1. PROXIMIDAD

Objetos cercanos entre si tienden

a ser percibidos como un grupo

1. PROXIMIDAD

Objetos cercanos entre si tienden

a ser percibidos como un grupo

1. PROXIMIDAD

Objetos cercanos entre si tienden

a ser percibidos como un grupo

1. PROXIMIDAD

Objetos cercanos entre si tienden

a ser percibidos como un grupo

2. SIMILITUD

Objetos similares entre si tienden a

ser percibidos como un grupo

2. SIMILITUD

Objetos similares entre si tienden a

ser percibidos como un grupo

2. SIMILITUD

Objetos similares entre si tienden a

ser percibidos como un grupo

2. SIMILITUD

Objetos similares entre si tienden a

ser percibidos como un grupo

2. SIMILITUD

Objetos similares entre si tienden a

ser percibidos como un grupo

3. CIERRE

Bastan algunas partes del objeto

para percibir el objeto competo

Lo Ineludible

3.CIERRE
Bastan algunas partes del objeto
para percibir el objeto competo

3.CIERRE
Bastan algunas partes del objeto
para percibir el objeto competo

SOBRE GESTALT
Cada vez que enfrentamos el diseo de
una interfaz digital estamos poniendo a
prueba estas leyes.

Por eso es importante las decisiones que

tomamos a la hora de desarrollar una
interfaz
Debemos ponernos en el lugar de los
usuarios.

ACTIVIDAD