¿Qué son los mockups?
Los mockups muestran una versión bastante detallada del diseño final de un producto digital. Es como si fuera la piel de una interfaz gráfica. En este artículo explico qué es, cómo y cuándo debemos hacer un mockup.
Los mockups son una representación de fidelidad media/alta de la apariencia del producto final y completan los detalles visuales (como colores, tipografía, etc.) de los wireframes. Un mockup podría considerarse un borrador de diseño visual de alto detalle y su principal razón de ser es básicamente estética. Al mirar un mockup, debes tener una buena idea de cómo se verá el producto final y una idea aproximada de cómo podría funcionar (aunque no sea interactiva). Estos son los objetivos principales
- Proporcionar una representación del producto de media a alta fidelidad.
- Presentar las funcionalidades básicas del producto.
- Mostrar los detalles visuales del producto como tipografía, colores, fotos, iconos, etc.
De wireframe a mockup
Los mockups tienen que ver con el aspecto y la sensación definida en la fase de wireframe. Una vez diseñado y aprobado el wireframe de un producto, el siguiente paso es determinar la apariencia a través del color y los gráficos. El mockup se pueden construir sobre el propio wireframe y ajustar el diseño ligeramente, pero hay que permanecer siempre dentro de la guía general del wireframe.
Ten en cuenta que los wireframes sientan las bases y los mockups agregan riqueza visual. El mockup materializa el propósito visual de los wireframe, y por ello los mockups tiene una ventaja adicional: con sus imágenes de alto nivel, los mockups sos más impresionante para las partes interesadas e inversores y, por lo tanto, mejor para generar interés.
La piel de nuestro producto
Cuando presenta un diseño a un cliente, debes tener siempre un mockup lo más parecido al producto final. Esto requiere colocar contenido e imágenes casi reales en tu diseño. Este es un paso que puede llevar tiempo, pero te ayudará a visualizar el diseño como si ya estuviera desarrollado, y te servirá para solucionar cualquier problema que pueda surgir de los elementos de diseño.
Un contexto más amplio de un mockup
En términos generales, un mockup es un modelo a escala de un producto utilizado principalmente para demostrar y probar un diseño. Para el diseño de interfaz, el objetivo final es el mismo, pero la maqueta no está «escalada», ya que debe verse lo más exacto posible.
Un mockup no es un prototipo
Es importante distinguir un mockup de un prototipo. Un prototipo está destinado a funcionar, a tener interacción, aunque sea parcialmente. Los mockups, por otro lado, no funcionan. Consisten en representaciones de pantallas estáticas, que solo «se parecen» a la interfaz de usuario real.
Si bien el wireframe está visualmente limitado, el mockup tiene una apariencia cercana a la versión final, aunque carece de la funcionalidad para avanzar en la fase de creación de prototipos. De esta manera, el mockup es, en esencia, el puente entre el wireframe y el prototipo.
