El documento describe los wireframes, que son representaciones esquemáticas de las pantallas de una aplicación que muestran la estructura, contenido e interacción pero no el diseño gráfico. Explica que los pasos para crear wireframes son definir el layout, agregar detalles, comportamientos e interacciones y agregar anotaciones. También proporciona enlaces a guías de diseño de interacción para plataformas móviles.

1. TONA MONJO
Wireframes

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

12. Interaction design guidelines
Android Design
Patterns
(oficial)
http://developer.android.com/
design/index.html
12
TONA MONJO
Wireframes

13. Interaction design guidelines
Android Design
Patterns
(no oficial)
http://www.androidpatterns.com/
13
TONA MONJO
Wireframes

14. Interaction design guidelines
iPhone & iPad
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/
Introduction.html#//apple_ref/doc/uid/TP40006556-CH1-SW1
14
TONA MONJO
Wireframes

15. Interaction design guidelines
Windows Mobile
Microsoft Design Guidelines
http://msdn.microsoft.com/en-us/library/bb158602.aspx
!
TOUCH Guidance (PDF)
http://download.microsoft.com/download/8/A/6/8A652B51AF09-4A5A-888C-A0465D00FE5E/Windows%208%20Touch
%20Guidance.pdf
15
TONA MONJO
Wireframes

16. Interacción gestual
Gesture Stencils
http://www.graffletopia.com/stencils/587
http://somerandomdude.com/work/cue/
http://gestureworks.com/pages/corefeatures-gestures
Más referencias:
http://somerandomdude.com/work/cue/
16
TONA MONJO
Wireframes

17. Interaction design patterns
UI Patterns
http://ui-patterns.com/
17
TONA MONJO
Wireframes

18. Interaction design patterns
Designing
Interfaces
http://designinginterfaces.com/patterns/
18
TONA MONJO
Wireframes

19. Interaction design patterns
Mobile Design
Pattern Gallery
http://
www.mobiledesignpatterngallery.com/
mobile-patterns.php
19
TONA MONJO
Wireframes

20. Interaction design patterns
Design Patterns en Flickr
http://www.flickr.com/
photos/factoryjoe/
collections/
72157600001823120/
http://www.flickr.com/groups/designpatterns/
http://www.flickr.com/photos/
guspim/collections/
72157600047307884/
20
TONA MONJO
Wireframes