El documento introduce el concepto de prototipado en el desarrollo web. Explica que el prototipado permite crear representaciones de baja y alta fidelidad de una aplicación web para identificar requisitos, probar usabilidad y evitar errores costosos. Los tipos de prototipos incluyen planos, bocetos, wireframes y prototipos funcionales.

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/
Contacto
PROTOTIPADO
• Blog: http://olgacarreras.blogspot.com
• Web: http://www.usableyaccesible.com
• Twitter: @olgacarreras

3. Introducción al desarrollo web
http://idesweb.es/
Arquitecto de información
PROTOTIPADO
• 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 final
PROTOTIPADO
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.htm
PROTOTIPADO

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 Brown
PROTOTIPADO
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.htm
PROTOTIPADO

15. Introducción al desarrollo web
http://idesweb.es/
Maquetas
PROTOTIPADO
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/
Sketching
PROTOTIPADO
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 real
PROTOTIPADO

19. Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO
http://www.billbuxton.com/

20. Introducción al desarrollo web
http://idesweb.es/
Wireframes
PROTOTIPADO

21. Introducción al desarrollo web
http://idesweb.es/
PROTOTIPADO

22. Introducción al desarrollo web
http://idesweb.es/
Storyboard
PROTOTIPADO
Secuencia de wireframes
http://www.slideshare.net/nickf/wireframes-for-the-wicked

23. Introducción al desarrollo web
http://idesweb.es/
Prototipos funcionales
PROTOTIPADO
Prototipos de alta fidelidad

24. Introducción al desarrollo web
http://idesweb.es/
http://olgacarreras.blogspot.com.es/2011/07/arquitectura-de-informacion-fundamentos.html
PROTOTIPADO

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.
1
PROTOTIPADO
• 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.
2
PROTOTIPADO
• 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.
3
PROTOTIPADO
• 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és
PROTOTIPADO
• 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és
PROTOTIPADO
• 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 prototipo
PROTOTIPADO
• 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.pdf
PROTOTIPADO

35. Introducción al desarrollo web
http://idesweb.es/
Planos
Blueprint, diagramas de contenido o flujo, o mapa web
PROTOTIPADO
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