introducción a prototipos - mockups
DESCRIPTION
Formidables herramientas de: –Comunicación entre todos los componentes del equipo de desarrollo y los usuarios –Participación, para integrar activamente a los usuarios en el desarrollo. –Dan soporte a los diseñadores a la hora de escoger entre varias alternativas. –Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos.TRANSCRIPT
![Page 1: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/1.jpg)
INTRODUCCIÓN A PROTOTIPOS Y MOCKUPS
20 de abril de 2013
Experto: Johann Paul Echavarría Zapata – Ingeniero Informático http://video.futurodigital.org/appsmedellin_mockups_abril_20/
www.apps.co
![Page 2: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/2.jpg)
Diferentes términos
• Clasificados en planos y maquetas.
• PLANOS:
– Mapa de arquitectura (architecture map)
– Blueprint (Diagrama o flujo de contenido)
• MAQUETAS:
– Mockup
– Prototipo
– Wireframe
– Sketch
![Page 3: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/3.jpg)
PLANOS:
Diagrama de organización y funcionamiento (estructura)
![Page 4: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/4.jpg)
MAQUETAS: Diagramas de presentación
Según nivel de detalle se clasifican en: • Prototipos de Baja fidelidad
• Prototipo de Alta Fidelidad
![Page 5: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/5.jpg)
Sketch(boceto, bosquejo) Matacho, garabato mamarracho en paisa
Prototipos de baja fidelidad:
![Page 6: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/6.jpg)
Wireframe (Mas detalle que sketch pero sin detalle gráfico)
Prototipos de baja fidelidad:
![Page 7: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/7.jpg)
Storyboard. Secuencia de wireframes que muestran cómo se realiza una tarea.
También llamados “Thumbnail Sketches”
Prototipos de baja fidelidad:
![Page 8: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/8.jpg)
Tareas previas a realización de wireframes
• Entrevistas con el cliente y el equipo de desarrollo para definir los requisitos, los objetivos y el público objetivo.
• Estudio del contexto: problemas de usabilidad y accesibilidad, estadísticas de acceso, test con usuarios y encuestas.
• Benchmarking, o estudio comparativo de la competencia.
• Definición de la arquitectura de información y mapa web.
![Page 9: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/9.jpg)
(también llamados maqueta, mockUp o prototipo funcional)
• Normalmente en (X)HTML, que simulan o tienen implementadas partes del sistema final a desarrollar
Prototipo de Alta Fidelidad
![Page 10: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/10.jpg)
Ventajas
Formidables herramientas de:
– Comunicación entre todos los componentes del equipo de desarrollo y los usuarios
– Participación, para integrar activamente a los usuarios en el desarrollo.
– Dan soporte a los diseñadores a la hora de escoger entre varias alternativas.
– Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos.
– Permiten evaluar el sistema desde las primeras fases del desarrollo (facilitan la exploración de ideas sobre nuevos conceptos tecnológicos).
– Son esenciales para la documentación, tanto de conceptos funcionales del sistema como de tareas concretas del mismo.
– Son el primer paso para que ideas abstractas sean concretas, visibles y testeables.
![Page 11: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/11.jpg)
Herramienta gratuitas
Para prototipos y wireframes: PENCIL Aplicación de escritorio y extensión de Firefox
http://pencil.evolus.vn/
![Page 12: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/12.jpg)
Herramienta gratuitas prototipos y diversos diagramas colaborativo: CACOO
Herramienta online parte 1 https://cacoo.com
![Page 13: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/13.jpg)
Herramienta gratuitas prototipos y diversos diagramas colaborativo: CACOO
Herramienta online parte 2 https://cacoo.com
![Page 14: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/14.jpg)
Herramienta gratuitas para mockups móviles y tabletas: jQuerymobile
Herramienta online http://jquerymobile.com/ IDE. No sólo para mockups
![Page 15: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/15.jpg)
Herramienta gratuitas para mockups aplicaciones web: jQuerymobile
http://twitter.github.io/bootstrap/getting-started.html#examples Framework (líder actual en
open source) para estilos y controles web.
![Page 16: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/16.jpg)
Referencias
• http://olgacarreras.blogspot.com.es/2007/02/wireframes.html
• http://pencil.evolus.vn/
• https://cacoo.com
• http://jquerymobile.com/
• http://twitter.github.io/bootstrap/getting-started.html#examples
![Page 17: Introducción a Prototipos - Mockups](https://reader033.vdocuments.net/reader033/viewer/2022051403/568c4af21a28ab49169a4682/html5/thumbnails/17.jpg)
¡GRACIAS!