En el proceso creativo de lo que imagina un diseñador, existe la posibilidad de mostrar al mundo sus ideas y lo que hace con ellas desde las sugerencias de los clientes. Esa posibilidad se llama mockup y es una herramienta con la cual puedes digitalizar lo que creas, para luego crear lo que crees… 

El mock up tiene como finalidad validar la idea del diseño aproximándose a lo que el cliente desea, antes de decidir el producto final. 

En él se plasma, se revisa, se ajusta y se perfecciona de forma digital y totalmente visual lo que se quiere. Participa de forma activa el diseñador (creativo), interviene el cliente (sugerencias) y colabora el equipo creativo (mejoras). 

El mock up es una maravilla tecnológica que ha llegado para dar un cambio diametral a la forma en la que trabajan los diseñadores. 

El diseñador mostraba un esbozo al cliente de lo que éste pedía (hecho a mano con papel y lápiz) o construía una maqueta con una cantidad de materiales costosos… ni hablar del tiempo que dedicaba a su construcción.

Con esta herramienta que cuentan los programas de diseño, se puede crear el prototipo del producto o diseño web, con todos los elementos incluidos, para que el cliente experimente y valide el proyecto final. 

Puedes utilizar el mock up en las diferentes áreas del diseño, tanto el gráfico, como el diseño web o el diseño de modas o textil. 

¿Cómo lo puedes utilizar?... Pues, acompáñanos y averígualo.  

¿Qué es un mock up?

El mock up es un bosquejo semejante al prototipo del diseño que explica el funcionamiento del producto presentado. Este puede hacerse de una página web, de un producto o simplemente de un diseño. 

El mock up se utiliza para mostrarle al cliente o prospectos, el modelo con todos sus elementos reales tales como la imagen, los colores y la tipografía, sin tener que hacer la inversión de tiempo y dinero para elaborar una maqueta. 

El cliente puede apreciar a través del mock up cómo será el producto, la aplicación o el sitio web, antes de ser visto por los usuarios. Aunque los componentes visuales no son interactivos, son lo más parecido a la experiencia que tendrá el usuario en la realidad. 

Para que el cliente o prospecto comprenda todas las etapas del diseño y las diferencias que existen entre estas, es recomendable utilizar el mock up como herramienta de comunicación visual. 

Importancia del mock up en el diseño

Anteriormente para mostrar tus diseños a los clientes o prospectos debías recurrir al uso de herramientas como papel y lápiz o en el mejor de los casos, una maqueta. 

Hoy, gracias a la tecnología digital, todo ese proceso se ha transformado (para bien de todos), permitiendo que los diseñadores ahorren una gran cantidad de tiempo, esfuerzo y dinero. 

Existen diferentes programas de diseño con los que puedes generar tus mock ups y elaborar el prototipo de tu producto de una manera más rápida y sencilla. Además estos programas son muy amigables y de fácil uso.

Con la herramienta de mock up puedes transmitir tus ideas conceptuales a los interesados, lo que permite recibir su opinión o mejor aún, su colaboración. 

Esto es porque en el momento que el diseño es visto de una manera más concreta, se crean debates en torno a este lo que al final representa una toma de decisiones más efectiva. 

Otro punto de importancia es el hecho de que, según los resultados de las pruebas que realizan los usuarios, los diseñadores pueden mejorar sus ideas hasta llegar a perfeccionar el diseño. 

¿Para qué sirve un mock up?

Como lo hemos venido resaltando, el mock up sirve como soporte visual en la comunicación de las ideas de un diseño. A continuación te diremos los usos más comunes y resaltantes de esta herramienta: 

1. Ayuda a mostrar la realidad y a comprenderla

Esto es porque no todos tienen la misma percepción de las cosas y con el uso del mock up podrás tener la misma perspectiva que tus clientes o prospectos. 

Los clientes se hacen una idea de lo que obtendrán y a la vez sabrán qué funciona y qué no desde el principio. Además “la mirada” de tus compañeros de equipo, te dará los aportes necesarios para la obtención de los resultados que el cliente espera.

2. Agiliza la toma de decisiones

Con el apoyo del mock up es mucho más sencillo discutir las ideas, lo que marca la dirección que debe tomar el proyecto para obtener resultados. Según lo que se aproxima más a los deseos del cliente, se toman las decisiones pertinentes. 

3. Reduce el tiempo del proyecto y los costes

Con la visualización previa del mock up puedes hacer la revisión y la corrección oportuna del diseño, lo que obviamente se traduce en menor tiempo invertido en un solo proyecto. 

Aunado a eso no existe el riesgo de que el resultado final no sea satisfactorio para el cliente ya que ha estado informado y con soporte visual, de los avances del producto.

¿Cuándo crear un mock up?

En el proceso de diseño es fundamental saber en qué momento se debe hacer un mock up. Normalmente se hace luego de las etapas iniciales de ideación, investigación y esquematización puesto que es en estas cuando se define la estructura y la funcionalidad del diseño.

Un diseñador puede enfocarse en realizar un mock up con abundantes detalles visuales donde se exponga la profundidad y la vivacidad del diseño. Con este, además de transmitir sus ideas creativas puede solicitar la retroalimentación de los interesados para seguir en su proceso.  

Esto quiere decir que el mock up permite recoger las impresiones que causa el diseño dando la oportunidad a los diseñadores de seleccionar las opiniones o comentarios de su equipo, del cliente y de los usuarios, para enriquecer su proyecto.

Tipos de mock up

Existe una gran variedad de tipos de mock up en el diseño, pero nosotros en esta oportunidad sólo destacaremos dos de ellos, como los más importantes: 

1. Mock up para diseño web

En el mock up para un diseño web se diferencian varias etapas entre ellas tenemos el wireframe en el cual se establece cómo se hará la distribución de la información, normalmente solo incluye una tipografía sencilla y se emplean bloques que muestran la carga visual de los elementos del diseño. Es de baja fidelidad.

Otra etapa es la maquetación de todos los elementos que definen el diseño (imágenes, tipografía, íconos, entre otros). Esta maquetación no es interactiva y según su complejidad, se verá de media o alta fidelidad.

Por último, se encuentran los prototipos (maquetas algo más complejas), en esta etapa sí se incluyen las interacciones y animaciones que permiten a los usuarios experimentar de la forma más cercana posible al resultado final de la web.

Estas tres etapas de diseño web, se realizan antes de la programación, lo que facilita los posibles cambios o las correcciones que amerite el diseño. También facilitan la comunicación de las ideas al cliente lo que previene las sorpresas o disgustos.

2. Mock up para diseño gráfico

Este es un proceso mucho más sencillo que el anterior, donde la composición inicia con un fotomontaje de la idea del diseñador, tratando de mantener los parámetros solicitados por el cliente y llevando el diseño de una forma realista. 

Lo más cercano posible a las exigencias del prospecto hasta mostrar un aproximado de cómo quedará el proyecto final. 

Elementos de un mock up

El prototipo creado es un concepto aproximado y palpable de tu diseño y para que funcione como herramienta visual, el mock up debe contar con los siguientes elementos: 

1. Producto

Es primordial tener bien definida la idea del producto para que puedas contextualizar tu diseño. La idea debe ser congruente con el producto y el mensaje que pretendas comunicar al público, además será tu guía para incluir los componentes como imágenes, íconos, tipografía, entre otras cosas. 

2. Calidad

Aunque el montaje del mock up no requiere de mayor inversión de tiempo o dinero, no significa que deba hacerse con ligereza o descuidando los detalles. 

Estos detalles redundan en la calidad, por lo tanto debes tener especial atención a la resolución de las imágenes, a la tipografía y a los colores; si estos no contrastan, el diseño no será legible. 

Si estas pequeñeces no se atienden, al final tu idea no se apreciará.  

3. Contenido

En especial cuando se trata de una marca, revista, folleto u otro producto que amerite texto. El contenido debe ser lo más aproximado posible al producto final 

¿Cómo hacer un mock up?

Llegó el momento de indicar el paso a paso para hacer el mock up. Comenzamos por:

1. Define el mensaje que quieres transmitir

Debes saber qué quiere transmitir el cliente e identificar dónde lo quiere transmitir (sitio web, aplicación móvil, en físico). Esto te servirá para determinar los elementos que debes incluir en el diseño. 

2. Selecciona una herramienta digital

Según sea tu destreza en el manejo de las herramientas de diseño, escoge la que más se parezca a tus métodos y con la cual trabajes de forma cómoda. Entre las más populares tenemos Sketch, Figma, PhotoShop y Adobe XD.

3. Estructura tu diseño

Comienza esbozando la ubicación de los elementos, los íconos, los botones de CTA, menú, campos de texto y la navegación en general. La herramienta seleccionada siempre tiene una serie de plantillas preestablecidas con las cuales puedes ahorrar tiempo. La estructura del diseño parte de la disposición de la página. 

4. Agrega elementos visuales

Con elementos de diseño tales como texto, imágenes, íconos entre otros, tendrás una mejor visualización de la interfaz. En este punto debes tomar en cuenta la identidad corporativa de la marca porque por lo general ya poseen una paleta de colores definida, tipografía e íconos.

5. Revisa cuidadosamente el diseño

Esto con la finalidad de detectar posibles errores y corregirlos a tiempo. Incluso, puedes realizar cambios específicos y comparar su estética y su funcionalidad. Al final escoge el que mejor funciona para ti. 

6. Descarga el mock up

Existen diferentes mock ups a los cuales puedes agregar tu diseño, tanto de paga como gratuitos. Recuerda que ese mock up que elijas, será vista por el cliente. 

7. Inserta el diseño

Una vez descargado el mock up, puedes insertar tu diseño en él. No olvides que el mock up es la pre visualización del producto, lo que implica que debes cuidar mucho de los detalles para que sea justo y preciso el diseño final. 

Para cerrar…

En esta parte del post, nos despedimos dejándote una lista de herramientas con las cuales podrás descargar mock ups de forma gratuita. A continuación las cinco páginas más populares: 

• Freepik.

• Freedesignresources.

• Behance.

• Graphicburger.

• MockupWorld.

Y si buscas un mock up más profesional aun, prueba estos sitios de descarga premium. Su coste no es tan elevado y muy bien vale la pena la inversión: 

• Pixeden.

• Graficzny.

• Creative Market.

• Graphicriver.

• Stockingdesign. 

Por ahora, te acompañamos hasta aquí… 

Esperamos que el tema de hoy te sea de mucha ayuda.