O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Próximos SlideShares
Sketching
Avançar
Transfira para ler offline e ver em ecrã inteiro.

11

Compartilhar

Baixar para ler offline

Wireframes

Baixar para ler offline

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
  • jordiubanell

    Nov. 16, 2018
  • marketingvv

    Jan. 24, 2017
  • CarlosAlcntara

    Apr. 7, 2016
  • geraldinems

    Mar. 30, 2015
  • miriamroig

    Jan. 26, 2015
  • emagudelog

    Dec. 12, 2014
  • rafaredondo1

    May. 9, 2014
  • TioClaudio

    Apr. 23, 2014
  • escarola76

    Feb. 6, 2014
  • iMona06

    Jan. 27, 2014
  • terevida

    Jan. 27, 2014

Vistos

Vistos totais

3.438

No Slideshare

0

De incorporações

0

Número de incorporações

8

Ações

Baixados

96

Compartilhados

0

Comentários

0

Curtir

11

×