Your SlideShare is downloading. ×
0
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Prototipado
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Prototipado

895

Published on

Presentación para el curso ""Introducción al desarrollo web". Disponible en formato vídeo en http://youtu.be/vJrEbO50kxA

Presentación para el curso ""Introducción al desarrollo web". Disponible en formato vídeo en http://youtu.be/vJrEbO50kxA

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
895
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO Prototipado Olga Carreras Montoto Consultora en experiencia de usuario Usable y accesible (España) IDW-PRO-1
  • 2. Introducción al desarrollo web http://idesweb.es/ ContactoPROTOTIPADO • Blog: http://olgacarreras.blogspot.com • Web: http://www.usableyaccesible.com • Twitter: @olgacarreras
  • 3. Introducción al desarrollo web http://idesweb.es/ Arquitecto de informaciónPROTOTIPADO • Identifica los objetivos del proyecto • Identifica las necesidades de los usuarios • Especifica las funcionalidades y requerimientos de la aplicación web • Define y diseña los sistemas de navegación, organización, etiquetado y búsqueda • Prototipa la aplicación web
  • 4. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO
  • 5. Introducción al desarrollo web http://idesweb.es/ Planos Sitio web finalPROTOTIPADO Maquetas
  • 6. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO Planos Blueprint, diagramas de contenido o flujo o mapa web
  • 7. Introducción al desarrollo web http://idesweb.es/ http://www.nosolousabilidad.com/articulos/diagramacion.htmPROTOTIPADO
  • 8. Introducción al desarrollo web http://idesweb.es/ http://www.jmcquarrie.co.uk/2007/08/09/documenting-the-design-of-a-web-application-part-one-using-garretts-visual-vocabulary-to- document-the-information-architecture-2/PROTOTIPADO
  • 9. Introducción al desarrollo web http://idesweb.es/ http://www.sccc.premiumdw.com/itc200/interaction-design/PROTOTIPADO
  • 10. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO Jesse James Garret “Vocabulario visual para describir arquitectura de información y diseño de interacción” http://www.jjg.net/ia/visvocab/spanish.html
  • 11. Introducción al desarrollo web http://idesweb.es/ http://www.boxesandarrows.com/view/yahoo_mail_simplicity_holds_up_over_time/PROTOTIPADO
  • 12. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO http://www.jjg.net/ia/visvocab
  • 13. Introducción al desarrollo web http://idesweb.es/ Dan BrownPROTOTIPADO Communicating Design Developing Web Site Documentation for Design and Planning Christina Wodtke, Information Architecture Blueprint for the web Peter Morville & Louis Rosenfeld, Information Architecture for the World Wide Web http://docstore.mik.ua/orelly/web2/infoarch/ch08_04.htm
  • 14. Introducción al desarrollo web http://idesweb.es/ http://www.nosolousabilidad.com/articulos/diagramacion.htmPROTOTIPADO
  • 15. Introducción al desarrollo web http://idesweb.es/ MaquetasPROTOTIPADO Prototipado de baja fidelidad y de alta fidelidad Sketching, wireframes, storyboard, prototipos funcionales
  • 16. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO Incorrecto Correcto
  • 17. Introducción al desarrollo web http://idesweb.es/ SketchingPROTOTIPADO Prototipos de baja fidelidad http://stopdesign.com/archive/2003/06/02/design-process.html http://www.developertutorials.com/tutorials/php/designing-and-coding-a- wordpress-theme-from-scratch-part-2-144
  • 18. Introducción al desarrollo web http://idesweb.es/ Sketch Sitio realPROTOTIPADO
  • 19. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO http://www.billbuxton.com/
  • 20. Introducción al desarrollo web http://idesweb.es/ WireframesPROTOTIPADO
  • 21. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO
  • 22. Introducción al desarrollo web http://idesweb.es/ StoryboardPROTOTIPADO Secuencia de wireframes http://www.slideshare.net/nickf/wireframes-for-the-wicked
  • 23. Introducción al desarrollo web http://idesweb.es/ Prototipos funcionalesPROTOTIPADO Prototipos de alta fidelidad
  • 24. Introducción al desarrollo web http://idesweb.es/ http://olgacarreras.blogspot.com.es/2011/07/arquitectura-de-informacion-fundamentos.htmlPROTOTIPADO
  • 25. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO
  • 26. Introducción al desarrollo web http://idesweb.es/ • El equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual. 1PROTOTIPADO • El cliente ve y comprende cómo será la aplicación, mucho mejor que si se ofrece descrita en un documento. • Evita malentendidos entre el proveedor y el cliente e incluso entre los propios miembros del equipo. • Ayuda a especificar los requerimientos y a detectar inconsistencias o falta de funcionalidad. • Es un complemento de gran valor en el análisis.
  • 27. Introducción al desarrollo web http://idesweb.es/ • El prototipo se modifica con facilidad y rapidez. 2PROTOTIPADO • Se evitan modificaciones posteriores mucho más costosas cuando la aplicación ya se está implementando. • Se reducen costes y tiempos.
  • 28. Introducción al desarrollo web http://idesweb.es/ • Permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto. 3PROTOTIPADO • Se detectan y solucionan los problemas antes de comenzar su implementación. • El resultado son aplicación web más fáciles de entender, de usar y que se ajustan mejor a las necesidades de los usuarios.
  • 29. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO Beneficios de prototipar una aplicación web: • Menor tiempo de desarrollo posterior Tiempo/coste de realizar el prototipo • Mayor calidad del resultado final • Mayor satisfacción del cliente y el usuario final
  • 30. Introducción al desarrollo web http://idesweb.es/ Otras referencias de interésPROTOTIPADO • Artículo “Wireframes” de Olga Carreras: http://olgacarreras.blogspot.com.es/2007/02/wireframes.html • Artículo “Prototipado” de Fundación Sidar: http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm • Blog “Wireframes” http://wireframes.linowski.ca/ • Glosario de usabilidad y accesibilidad http://www.usableyaccesible.com/recurso_glosario.html
  • 31. Introducción al desarrollo web http://idesweb.es/ Otras referencias de interésPROTOTIPADO • Presentación “Wireframes for the witcked” http://www.slideshare.net/nickf/wireframes-for-the-wicked • Presentación “Importance of Wireframes in Web Design” http://www.slideshare.net/hiteshmehta/importance-of-wireframe-in-web-design
  • 32. Introducción al desarrollo web http://idesweb.es/ Consejos para realizar un buen prototipoPROTOTIPADO • Sencillez y claridad • Hazlo en blanco y negro • Representa los tamaños y proporciones de los bloques de contenido • Ten en cuenta las pautas de accesibilidad y usabilidad • Y sobre todo, diseña para tus usuarios
  • 33. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO Resumen
  • 34. Introducción al desarrollo web http://idesweb.es/ http://www.jjg.net/elements/translations/elements_es.pdfPROTOTIPADO
  • 35. Introducción al desarrollo web http://idesweb.es/ Planos Blueprint, diagramas de contenido o flujo, o mapa webPROTOTIPADO Sketch Baja fidelidad Maquetas Wireframes Alta fidelidad Prototipo funcional
  • 36. Introducción al desarrollo web http://idesweb.es/ http://idesweb.es/PROTOTIPADO idw@idesweb.es
  • 37. Introducción al desarrollo web http://idesweb.es/ Créditos de imágenes y fotografías • Planos:PROTOTIPADO – Diapositiva 7: http://www.nosolousabilidad.com/articulos/diagramacion.htm – Diapositiva 8: http://www.jmcquarrie.co.uk/2007/08/09/documenting-the-design-of-a-web-application- part-one-using-garretts-visual-vocabulary-to-document-the-information-architecture-2/ – Diapositiva 9: http://www.sccc.premiumdw.com/itc200/interaction-design/ – Diapositiva 11: http://www.boxesandarrows.com/view/yahoo_mail_simplicity_holds_up_over_time/ – Diapositiva 12: http://www.jjg.net/ia/visvocab – Diapositiva 13: http://docstore.mik.ua/orelly/web2/infoarch/ch08_04.htm • Maquetas: – Diapositiva 17: • http://www.developertutorials.com/tutorials/php/designing-and-coding-a-wordpress-theme-from-scratch-part-2-144 • http://stopdesign.com/archive/2003/06/02/design-process.html – Diapositiva 22: http://www.slideshare.net/nickf/wireframes-for-the-wicked • Balanza (diapositiva 29): http://www.sxc.hu/photo/875413 • Los elementos de la experiencia de usuario (diapositiva 34): http://www.jjg.net/elements/translations/elements_es.pdf

×