Blog

¿Qué es un Mockup? Fue una pregunta que me hice hace un tiempo porque uno de los desarrolladores en una reunión en la que participé, la dijo y me pareció que debía investigar un poco sobre este tema para entender metodología y herramientas que pueden/deben aplicarse.

En términos generales, un Mockup es lo mismo que una maqueta o un prototipo, según si simplemente es un dibujo del resultado final (maqueta) o una versión con funcionalidad reducida (prototipo) que permita intuir cual será su comportamiento o funciones reales.

En lo que al diseño y desarrollo web se refiere y más aún cuando se trata de un trabajo para un cliente, un mockup es el primer paso para la conclusión satisfactoria de un proyecto web para un cliente.

Permite al cliente visualizar el resultado final.

Deja claro el alcance total del proyecto. Puesto que se hacen maquetas de casi todas las páginas (o al menos de cada una que sea distinta de las demás), el conjunto deja claro cual es el alcance del proyecto y evita suposiciones que luego pueden derivar en situaciones incómodas (y a veces costosas) tanto para el cliente como para nosotros. En este caso, si el cliente detecta carencias, estamos en un punto en que se puede rectificar el presupuesto sin perder demasiado.

Agiliza (un montón) el proceso de desarrollo. Es increíble el poder que te otorga la sensación de progresión, de estar avanzando. Tengo comprobado que se consiguen mejores resultados cuando tienes una guía de todo el proceso y vas tachando pequeñas partes de ésta, una tras otra. En este caso, el Mockup puede servirte como una perfecta guía.

Ayuda en la delegación de tareas. Cuando se construye el mockup, la estructura debe estar diseñada para conducir al visitante hacia los objetivos que se hayan definido.

Considerar además el siguiente concepto, que también se usa:
Los wireframes, también conocidos como esquemas, blueprints, mockups o page architecture, son un conjunto de dibujos que tienen como fin representar la organización de los elementos en una página web. Representa solo la estructura, no incluye elementos gráficos. Sirve para ofrecer un vistazo rápido para conocer como será organizado el contenido web en la página sin entrar en muchos detalles. Es utilizada para poder observar el diseño de un sitio web antes de que se comience a programar y llevar a cabo el diseño visual del mismo. Los wireframes son una vía de comunicación entre los llamados arquitectos de la información, los programadores, los diseñadores y los clientes que encargaron el diseño visual del sitio. Los wireframes o esquemas también pueden ser utilizados para pruebas de usuarios, para evaluar la reacción de las visitas.

Un wireframe debe contener lo siguiente: inventario de contenido; vínculos, títulos; layout; cabeceras, listas, formularios; junto a notas que indiquen la función a ser desempeñada por cada parte del sitio web.

Para nuestra intervención deberíamos entender:

• Permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto.
• 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.
• 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

En síntesis: Los mockups son diseños destinados a simular una aplicación, un sistema operativo o cualquier otra cosa, y nosotros deberemos analizar la mejor y más rápida manera de testerlos.

Listado de algunas herramientas para desarrolladores
Listado de algunas herramientas para testers

Fuente:
http://www.vcgs.net/
http://www.equiposcreativos.com/
http://rua.ua.es/dspace/bitstream/10045/26288/1/Prototipado%20-%20wireframes%20mockups%20prototipos.pdf