TONA MONJO

Wireframes
El proceso de prototipado

sitemap

2

flowchart

sketches

wireframes

mockups

prototipo

TONA MONJO
Wireframes
Qué son los wireframes

Son representaciones esquemáticas que muestran el contenido
de cada pantalla.
Pueden tener diverso...
Qué son los wireframes
Fundamentalmente muestran:
- La estructura de cada pantalla
- Qué información aparece en cada panta...
Qué son los wireframes
Los wireframes deben
mostrar claramente
cuál es la jerarquía de
los contenidos.

5

TONA MONJO
Wire...
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...
Pasos en la realización de los wireframes
1. Layout

7

TONA MONJO
Wireframes
Pasos en la realización de los wireframes
2. Wireframe detallado

8

TONA MONJO
Wireframes
Pasos en la realización de los wireframes
3. Detalle de los
comportamientos

9

TONA MONJO
Wireframes
Pasos en la realización de los wireframes
4. Anotaciones

10

TONA MONJO
Wireframes
WIREFRAMES

Diseño de interacción

11

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

12

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

13

TONA MONJO
Wirefra...
Interaction design guidelines
iPhone & iPad
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptua...
Interaction design guidelines
Windows Mobile

Microsoft Design Guidelines
http://msdn.microsoft.com/en-us/library/bb158602...
Interacción gestual
Gesture Stencils

http://www.graffletopia.com/stencils/587

http://somerandomdude.com/work/cue/

http:...
Interaction design patterns
UI Patterns
http://ui-patterns.com/

17

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

18

TONA MONJO
Wireframes
Interaction design patterns
Mobile Design
Pattern Gallery
http://
www.mobiledesignpatterngallery.com/
mobile-patterns.php
...
Interaction design patterns
Design Patterns en Flickr
http://www.flickr.com/
photos/factoryjoe/
collections/
7215760000182...
Próxima SlideShare
Cargando en…5
×

Wireframes

2.750 visualizaciones

Publicado el

Publicado en: Diseño
  • Sé el primero en comentar

Wireframes

  1. 1. TONA MONJO Wireframes
  2. 2. El proceso de prototipado sitemap 2 flowchart sketches wireframes mockups prototipo TONA MONJO Wireframes
  3. 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. 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. 5. Qué son los wireframes Los wireframes deben mostrar claramente cuál es la jerarquía de los contenidos. 5 TONA MONJO Wireframes
  6. 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. 7. Pasos en la realización de los wireframes 1. Layout 7 TONA MONJO Wireframes
  8. 8. Pasos en la realización de los wireframes 2. Wireframe detallado 8 TONA MONJO Wireframes
  9. 9. Pasos en la realización de los wireframes 3. Detalle de los comportamientos 9 TONA MONJO Wireframes
  10. 10. Pasos en la realización de los wireframes 4. Anotaciones 10 TONA MONJO Wireframes
  11. 11. WIREFRAMES Diseño de interacción 11 TONA MONJO Wireframes
  12. 12. Interaction design guidelines Android Design Patterns (oficial) http://developer.android.com/ design/index.html 12 TONA MONJO Wireframes
  13. 13. Interaction design guidelines Android Design Patterns (no oficial) http://www.androidpatterns.com/ 13 TONA MONJO Wireframes
  14. 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. 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. 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. 17. Interaction design patterns UI Patterns http://ui-patterns.com/ 17 TONA MONJO Wireframes
  18. 18. Interaction design patterns Designing Interfaces http://designinginterfaces.com/patterns/ 18 TONA MONJO Wireframes
  19. 19. Interaction design patterns Mobile Design Pattern Gallery http:// www.mobiledesignpatterngallery.com/ mobile-patterns.php 19 TONA MONJO Wireframes
  20. 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

×