«La gente ignora el diseño que

ignora a la gente.» — Frank

Chimero

Diseño de Interfaces de Programación

TÉCNICAS Y HERRAMIENTAS DE
MAQUETACIÓN

Diseño de Interfaces de Programación

Sesión 02
 Capacidad terminal

Comprender el concepto del diseño de interfaces de

usuario de entrada/salida de datos.

Diseño de Interfaces de Programación

 Agenda

• Introducción.
• Concepto de “Prototipado”.
• Tipos de Prototipado.
• Conclusiones y cierre.
 Introducción

• A pesar de ser Ingenieros de Software o Programadores

calificados, muchas de las interfaces que desarrollamos a
menudo son poco atractivas e inapropiadas para sus
usuarios objetivo.
• Se analizará por lo tanto, el proceso de diseño de
interfaces de usuario en lugar del software que
implementa estas interfaces
 Prototipado de la interfaz
de usuario

• Prototipo: Primer ejemplar que se fabrica de

una figura, un invento u otra cosa, y que sirve de
modelo para fabricar otras iguales, o molde
original con el que se fabrica.
 ¿Por qué prototipar?

• Mejora la velocidad de desarrollo

• Involucra al cliente

Es necesario que expliques que lo que vas a

entregar no es un diseño acabado, sino un
documento de trabajo que se utilizará para
definir posición y jerarquía de elementos en
página.
 Tipos de prototipos

• Sketching, para dibujar todo el sitio web, los

procesos y las relaciones entre pantallas (sólo
papel).
 Tipos de prototipos

• Wireframing, para dibujar con un cierto

nivel de detalle las pantallas, sus esbozos de
contenido, las llamadas a la acción y en
general la disposición física de los elementos
(papel o digital).
 Tipos de prototipos

• Prototipado, para diseñar y ejecutar la

interacción entre las pantallas que componen los
procesos (sólo digital).
 Cuándo utilizar Scketching

• Siempre hay una fase inicial en la que hay

bastante indefinición. Aquí hacer sketching
(diseños muy esquemáticos en papel) suele ser
lo más útil, ya que permite la participación del
cliente y ayuda a centrarlo en la jerarquización
de contenidos sin entrar a otros detalles (sobre
un boceto de este tipo no debe haber
consideraciones acerca de imágenes, tipografía o
colores).
Cuándo utilizar wireframing

• En la fase de wireframing ya se ha definido una

estructura general, y se entrega una maqueta de
más fidelidad.
• Suele servir para validar y confirmar aspectos
que ya se han hablado previamente, por lo que
no debería ser necesario realizar grandes
cambios aquí.
Cuándo utilizar Prototipado

• El prototipado debe llevarse a cabo cuando

vamos a evaluar la interacción, y sirve para
definir aspectos que no quedan claramente
reflejados en un boceto de papel o un wireframe
no navegable.
• Los prototipos son navegables, por lo que sirven
para testear elementos de interacción como
estados hover de botones, validación de
formularios, iconos, o cualquier elemento con el
que el usuario cuando interactúe.
 VIDEO:

https://www.youtube.com/watch?v=8PJ0Ja8qHQc
Prototipado en papel

Prototipo de una
aplicación para
dispositivos
móviles.
Prototipado en papel

Prototipo de una
aplicación web.
Prototipado en papel

Prototipo de una
aplicación.
Prototipado con Software
Prototipado con Software
 Herramientas para
Prototipado
• Balsamiq Mockup
FIN DE LA UNIDAD