SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 30 day free trial to unlock unlimited reading.
2.
El proceso de prototipado
sitemap
2
flowchart
sketches
wireframes
mockups
prototipo
TONA MONJO
Wireframes
3.
Qué son los wireframes
Son representaciones esquemáticas que muestran el contenido
de cada pantalla.
Pueden tener diversos niveles de detalle.
3
TONA MONJO
Wireframes
4.
Qué son los wireframes
Fundamentalmente muestran:
- La estructura de cada pantalla
- Qué información aparece en cada pantalla
- El labelling de la aplicación o website
- El comportamiento de los elementos interactivos
4
TONA MONJO
Wireframes
5.
Qué son los wireframes
Los wireframes deben
mostrar claramente
cuál es la jerarquía de
los contenidos.
5
TONA MONJO
Wireframes
6.
Qué son los wireframes
Los wireframes no muestran aún la línea gráfica
de la aplicación.
La atención debe centrarse en la arquitectura de
la información y el diseño funcional, no en el
diseño gráfico.
6
TONA MONJO
Wireframes
7.
Pasos en la realización de los wireframes
1. Layout
7
TONA MONJO
Wireframes
8.
Pasos en la realización de los wireframes
2. Wireframe detallado
8
TONA MONJO
Wireframes
9.
Pasos en la realización de los wireframes
3. Detalle de los
comportamientos
9
TONA MONJO
Wireframes
10.
Pasos en la realización de los wireframes
4. Anotaciones
10
TONA MONJO
Wireframes
11.
WIREFRAMES
Diseño de interacción
11
TONA MONJO
Wireframes