Los Mockups son prototipos que permiten a los diseñadores web mostrar al cliente cómo quedarán sus diseños tanto a nivel estético como para testear la experiencia de usuario de cualquier producto digital.
Típicamente los Mockups de alta fidelidad, o prototipos reflejan las opciones de diseño para los esquemas de color, los diseños, la tipografía, la iconografía, los visuales de navegación y la atmósfera general del producto. Además de reservar tiempo para responder a las importantes preguntas visuales, un mockup tiene otros beneficios:
Intuitivo para los interesados
Gracias a su mayor fidelidad, las maquetas requieren menos contexto que los documentos lo-fi como los wireframes. Los interesados pueden ver más fácilmente el producto final.
Perspectiva realista
Una cosa es que se tomen todas las decisiones visuales, pero otra es verlas todas trabajando juntas de una manera cercana a la real. Las maquetas pueden ayudar a revelar problemas que no son tan aparentes en el papel (por ejemplo, choques de colores, o delitos de menor cuantía que pasan desapercibidos).
Revisiones tempranas
Es más fácil hacer revisiones en un mockup que en las últimas etapas de codificación (siempre y cuando la maqueta misma no esté codificada).
En el proceso de diseño, las maquetas vienen al final de la fase de baja fidelidad y al principio de la fase de alta fidelidad. Esto podría significar diferentes cosas para diferentes métodos, por ejemplo, una maqueta podría ser hecha inmediatamente después de la estructura de alambre, o podría ser pospuesta hasta después de algunas pruebas de prototipos de lo-fi.
Tipos de Mockups
Podemos dividir las herramientas de maqueta en tres tipos diferentes – software de diseño gráfico, aplicaciones de maqueta y maquetas codificadas – cada una con sus propias ventajas y desventajas.
Software de diseño gráfico
Debido al énfasis en lo visual, algunos diseñadores prefieren construir su Mockup en el software de diseño gráfico con el que están más familiarizados. Software como Photoshop se construye para crear imágenes pixeladas.
El inconveniente es que estos programas no permiten añadir interacciones a las maquetas (por eso decidimos integrarlos con Photoshop y Sketch).
La otra desventaja es que necesitas saber cómo usar el software, lo cual suele ser complejo ya que está diseñado para una mayor manipulación visual que la simple creación de maquetas. A menos que tus maquetas requieran la mayor fidelidad posible, el software de diseño gráfico puede ser exagerado.
Aplicaciones de Mockups y wireframes
Las herramientas creadas específicamente para el diseño de productos digitales, como Adobe XD, Invision o Sketch, se basan en la experiencia existente con herramientas clásicas como Photoshop.