Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO                Prototipado                      ...
Introducción al desarrollo web              http://idesweb.es/                                        ContactoPROTOTIPADO ...
Introducción al desarrollo web              http://idesweb.es/                                         Arquitecto de infor...
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO
Introducción al desarrollo web              http://idesweb.es/               Planos                          Sitio web fin...
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO                    Planos                    Blu...
Introducción al desarrollo web              http://idesweb.es/                 http://www.nosolousabilidad.com/articulos/d...
Introducción al desarrollo web              http://idesweb.es/                 http://www.jmcquarrie.co.uk/2007/08/09/docu...
Introducción al desarrollo web              http://idesweb.es/                 http://www.sccc.premiumdw.com/itc200/intera...
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO                                      Jesse James...
Introducción al desarrollo web              http://idesweb.es/                 http://www.boxesandarrows.com/view/yahoo_ma...
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO                 http://www.jjg.net/ia/visvocab
Introducción al desarrollo web              http://idesweb.es/                                                            ...
Introducción al desarrollo web              http://idesweb.es/                 http://www.nosolousabilidad.com/articulos/d...
Introducción al desarrollo web              http://idesweb.es/                    MaquetasPROTOTIPADO                    P...
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO                     Incorrecto                Co...
Introducción al desarrollo web              http://idesweb.es/                    SketchingPROTOTIPADO                    ...
Introducción al desarrollo web              http://idesweb.es/                   Sketch                      Sitio realPRO...
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO                http://www.billbuxton.com/
Introducción al desarrollo web              http://idesweb.es/                    WireframesPROTOTIPADO
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO
Introducción al desarrollo web              http://idesweb.es/                    StoryboardPROTOTIPADO                   ...
Introducción al desarrollo web              http://idesweb.es/                    Prototipos funcionalesPROTOTIPADO       ...
Introducción al desarrollo web              http://idesweb.es/                 http://olgacarreras.blogspot.com.es/2011/07...
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO
Introducción al desarrollo web              http://idesweb.es/                                   • El equipo y el cliente ...
Introducción al desarrollo web              http://idesweb.es/                                   • El prototipo se modific...
Introducción al desarrollo web              http://idesweb.es/                                   • Permite realizar prueba...
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO                                               Be...
Introducción al desarrollo web              http://idesweb.es/                   Otras referencias de interésPROTOTIPADO  ...
Introducción al desarrollo web              http://idesweb.es/                   Otras referencias de interésPROTOTIPADO  ...
Introducción al desarrollo web              http://idesweb.es/                     Consejos para realizar un buen prototip...
Introducción al desarrollo web              http://idesweb.es/PROTOTIPADO                                         Resumen
Introducción al desarrollo web              http://idesweb.es/                  http://www.jjg.net/elements/translations/e...
Introducción al desarrollo web              http://idesweb.es/                Planos                Blueprint, diagramas d...
Introducción al desarrollo web              http://idesweb.es/                         http://idesweb.es/PROTOTIPADO      ...
Introducción al desarrollo web              http://idesweb.es/                          Créditos de imágenes y fotografías...
Upcoming SlideShare
Loading in …5
×

Prototipado

1,510 views

Published on

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

Published in: Technology
  • Be the first to comment

Prototipado

  1. 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. 2. Introducción al desarrollo web http://idesweb.es/ ContactoPROTOTIPADO • Blog: http://olgacarreras.blogspot.com • Web: http://www.usableyaccesible.com • Twitter: @olgacarreras
  3. 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. 4. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO
  5. 5. Introducción al desarrollo web http://idesweb.es/ Planos Sitio web finalPROTOTIPADO Maquetas
  6. 6. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO Planos Blueprint, diagramas de contenido o flujo o mapa web
  7. 7. Introducción al desarrollo web http://idesweb.es/ http://www.nosolousabilidad.com/articulos/diagramacion.htmPROTOTIPADO
  8. 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. 9. Introducción al desarrollo web http://idesweb.es/ http://www.sccc.premiumdw.com/itc200/interaction-design/PROTOTIPADO
  10. 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. 11. Introducción al desarrollo web http://idesweb.es/ http://www.boxesandarrows.com/view/yahoo_mail_simplicity_holds_up_over_time/PROTOTIPADO
  12. 12. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO http://www.jjg.net/ia/visvocab
  13. 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. 14. Introducción al desarrollo web http://idesweb.es/ http://www.nosolousabilidad.com/articulos/diagramacion.htmPROTOTIPADO
  15. 15. Introducción al desarrollo web http://idesweb.es/ MaquetasPROTOTIPADO Prototipado de baja fidelidad y de alta fidelidad Sketching, wireframes, storyboard, prototipos funcionales
  16. 16. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO Incorrecto Correcto
  17. 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. 18. Introducción al desarrollo web http://idesweb.es/ Sketch Sitio realPROTOTIPADO
  19. 19. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO http://www.billbuxton.com/
  20. 20. Introducción al desarrollo web http://idesweb.es/ WireframesPROTOTIPADO
  21. 21. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO
  22. 22. Introducción al desarrollo web http://idesweb.es/ StoryboardPROTOTIPADO Secuencia de wireframes http://www.slideshare.net/nickf/wireframes-for-the-wicked
  23. 23. Introducción al desarrollo web http://idesweb.es/ Prototipos funcionalesPROTOTIPADO Prototipos de alta fidelidad
  24. 24. Introducción al desarrollo web http://idesweb.es/ http://olgacarreras.blogspot.com.es/2011/07/arquitectura-de-informacion-fundamentos.htmlPROTOTIPADO
  25. 25. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO
  26. 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. 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. 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. 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. 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. 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. 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. 33. Introducción al desarrollo web http://idesweb.es/PROTOTIPADO Resumen
  34. 34. Introducción al desarrollo web http://idesweb.es/ http://www.jjg.net/elements/translations/elements_es.pdfPROTOTIPADO
  35. 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. 36. Introducción al desarrollo web http://idesweb.es/ http://idesweb.es/PROTOTIPADO idw@idesweb.es
  37. 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

×