El término mockup se utiliza en un gran número de industrias que van desde el marketing hasta el diseño web. Esto sucede así por una buena razón: el componente visual es fundamental en el proceso creativo, pues permite comunicar conceptos y obtener una buena retroalimentación para desarrollar o replantear una idea.
Si quieres saber más sobre de qué se trata este recurso y cuáles son sus aplicaciones, aquí te mostramos sus elementos clave, además de ejemplos exitosos para que puedas implementarlo cuanto antes a tu línea de trabajo.
¿Qué es un mockup?
Un mockup es un prototipo (ya sea de una página web, diseño o producto) que muestra cómo funcionaría un objeto en el entorno real. Sobre todo, se emplea para mostrar una idea a los prospectos, clientes y compañeros de trabajo sin invertir mucho tiempo, dinero y esfuerzos de diseño.
Para qué sirve un mockup
En el pasado, el papel y lápiz o incluso las maquetas eran las únicas herramientas disponibles para ilustrar conceptos o ideas. Este proceso tradicional era muy tardado, debido a que requería que los diseñadores invirtieran una gran cantidad de tiempo y esfuerzo. Hoy, gracias a la tecnología, existen generadores de mockups o programas de diseño que permiten elaborar prototipos de manera rápida y que, además, se adaptan a cualquier necesidad.
En especial, este recurso es útil en el diseño o aplicaciones web, pues contienen se componen de elementos básicos como tipografía, colores, imágenes, botones y otros más, aunque no cumplan con ninguna función aún.
Por ejemplo, una excelente forma de trabajar con este recurso y ahorrar tiempo es emplearlo en conjunto con otras herramientas digitales, como las creadas para el diseño de landing page automatizado, puesto que esto se traduce en más oportunidades de negocio y ventas. En tan solo unos minutos, obtendrás una página profesional sin ayuda de desarrolladores o especialistas en esta área.
Qué debe incluir un mockup
Para que tu prototipo consiga su objetivo, el cual es crear un concepto tangible de tu diseño, es necesario que contemple los siguientes elementos centrales.
Producto
Antes de comenzar, es importante que tengas una idea general del producto. Esto te ayudará a visualizar el contexto donde tu proyecto podría vivir en el futuro. La coherencia es algo que muchas veces se pasa por alto, pero es un factor que suma al mensaje que quieres comunicar a tu audiencia y que sirve de añadir los elementos correctos que resuenen en ella.
Calidad
Es sencillo pensar que montar un mockup es algo que no requiere mucho esfuerzo. Aunque esto es cierto, es necesario que no se descuide su calidad: cuidar la resolución de la imagen o logotipo que utilizarás, usar una tipografía legible o seleccionar colores que contrasten para resaltarlo. Estos son detalles que parecen pequeños, pero que destacarán todas las cualidades de tu idea.
Contenido
Sabemos que este recurso es el punto de inicio para algo más grande, sin embargo, esto no significa que debas olvidarte del contenido. Si tu prototipo es para una marca, revista, brochure o cualquier otro producto, es fundamental que su texto se acerque lo mejor posible a la versión final. Otro punto relevante es emplear imágenes de buena calidad para redondearlo.
Ejemplos de mockups exitosos
Para ilustrar estos puntos esenciales, aquí te mostramos ejemplos de prototipos que pueden inspirarte para tus diseños.
- Curie Co : Curie Co es una empresa de cuidado personal que emplea ingredientes sustentables libres de conservadores. La agencia de branding mexicana, encargada del diseño de marca, Anagrama, elaboró este esbozo de cómo se vería el sitio web de la organización en un dispositivo móvil.
- Kura : También las tarjetas de presentación son un gran ejemplo de mockups , porque su diseño puede dar una buena idea al cliente sobre cómo se verán las aplicaciones de la agencia e incluso la textura del material de los productos. En este caso, el estudio Futura diseñó el siguiente prototipo para el espacio de pilates, yoga y bienestar Kura.
- Kalw : No hay nada como ver una marca viviendo en el entorno real. Pero antes de que ocurra, los prototipos nos dan una idea de cómo se vería. El estudio Collins de San Francisco hizo esto para la estación de radio Kalw, con el que mostró cómo se vería su publicidad en distintos medios para una zona urbana.
- Channel 5 : El canal británico de entretenimiento Channel 5 comisionó a la agencia Pentagram una campaña para que su audiencia conociera su programación y así crear conciencia de marca. Por este motivo, elaboraron imágenes para mostrar cómo vivirían las piezas publicitarias en las paradas de autobús de una ciudad.
- Instacart : Esta empresa permite a sus usuarios realizar sus compras de despensa mediante una aplicación y recibir su pedido el mismo día. La agencia Wolff Olins, encargada de elaborar su rediseño de identidad, elaboró este prototipo para mostrar la presencia digital de la organización.
- Walmart : La cadena de tiendas buscaba la forma de transformar la experiencia de compra de sus usuarios. Por lo que la agencia Landor & Fitch le propuso hacerlo mediante la campaña Swipe up (deslice hacia arriba) donde los celulares cambian la forma de visitar la tienda. Para ejemplificarla, sus prototipos fueron clave.
Los mockups son herramientas muy útiles en los procesos creativos y de diseño web, puesto que son el punto de inicio para entablar conversaciones con clientes, equipo y hasta consumidores. Recuerda utilizarlos para que tu trabajo sea más vistoso y efectivo.
¿Qué es el mockup de un producto?
Un mockup de producto es un diseño digital realista de un objeto mostrado de forma aislada sobre fondo neutro o en un escenario.
Son modelos tridimensionales muy utilizados en la fase de propuesta y diseño de un producto, cuando aún no ha pasado a manufactura. También son empleados para mostrar productos en materiales de marketing, en canales de venta online o en catálogos digitales, como alternativa a organizar una sesión fotográfica con los productos reales.
La tecnología para crear mockups tridimensionales ha avanzado hasta el punto de ser cada vez más accesible y fácil de emplear. Ya no es tan costoso crear un diseño digital de un producto, y muchos pequeños negocios recurren a este formato para ahorrar sesiones fotográficas.
Grandes marcas como IKEA también han popularizado el uso de mockups para generar imágenes de estancias y muebles sin tener que invertir en montaje, equipo y espacio para las imágenes de catálogo.
Mockup y prototipo: ¿son lo mismo?
Un mockup es una recreación digital de un producto bien porque ya existe y quiere emplearse su imagen digitalmente o bien porque aún no ha entrado en fase de producción y la marca desea mostrar cómo será el resultado final.
Un prototipo es una prueba física del producto, aunque tampoco tiene por qué coincidir con cómo será el producto final. Los prototipos de producto se emplean para realizar primeras muestras y pruebas con usuarios, y analizar si es necesario realizar cambios antes del lanzamiento definitivo.
Ventajas e inconvenientes de un mockup vs. fotografía de producto
Los mockups de producto no sirven para todas las marcas ni circunstancias.
Sólo es recomendable emplear mockups en fases preliminares de lanzamiento de un producto o si los costes del equipo técnico realmente compensan los de una sesión fotográfica con la gama de productos.
Eso dependerá totalmente del tipo de producto y fotografías. Preparar escenarios donde se integren los productos, como en un catálogo de IKEA, es muy costoso desde un punto de vista fotográfico.
Por eso algunos sectores como fabricantes de muebles, ventanas, suelos, revestimientos cerámicos, instalaciones de baño y cocina o electrodomésticos y automoción tienen una gran ventaja en los mockups. Estas industrias pueden conseguir recreaciones muy realistas ahorrando tiempo y equipo, pues es más sencillo crear una escena digital que una real en esos casos.
Sin embargo, en productos más manejables y moda los mockups llegan a resultar más costosos que una sesión fotográfica. Según si la gama de productos es muy amplia y si la marca cuenta con presupuesto para modelos y fotógrafo profesional, es mejor evaluar qué método conviene más.
En cuanto a la calidad final de las imágenes, ya es posible conseguir un nivel fotorrealista en mockups de producto. Por supuesto, eso implica contar con buenos técnicos y programas, que eviten el temido efecto de ‘montaje chapuza’.
¿Cómo hacer un mockup de producto?
Como hemos indicado ahora mismo, todo depende del nivel de habilidad que tengas.
Crear un buen mockup de producto es posible con un ordenador y un programa de Adobe, pero cómo hacer un mockup con Photoshop no es un tutorial que se aprenda en un día.
Para crear un mockup de producto hay que partir de ilustraciones digitales que recreen tridimensionalidad. Puedes crear las tuyas propias, si cuentas con la suficiente preparación técnica, o descargar objetos inteligentes (creados con imágenes en Photoshop o Illustrator) de alguna biblioteca de recursos gratis o de pago.
Entonces ya podrás importar los modelos descargados a un programa como Adobe Dimension para configurar tus figuras tridimensionales, con fondo transparente o realista, ajustar la perspectiva, el color, la forma y la iluminación, y renderizar la imagen final.
Ten en cuenta que sólo te servirán estos mockups descargables si coinciden con la forma y formato de tu producto, algo más sencillo cuando se trata de cajas, tarros, botes o botellas de forma estándar.
Las mejores páginas donde descargar mockups gratis
- MockupFree : Entre las páginas para descargar un mockup gratis, MockupFree ofrece un catálogo de objetos inteligentes en alta resolución y fotorrealistas de varias categorías clásicas en retail: alimentación, cosmética, papelería, automoción, tecnología, y también pantallas de dispositivos, posters, packaging y logos para materiales promocionales o web.
- Mockupworld : En Mockupworld también puedes encontrar mockup gratis de productos, aunque en un rango un poco más limitado. Sin embargo, incluye algunas sorpresas como cobertor para coches, marco para láminas en pared… y mascarilla y botellita de desinfectante.
- Graphic Pear : Graphic Pear es una fantástica web para encontrar mockups gratis y premium. En cada archivo destacan una completa lista de características con todas las posibilidades de personalización de cada modelo (sombras, brillos, luz, capas, fondos, filtros…).
- Mr. Mockup : ¿A quién no le gusta encontrar en una web la palabra freebie? En Mr. Mockup se publican de forma regular mockups gratuitos, desde objetos de papelería útiles para campañas de marketing hasta productos como botellas de champán.
- Anthony Boyd : Si buscas algo más profesional que el típico mockup de stock, Anthony Boyd comparte en su web modelos propios, tanto de productos individuales como escenarios. El único inconveniente es que la licencia de uso obliga a que en tus creaciones incluyas enlace a la página original del mockup .
- GraphicBurger : GraphicBurger también reúne diversas entradas con mockups gratis en formato PSD, aunque la presentación parece menos diversa y detallada que otras webs anteriores.
¿Dónde puedo crear mockups?
Abre Canva en la aplicación o en tu navegador web preferido. Haz clic en Apps, luego elige Mockups en el panel lateral de la página principal para acceder a nuestro creador de mockups.
Si quieres conocer otros artículos parecidos a Mockups: la herramienta esencial para diseñadores y mercadólogos puedes visitar la categoría Cuero.