Introducción a Prototipos - Mockups

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!