Mockup, la herramienta que ayuda a vender tu proyecto

Para los diseñadores lo más importante es conseguir un producto de calidad que satisfaga las pretensiones de nuestro cliente y/o nuestro jefe, que hable de forma positiva de nosotros, de nuestro trabajo y que pueda ser incluido con orgullo en nuestro portfolio personal. Pero no podemos olvidar el componente comercial de todo diseñador. Tenemos que saber «vender» nuestro diseño y para ello, tenemos que envolverlo en un bonito packaging antes de presentarlo, puesto que en muchas ocasiones la presentación del proyecto es más importante que el proyecto en sí.

Este envoltorio, este packaging previo a la producción se llama mockup y es una poderosa herramienta tanto para el diseñador como para el cliente, ya que es una forma muy visual de ver el proyecto representado en un entorno realista.

Pero para entender qué es un mockup tenemos que ver las diferencias que tiene respecto a otros términos con los que suele confundirse como wireframe o prototipo.

Mockup, Wireframe y Prototipo.

Todos estos términos son complementarios y recomendables entre sí, sobre todo al hablar de un proyecto web o aplicación. Dependiendo de la fase temporal en la que estemos del proyecto entran en escena unos u otros. Por ejemplo, en una fase inicial lo ideal es utilizar el wireframe, después el mockup y terminar con el prototipo, si procede.

Wireframe, el esqueleto de nuestro diseño

El wireframe es una representación esquemática y conceptual del proyecto para visualizar los componentes del diseño. En él se definen por ejemplo, donde estarán los menús, el logo, los call to action principales, la jerarquía que tendrán los distintos grupos de contenido, etc… Suelen representarse en escala de grises con cajas, círculos, líneas, aspas, textos falsos… 

Una de las principales funciones del wireframe es ahorrar tiempo, dinero y buscar consenso por lo que debe ser rápido y sencillo de elaborar. Una vez aprobado el wireframe podemos seguir dándole forma al diseño en los siguientes pasos. El wireframe puede ser un elemento diseñado en baja fidelidad, bocetado a mano sobre un papel, una libreta o en un software de diseño gráfico; o en alta fidelidad, realizado con algún programa de diseño o con algún software freemium online como MockFlow, Mockplus o Axure entre otros.

Mockups, el packaging de tu diseño

El mockup es un paso más avanzado al wireframe y tiene como objetivo poner al cliente en un contexto realista. A diferencia del wireframe, ya trabaja sobre colores, textos, tipografías reales, sombras, etc… Los mockups existen tanto para proyectos web como para proyectos destinados a impresión, retail, etc… y podemos descargarlos y editarlos o trabajar con ellos online. Podríamos entender un mockup web como una representación de un diseño final «a pixel perfect» en un ecosistema real, ya puede ser un móvil, tablet, escritorio, etc. En definitiva el mockup es la parte visual que se acerca al resultado final del proyecto. Para la creación de mockups puedes utilizar cualquier programa de diseño gráfico, los más utilizados son (Sketch, Figma, Adobe XD, Photoshop). Además, hay múltiples páginas en internet donde poder descargarte los recursos y adaptarlos a tu diseño. En Freepik, por ejemplo, podrás encontrar infinidad de recursos tanto para tus proyectos web, aplicaciones, o diseño en móvil

Prototipo, un mockup con funcionalidades

Finalmente, el prototipo es el ejemplo más avanzado del diseño. Además de los colores, tipografías reales, iconos, incluye ciertas funcionalidades y comportamientos del mismo en un entorno de pruebas con el objetivo de testear y comunicar las interacciones de nuestro diseño. Además, nos aporta datos sobre la experiencia del usuario en la interacción entre los elementos, botones, enlaces… Algunos programas que nos ayudan con este tipo de herramientas son Axure o Adobe XD, con las que de forma sencilla puedes trabajar fácilmente la interacción.

En definitiva cada uno de estos productos tienen su función muy definida y son básicos en todo el proceso creativo. Tenemos múltiples herramientas para crearlos y solo tenemos que buscar aquella con la que nos sintamos más cómodos. Ahora lo único que falta es crearlos y… ¡vender nuestro producto!