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
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
PLANOS:
Diagrama de organización y funcionamiento (estructura)
MAQUETAS: Diagramas de presentación
Según nivel de detalle se clasifican en: • Prototipos de Baja fidelidad
• Prototipo de Alta Fidelidad
Sketch(boceto, bosquejo) Matacho, garabato mamarracho en paisa
Prototipos de baja fidelidad:
Wireframe (Mas detalle que sketch pero sin detalle gráfico)
Prototipos de baja fidelidad:
Storyboard. Secuencia de wireframes que muestran cómo se realiza una tarea.
También llamados “Thumbnail Sketches”
Prototipos de baja fidelidad:
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.
(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
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.
Herramienta gratuitas
Para prototipos y wireframes: PENCIL Aplicación de escritorio y extensión de Firefox
http://pencil.evolus.vn/
Herramienta gratuitas prototipos y diversos diagramas colaborativo: CACOO
Herramienta online parte 1 https://cacoo.com
Herramienta gratuitas prototipos y diversos diagramas colaborativo: CACOO
Herramienta online parte 2 https://cacoo.com
Herramienta gratuitas para mockups móviles y tabletas: jQuerymobile
Herramienta online http://jquerymobile.com/ IDE. No sólo para mockups
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.
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
¡GRACIAS!