Conoce que son los mockups, para que se utilizan y varios ejemplos de este práctico recurso

Los MockUps son una maqueta, una plantilla un modelo utilizado para la presentación de nuestro diseño de manera realista (en la mayoría de los casos).

Ok, aquí la explicación técnica, casi de diccionario, pero vamos a entender un poco más sobre este maravilloso recurso.



Supongamos que estuvimos diseñando un sitio web y queremos presentárselo a nuestros clientes, normalmente presentaríamos un JPG donde se visualiza nuestro diseño, pero el cliente quiere saber más, y entonces surgen preguntas como estas:

Cómo se ve en la pantalla?

Y este borde se estira o siempre queda así?

En una tablet o iPad cómo se visualizaría? y en un teléfono?

Es alineada a la izquierda mi web? o está centrada?

En lugar de dar explicaciones para que el cliente entienda o imagine la visualización de sus preguntas, lo que hacemos es encontrar un MockUp que nos permita presentar nuestro diseño en las distintas pantallas con un alto grado de realismo.

Veamos un ejemplo:

Vamos a imaginarnos que presentaríamos la vieja web de jumabu a un cliente.

Para que nuestro cliente vea un poco más realizado nuestro diseño lo que hacemos es descargarnos un lindo mockup para presentar diseños webs, aquí les dejo el enlace de uno de mis preferidos: http://wp.me/p211Nr-cNj
y comenzamos a aplicar nuestro diseño.
El mockup que descargamos es un PSD, por lo tanto lo podremos editar con Photoshop.

Veamos el primer paso:
Abrimos el PSD que descargamos…

Luego lo que haremos es copiar la imagen que tenemos ya diseñada de nuestro sitio web y la fotomontamos sobre el mockup…
Primero la pegamos sobre el mockup y luego con la herramienta Edición > Transformación Libre (para Mac manzanita + T, para Windows Shift + T)
acomodamos nuestro diseño para que coincida con la perspectiva del mockup.

tocamos un poco y listo! nuestra primer vista del mockup en un ordenador de mesa…

También los mockups pueden editarse trabajando con objetos inteligentes, aquí te dejo un post para que veas como editarlos: Como editar un mockup usando objetos inteligentes

Ahora vamos a hacer lo mismo con nuestros diseños de Ipad o tablets y de teléfonos!

Mockup para Ipad o Tablets:

Mockup para Teléfonos:

Este mismo ejemplo se aplica a los diferentes diseños que realicemos.
Muchas veces encontramos mockups de botellas de vino para que podamos presentar nuestras etiquetas de botellas, o bien nos toca diseñar una tarjeta personal y queremos presentarla de manera más realista, entonces descargamos un mockup como este: http://wp.me/p211Nr-cLI

Recuerden, los mockups nos permiten presentar nuestros diseños de manera más realista.
Cuanto más realista sea el mockup, mejor quedará presentado nuestro diseño.
Los mockups pueden ser archivos para editar con Photoshop, Illustrator o Corel, In Design, etc, etc…

Espero que este mini tutorial les haya servido y que de ahora en más cuando vean un mockup sepan a  que se hace referencia.
Saludos y si quieren dejar su comentario para evaluar nuestra explicación… Bienvenido Sea!