Wireframes

2.431 visualizaciones

Publicado el

Publicado en: Diseño

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

×