Traducido al español mockup significa modelo o maqueta… ¿Cómo aplicar este concepto al diseño de páginas web? ¿En qué consiste esta herramienta y cómo puede facilitar el desarrollo de sites para internet? Aquí, las claves principales para entender de qué se habla al hacer referencia a mockup, tipos que se pueden encontrar y cómo se crean


El desarrollo y diseño de páginas web ha evolucionado a gran velocidad en los últimos años. Cada vez hay más estrategias y herramientas para agilizar el trabajo y una de las más utilizadas a día de hoy es la denominada mockup. ¿En qué consiste exactamente este concepto? Teniendo en cuenta que su traducción es algo así como prototipo o muestra, un modelo o maqueta, ya se puede uno imaginar qué es mockup…

Definición de mockup

Establecida las líneas anteriores, ¿cuál podría ser la definición más cercana a lo que es un mockup y cómo puede utilizarse en el campo del desarrollo web? Podría decirse que se trata de plantillas base que dan opción de personalización. Se podría cambiar el nombre de la empresa o del titular, el logo de la compañía, las imágenes, los textos, etc. Esto abre la puerta a personas que no son especialistas en programación para poder crear sites para navegar por internet. 

¿Cuándo son útiles estos prototipos o maquetas?

  • Presentar proyectos a clientes.
  • Mostrar a un equipo el producto-servicio en el que se está trabajando. 

Los mockup son al fin y al cabo montajes de imágenes y textos que, sobre una maqueta, permiten recrear propuestas que podrían pasar a convertirse en un proyecto en ejecución. Si bien antes se realizaban a mano, con dibujantes específicamente duchos en esta tarea, ahora se llevan a cabo con programas informáticos específicos. Es una herramienta con gran potencial que agiliza procesos en determinadas áreas de un negocio, especialmente en el campo del marketing y la comunicación.

MÁSTER EN UX Y CUSTOMER EXPERIENCE

Ha llegado el momento de decidir. Tu futuro, por primera vez, está en tus manos y tienes la oportunidad de formarte para ser quien quieras ser. 

¡Quiero saber más!

¿Para qué sirve un mockup?

La razón de ser del mockup pasa por dos ideas clave:

  • Agilizar el desarrollo de sites,
  • Conseguir diseños específicos sin necesidad de invertir demasiado tiempo en ello,

¿Cómo se llega a ello? A través del desarrollo de prototipos o maquetas que van detallando las características que se requieren para un proyecto concreto. 

Las funcionalidades del mockup son varias: 

  1. Permiten desarrollar ideas que se traducirán en diseños después. 
  2. Facilitan la programación de plantillas que pueden utilizarse como imagen y presentación de proyectos que se vayan a presentar. 
  3. Son soporte a modo de catálogo o escaparate para promocionar la marca y los productos-servicios de una compañía. 
  4. Facilitan el poder probar iniciativas que, a posteriori, deben materializarse en trabajos reales y funcionales.
Mockup

Tipos de mockup

Los usuarios encuentran diferentes tipos de mockup, de tal forma que pueden optar por aquel que les será más útil según sus objetivos o prioridades. 

Mockups para dispositivos

Representaciones gráficas de la pantalla de los dispositivos electrónicos que se suelen usar, desde un ordenador de sobremesa a un portátil, una tablet o un smartphone. Esto es útil cuando se diseñan páginas web responsive, que han de adecuarse bien a los formatos de esos aparatos. 

Se usan especialmente en el campo del marketing, cuando se ofrece diseñar y programar una aplicación o bien en casos de desarrollos web. 

Mockups de branding

Para marcas, es otra manera de ahorrar tiempo y trabajo. Se establece un prototipo de material corporativo, desde carpetas a bolígrafos, sobres, tarjetas de visita y todo tipo de merchandising que pudiera requerir una marca. Se va cambiando el logo, el nombre de la firma, la información que se incluye, etc. 

Los mockups de branding pueden ser también para diseños en tazas, en plazos, en gorras, carteras y todo tipo de objetos. Se trabaja así sobre la base de un prototipo que después se va customizando. 

Mockups de packaging

Similar al caso anterior… En esta propuesta se genera un diseño estándar para cajas, sobres, paquetes, bolsas de plástico, de papel, todo aquello que pudiera necesitar para envolver artículos. Es importante especialmente en el mundo del comercio electrónico, donde la imagen vende también y es importante estar a la altura de los competidores. 

Print mockups

En este caso va dirigido a esos productos que una empresa quiere comercializar que van impresos. Puede ser desde un catálogo de artículos o revistas corporativas hasta postales, pancartas, flyers y todo tipo de material que se imprimirá a posteriori. Se usarán programas de diseño y maquetación para dar forma. 

Mockups de productos

Representación digital lo más realista posible de productos concretos. Ejemplos son las camisetas a las que se ponen logos o eslóganes de compañías, cómo queda un logo en recipientes como tazas de café, yogures o cajas de regalo, por ejemplo. 

Mockup de redes sociales

En este caso se recrean perfiles en redes sociales ya personalizados con los contenidos de la marca en sí a la que se le va a proponer. La información que aparecería en la bio, tipo de contenidos que se van a lanzar, fotografías, logo… Todo ello en el mayor número de redes sociales posible para acercarse al máximo a las necesidades de una marca en concreto.

 

¿Cómo crear un mockup?

Para crear mockups se necesitan varias herramientas clave:

  1. Programas de diseño y maquetación, desde el célebre Photoshop a otros desarrollos online, como puede ser Canva. 
  2. Acceso a imágenes. Lo ideal es poder recurrir a bancos de fotos para usar instantáneas de todo tipo en función del proyecto que se quiere presentar, para desarrollar después. 
  3. Profesionales especializados en diseño y maquetación, con especial conocimiento del mundo web y de las redes sociales. 

Esta metodología es importante tenerla en cuenta especialmente en departamentos centrados en mejorar la experiencia del cliente. Al fin y al cabo se trata de saber cómo presentar los productos y servicios a la audiencia a la que se dirige la marca, de ahí que en el Máster en UX & Customer Experience de EAE Barcelona se incluyan referencias a este sistema de maquetas o prototipos. Quienes quieran conocer mejor qué opciones se encontrarán en propuestas formativas como esta pueden contactar con el equipo docente para saber al detalle qué encontrarán en la programación.

Ejemplos de mockup

¿En qué se traduce esta información relativa a la definición de mockup y los diferentes tipos de prototipos o maquetas que se encuentran en el mercado? Varias ideas a modo de ejemplos de mockup que se encuentran en el mercado: 

  • Vasos y bricks para patatas fritas en cadenas de comida rápida: sería un caso de mockups de packaging o de producto, ambas variantes se identificarán en esta situación. 
  • Camisetas con personajes de series de ficción de moda: esas empresas que comercializan t-shirts con frases míticas o incluso canciones de grandes grupos, que trabajan con una plantilla de base, que sería un mockup
  • Packaging con el que grupos tan conocidos como Inditex envían los pedidos online, desde los sobres que utilizan al papel seda que hay en el interior, la pegatina para sellar la compra, etc. Es otro caso claro de mockup.