Un mockup o maqueta es un diseño digital de una web y / o aplicación. Las maquetas se utilizan en la fase de diseño inicial para visualizar ideas y conceptos en el contexto del diseño web e incluyen la estructura de navegación, el sitio y los elementos de diseño en detalle. Los mockups pueden ser plantillas producidas con programas de edición de imágenes sin funcionalidad o diseños que se crean con herramientas especiales de maquetas y donde los elementos de control ya están vinculados con funciones simples.

Comparación: mockup, wireframe, prototipo

Los términos mockup, wireframe y prototipo a menudo se consideran lo mismo en la práctica, sin embargo, en realidad son tres tipos diferentes de representaciones de diseño como parte de la creación rápida de prototipos y se utilizan en diferentes etapas del diseño antes de la programación real.

Un wireframe es la forma más simple de plantilla y no incluye ningún color, tipografía, imágenes o gráficos, a diferencia de una maqueta. Este primer diseño de boceto puede ser creado a mano o en el ordenador. La funcionalidad está completamente ausente en esta pantalla. Por lo tanto, los wireframe se consideran diseños de baja fidelidad. [1]

Las maquetas pueden construirse sobre cualquier estructura existente y seguir desarrollándola. Integrando color, tipografía, imágenes y gráficos, se acercan mucho al diseño final y ya lo representan. Por lo tanto, son preferibles a efectos de presentación.

Un mockup clásico es estático. Sin embargo, las modernas herramientas de maquetación permiten la integración de funciones simples como los enlaces, de modo que, dependiendo de la complejidad, pueden clasificarse como diseños de mediana a alta fidelidad y bordear los prototipos.

Se pueden utilizar maquetas complejas de varias partes como base para prototipos que, dependiendo de su estilo, también se pueden considerar diseños de mediana a alta fidelidad. A diferencia de la clásica maqueta estática, los prototipos son siempre interactivos y contienen la mayoría de las funciones de la página web o aplicación planificada.

Usos y beneficios de los mockups

Las maquetas se utilizan en la fase inicial de desarrollo de webs y aplicaciones para la presentación y el control de calidad. Sirven para coordinar con el cliente las ideas y los requisitos de la interfaz de usuario con respecto a las funciones básicas, la navegación, la arquitectura de contenidos y el diseño. Quién obtiene el contrato final a menudo se decide sobre la base del mockup.

Las maquetas se utilizan para pruebas de usabilidad sin un gran esfuerzo de programación previo. De este modo, cualquier problema se detecta antes de crear el prototipo y se reduce el riesgo de que un concepto tenga que ser completamente revisado a mitad de la fase de desarrollo. En general, los mockups pueden contribuir a ahorrar tiempo y dinero en un proyecto online.

Ejemplos

Fácil edición de imágenes y software de presentación como PowerPoint se utiliza a veces para los mockups, pero en comparación con las herramientas de maquetas son bastante lentos. Las herramientas especializadas proporcionan elementos prefabricados e incluso la posibilidad de probar procesos de interacción simples.

Ejemplos de herramientas de mockups para sitios web:

• Balsamiq
• Auxure
• Pencil

Ejemplos de herramientas de simulación para aplicaciones:

• Pop
• InstaMockup
• FrameAPP

Ventajas de la usabilidad

Dado que las maquetas son muy adecuadas para las pruebas de usabilidad debido a su nivel de detalle medio-alto, pueden proporcionar información importante sobre la experiencia del usuario y ayudar a optimizar el diseño de la experiencia de usuario en una fase temprana de la fase de diseño, especialmente en los campos de la estética y la facilidad de uso.

Referencias

[1]