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
Prototipos de baja 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”
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, competencia.
•
Definición de la arquitectura de información y mapa web.
o
estudio
comparativo
de
la
Prototipo de Alta Fidelidad (tambiĂŠn llamados maqueta, mockUp o prototipo funcional)
•
Normalmente en (X)HTML, que simulan o tienen implementadas partes del sistema final a desarrollar
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!