¿Qué es el mockup?

Un mockup no é otra cosa que un modelo (a escala o a tamaño natural) de un proyecto en desarrollo.

É un material expositivo de un sitio web, de una gráfica, de un packaging o de un nuevo concepto para una campaña publicitaria.

En resumen, se trata de la réplica exacta del proyecto terminado con detalles y adornos destinados a enfatizar el resultado final.

É muy utilizado en la comunicación de marca, tanto online como offline.

Diferencias entre mockup, wireframe y prototipo

El mockup è, por lo tanto, una especie de modelo que describe cómo será el producto terminado.

En el mundo web, se utiliza el término digital mockup para describir ese particular mockup que se centra en la gráfica de un sitio web, de una landing page o de una aplicación.

En este caso el digital mockup è, básicamente, el modelo de un sitio web reproducido en diferentes dispositivos como smartphones, tablets y dispositivos portátiles, o la gráfica completa de una aplicación.

Quien hace mockup, é definido mockup artist.

Aun antes del mockup, a menudo no siempre, se utiliza el wireframe.

También este tipo de modelo é muy utilizado sobre todo en lo digital y é un esquema visual en fase embrionaria que permite tener una idea general de cómo podría ser el producto final.

La evolución del clásico boceto a lápiz, é muy utilizado para entender cómo llenar los espacios y desarrollar una estructura básica.

Después del wireframe, en la fase de diseño, viene el mockup con una realización completa y meticulosa del proyecto.

En algunos casos é necesario también el uso de un prototipo. En algunos sectores, en la mayoría industriales, no basta con una representación gráfica del producto sino que también se necesita un borrador práctico que examine y pruebe las funcionalidades concretas del proyecto: esto é el prototipo.

Cómo hacer un mockup: herramientas útiles gratis

Partiendo de la idea de que un buen mockup puede ser realizado en Illustrator o en Photoshop y que para los proyectos más importantes la suite Adobe pone a disposición Adobe Comp y, para los wireframes, Adobe XD, existen muchas excelentes herramientas en línea, a menudo gratis (de pago solo si se quieren desbloquear algunas funciones) realmente útiles y completas para realizar un buen mockup: 

• Moqups: un recurso completo, perfecto para el mockup digital como páginas de aterrizaje y aplicaciones.
• Invision: uno de los más famosos recursos web para realizar un mockup profesional y de seguro éxito. Hay una versión free con limitaciones y una versión completa a buenos precios.
• Marvel: con este programa se pueden realizar híbridos entre mockups y prototipos, de hecho Marvel permite también la realización de las transiciones entre pestaña y pestaña.
• Wireframe.cc: este recurso é excelente para crear wireframes profesionales. É una especie de pizarra interactiva evolucionada para el desarrollo de este tipo de interfaz. 

Resumiendo, el mockup è la réplica del proyecto final sin sus funciones interactivas. Tiene a su favor los colores, la gráfica y la presentación final y è extremadamente importante centrarse en los detalles del proyecto que realmente pueden hacer la diferencia entre un mockup y otro.