Mockup
Una imagen estática y de alta fidelidad de una pantalla o un producto, con el color, la tipografía, las imágenes y el contenido finales, que muestra cómo se verá antes de construirlo.
Para qué sirve
Permite ver y acordar el aspecto final antes de programar, cuando cambiar un color o una imagen aún cuesta poco.
Elementos clave
Aspecto, no estructura
Parte de una estructura ya acordada, por ejemplo en un wireframe, y se centra en cómo se ve.
Mucha fidelidad visual, ninguna interacción
Parece terminado, pero no se puede usar; para probar el uso hace falta un prototipo.
Con las piezas del sistema
Si hay un sistema de diseño, se arma con sus componentes y estilos en lugar de inventar otros.
Cómo se hace
Se parte de la estructura ya acordada en el wireframe.
Se aplican color, tipografía e imágenes con textos e imágenes reales o muy parecidos.
Se revisa con el equipo y, si hay que probar el uso, se enlaza en un prototipo.
Aplicaciones en diseño
Cuándo usarlo
Cuando la estructura ya está acordada y hay que decidir y presentar el aspecto visual.
Evita
Hacer el mockup antes de cerrar la estructura; la conversación se irá a los colores.
Para no caer
Que parezca acabado no significa que funcione; pruébalo con personas antes de darlo por bueno.
Conexiones
Autores y obras
- 1996
Jim Rudd, Ken Stern y Scott Isensee
Compararon las representaciones de baja y de alta fidelidad, con sus ventajas y sus límites.
- 2002
Jesse James Garrett
Situó el diseño visual en el plano de superficie, encima del esqueleto donde se definen las pantallas.
- 2007
Bill Buxton
Distinguió el boceto, que sugiere y explora, del prototipo, que concreta y se pone a prueba.
Fuentes
Fuentes originales
- Rudd, J., Stern, K. y Isensee, S. (1996). Low vs. high-fidelity prototyping debate. interactions, 3(1), 76–85.
- Garrett, J. J. (2002). The elements of user experience: User-centered design for the web. New Riders.
- Buxton, B. (2007). Sketching user experiences: Getting the design right and the right design. Morgan Kaufmann.
Última revisión: