A la hora de diseñar hay algunas herramientas que nos facilitan mucho el proceso creativo. Una de las más importantes es el mockup, que permite mostrar tanto el valor estético de un diseño como el funcional.
Es un recurso que facilita mucho la presentación inicial del proyecto a nuestro cliente, lo que le ayuda a visualizar el resultado final y solicitar algunos cambios si así lo desea.
En este artículo te voy a contar qué es un mockup y cómo hacer un mockup en formato digital para que conquistes a tu cliente, le des solución a sus necesidades y quede más contento que unas castañuelas.
¿Qué es un mockup?
Un mockup es un modelo o prototipo visual utilizado en diseño y desarrollo de productos para representar cómo se verá y funcionará un producto final, ya sea de una página web, una aplicación móvil, un producto físico.
En otras palabras, es un fotomontaje muy utilizado en el mundo del diseño web y el diseño gráfico para simular un proyecto real. La palabra ‘mockup’ en español quiere decir maqueta.
Los mockups pueden ser creados a mano o con herramientas digitales como software de diseño gráfico o prototipado.
Los diseñadores y desarrolladores pueden compartir los mockups con los clientes o compañeros del proyecto para recibir comentarios y ajustar el diseño antes de pasar a la fase de implementación.
¿Para qué sirve un Mockup?
Los mockups se crean con la finalidad de mostrar la distribución de los elementos de la interfaz, la jerarquía de la información y otros aspectos visuales del producto.
El objetivo de un mockup es mostrar cómo se verá y cómo funcionará el diseño final antes de que sea desarrollado.
Por tanto, el mockup sirve para reproducir cómo sería la realidad a una escala más pequeña y hacer modificaciones en esta maqueta para ver cómo quedaría.
En el ámbito online esto nos sirve a los diseñadores web y gráficos para mostrar al cliente cómo puede quedar el diseño de su proyecto, ya sean logotipos, tarjetas de visita, folletos o páginas web.
En resumen, el mockup sirve para:
Usos del mock up en el diseño web estratégico
Dadas sus numerosas ventajas, cada vez más se está extendiendo el uso del mockup para realizar estrategias de marketing digital y embudos de ventas.
Así el potencial suscriptor que llega a nuestra squeeze page ve un eBook con un estilo serio y profesional, que se ofrece como regalo a cambio de que se suscriba a nuestra lista. Este eBook también es conocido como lead magnet.
En esta imagen en miniatura es un mockup que simula el regalo que se va a llevar.
También es muy habitual crear mockups para redes sociales con el fin de conseguir una imagen profesional como marca y hacer llegar mediante esa publicación a un nuevo usuario, enlazando dicha publicación a nuestra página web.
Bien es sabido que una imagen vale más que mil palabras.
Por tanto, los usos de un mockup son los siguientes:
- Páginas web
- Logotipos
- LIbros y ebooks
- Embudos de venta
- Banners para web y redes sociales
- Aplicaciones multiplataforma
- Diseño de interiores
- Arquitectura
- Paisajismo
Y otros usos que responden a la necesidad de tener un boceto del diseño final.
¿QUIERES SABER QUÉ TIENEN EN COMÚN TODAS LAS MARCAS QUE TIENEN ÉXITO EN INTERNET?
Descarga GRATIS la guía «El secreto de las marcas que triunfan en internet» y descúbrelo
Cómo hacer un mockup en 7 pasos
Estos son los 7 pasos para crear un mockup:
1. Identifica el mensaje a transmitir
El primer paso es conocer qué quiere transmitir el cliente. No es lo mismo diseñar un logotipo para Nike que para Joma.
Conforme al mensaje a comunicar y al soporte (sitio web, aplicación móvil, producto físico), sabrás qué elementos deben estar presentes en el diseño.
2. Selecciona la herramienta más apropiada
Existen muchas herramientas digitales para diseñar. Algunas de las más populares son Adobe XD, Sketch, Figma, Adobe XD y Photoshop.
Escoge la que más te guste y con la que te sientas más cómodo.
3. Diseña la estructura del diseño
Empieza por crear un boceto básico de la estructura general del diseño. Considera la navegación, la ubicación de los elementos y las llamadas a la acción.
Muchas de estas herramientas tienen plantillas preestablecidas que puedes utilizar como punto de partida. Te pueden ser útiles para tomar ideas y ahorrar tiempo.
La estructura de un diseño es como el esqueleto del mismo. Debes diseñar la estructura de la página o la pantalla que estás creando, incluyendo los elementos básicos como los botones, los menús, los iconos y los campos de texto.
4. Agrega los elementos visuales
Añade elementos de diseño como texto, imágenes, iconos y otros elementos gráficos. Estos elementos pueden ayudar a visualizar mejor la interfaz.
Aquí entra en juego la identidad corporativa del cliente, que tiene su propia paleta de colores, tipografías e incluso iconos. Todo diseño debe ser coherente con la imagen de marca.
NOTA: aquí tienes un post sobre cómo elegir los colores corporativos.
5. Revisa el diseño
Una vez que hayas terminado de crear tu diseño, revísalo cuidadosamente para detectar posibles errores o áreas que necesiten mejoras.
Haz pequeños cambios en el diseño y compara las versiones. No te centres solo en la apariencia sino también en la funcionalidad.
Una vez que esté completo, es hora de elegir el mockup.
6. Descarga el mockup
Existen gran variedad de mockups en los que puedes insertar tu diseño. Los hay gratuitos y de pago. Elige uno y descárgalo.
La elección del mockup es importante, ya que es la previsualización que va a ver el cliente o potencial cliente.
7. Inserta el diseño en el mockup
Una vez descargado el mockup, ya solo queda insertar el diseño en él.
Por ejemplo, para una página web puedes descargar el típico mockup del MacBook e insertar en él ese diseño tan atractivo y funcional que has creado.
Recuerda que el mockup es una representación visual del diseño final, por lo que debe ser lo más detallado posible y representar con precisión cómo será el diseño final.
Cómo hacer un mockup en Photoshop
Si eres diseñador gráfico o simplemente tienes talento creativo, puedes crear tu propio mockup con Photoshop, el programa multiusos de Adobe.
Estos son los pasos para crear un mockup en Photoshop:
Herramientas para descargar mockups
En Internet se pueden descargar mockups gratis, mockups para logos, mockups de identidad corporativa, en definitiva, miles de mockups para todos los gustos y colores.
Aquí te dejamos 5 páginas para descargar mockups gratis:
Pero a veces merece mucho la pena gastarse 3€ y conseguir mockups premium o un buen mockup profesional para destacar tu imagen online.
Aquí te dejo varias webs para descargar mockups premium:
Hasta aquí has descubierto qué es un mockup, para qué sirve y dónde descargar mockups gratis. Si necesitas ayuda sobre este tema escríbenos en los comentarios e intentaremos resolver las dudas que te hayan podido quedar.
Si ves este post de utilidad nos harías un gran favor compartiéndolo en tus redes sociales, seguro que hay mucha gente como tú a la que le vendría bien esta información.
Si eres diseñador web o quieres serlo, apúntate ahora a la Escuela de Diseño web Estratégico.
