A grandes rasgos, podemos definir los mockups como contextos virtuales que imitan un resultado real de un proyecto o trabajo realizado. Muchos clientes quieren ver como queda un logotipo en una prenda de vestir, en un producto promocional, en una papelería o cómo se mostraría en formato digital con un teléfono o pantalla de cualquier dispositivo. Existen muchos sitios para descargar mockups, o maquetas virtuales, que permiten ahorrar mucho tiempo y a dar vida a nuestras ideas.
Ventajas de utilizar mockups o maquetas preconfiguradas
Como diseñador de la vieja escuela, siempre me he topado con clientes indecisos que no terminaban de ver el resultado de un trabajo hasta que no lo presentabas en formato físico. Cuando era una impresión normal de un folleto o cartel, era fácil realizar una impresión. La cosa se complicana cuando ese cartel lo querían ver de muestra en una marquesina, o un logo en un rótulo luminoso de una tienda.
Al tiempo dedicado en realizar el trabajo había que sumarle el que se perdía realizando la simulación, que muchas veces no estaba presupuestado y suponía también una pérdida de dinero.
La utilización de los mockups no es algo nuevo, pero sí la facilidad que se tiene para acceder a este tipo de recurso. La gran demanda de estos contenidos ha permitido la aparición de muchos sitios para descargar mockups, tanto gratuitos como de pago, pero con calidades y usos muy variados.
En esta lista encontrará algunos de los sitios donde descargar mockups a los que yo suelo acudir cuando los necesito, no sólo para presentar un trabajo a un cliente, también para crear imágenes que luego utilizo en mi web para determinadas secciones, o en sitios alternativos que administro.
Cómo su usa un mockup
Aunque pueda existir algún método alternativo, como las simulaciones online, lo habitual es usar Photoshop, ya que las diseños de los mockups están creados en capas que necesitamos editar para incrustar nuestro propia imagen, y el formato más utilizado para gestionar estos archivos descargables es "*.PSD".
He mencionado Photoshop porque es la herramienta de edición de imágenes que cualquier profesional del sector utiliza para trabajar, pero para modificar un mockup no es necesario disponer de este software, hay alternativas grtuitas totlamente funcionales para desarrollar esta labor, entre los que destaco Photopea.
Aunque usaré Photoshop para el ejemplo, el proceso es el mismo para realizarlo con Photopea, pero al ser una aplicación online, sólo podemos usarla si disponemos de una conexión a internet.
Descargar el archivo que contieno la maqueta o mockup
Dependiendo de la calidad que busquemos y las necesidades, tendremos que elegir entre comprar un mockup en alguna plataforma de prestigio como envato market o buscar uno de uso libre y gratuito en internet.
Una vez que tengamos el archivo descargado en el ordenador habrá que descomprimirlo, suele venir en formato "*.zip" y contiene una carpeta con archivos de ejemplo, el tipo de licencia para no saltarnos las normas de uso y el archivo editable para añadir nuestra creatividad.
En esta ocasión voy a simular la portada de una revista que, por lo general, tendremos que disponer de nuestro original en un archivo independiente en un formato que podamos exportar con facilidad.
Editar la capa del objeto inteligente del mockup
Abrimos el archivo PSD del mockup y buscamos la capa donde se encuentra el objeto inteligente. Suele estar marcado con un icono en la miniatura de la capa. Para editar esta capa tenemos que picar dos veces sobre la miniatura o hacerlo desde el menú desplegable del panel de las capas
Inmediatamente se abrirá otra pestaña en el programa con la imagen que hay de ejemplo en el mockup. Esta imagen tenemos que sustituirla por la que queremos mostrar, abrimos nuetra imagen, la copiamos y la pegamos en esta pestaña. Debe ocupar y cubrir lo mismo que la original de muestra.
Para que se pueda ver el resultado hay que guardar esta pestaña como si fuera un archivo normal, pero lo que hará en realidad es actualizar el estado de la capa del archivo PSD que hemos abierto en primer lugar. Una vez guardado podemos cerrar tanto la pestaña que edita el objeto inteligente como la que contenía nuestra imagen.
Sólo nos quedamos con la pestaña del archivo principal donde ya podemos ver el resultado.
Modificar un mockup
Utilizar uno de estos archivos ahorra mucho tiempo, pero es posible que queramos realizar algún cambio porque no nos guasta algo del archivo del mockup. Gracias a las capas podemos realizar los cambios que estimemos oportunos, como colocar algún objeto adicional o poner una superficie de apoyo diferente.
Lista de sitios donde descargar mockups
En algunos de los sitios es necesario dejar el correo electrónico para poder descargar el archivo, en otros hay que registrarse para poder acceder al listado de descargas, pero como en la variedad está el gusto, aquí tenéis un listado para que elijáis el sitio que más os guste.
Mockupworld
Mockup World es una especie de buscador de mockups, no es una plataforma que los diseño, almacene o distribuya, sino que recopila los enlaces de otras webs, a las que te redirige una vez que has elegido descargar alguno.
Dispone de un menú de categorías para navegar por la web y un buscador para localizar las maquetas por palabras clave. Al hacer clic en una maqueta, se abrirá la vista previa del mockup, la descripción, las dimensiones de la imagen y un botón de descarga gratuita.
Aunque la mayoría son archivos de descarga en formato PSD, hay algunas webs que permiten realizar la simulación de forma online, sin necesidad de utilizar ningún editor de imágenes.
El uso de este material puede ser privado y comercial de forma gratuita.
CSS Author
El sitio web CSS Author es parecido al anterior, pero además de maquetas podemos encontrar otras herramientas de diseño (iconos, tipografías, imágenes...). Puedes localizar el tipo de mockup realizando una búsqueda o navegando entre los más de 5000 ejemplos que existen entre las diferentes categorías.
Antes de descargar el archivo puede ver una vista previa para obtener más información como los detalles de resolción. Será redirigido a la web del autor cuanda decida descargar algún mockup. Es muy probable que tenga que introducir su email para poder acceder a la descarga, pero una ver registradi podrá descargar el archivo de forma gratuita.
Podrá hacer uso de los archivos de forma privada y comercial gratis.
LS Graphics
LS Graphics dispone de mockups impresionantes, junto con otros recursos que podemos descargar, no todos ellos son gratuitos pero podrá ver al pie de cada recurso si lo es o si tiene un precio para poder descargarlo.
Dependiendo del recurso que nos interese tendremos que fijarnos es la compatibilidad del archivo (Photoshop, Sketch, Figma, XD...) que se especifica debajo de cada elemento. Cuando localice el mockup que le guste, haga clic sobre él para poder ver sus características y una vista previa.
Una vez más, todo lo que descargue de este sitio web puede usarse tanto para proyectos personales como comerciales.
Mr. Mockup
Otro sitio para encontrar alguna maqueta o mockup que se adapte a lo que necesitamos es Mr. Mockup, alguno de los sitios ya mencionados o de esta lista contiene descargas de este lugar.
Para poder acceder a las descargas se requiere estar registrado, pero eso no implica que tengamos que pagar en un principio. Existen descargas gratuitas de calidad y la posibilidad de adquirir contenido premium.
Este sitio ofrece la posibilidad de promocionar nuestro trabajo si les enviamos una muestra del resultado obtenido al utilizar alguno de sus archivos. Si lo considera de calida, puede que aparezca en la página de presentación de la web o lo publique en las redes sociales, alcanzando nuestro trabajo un público más amplio.
Pixeden
Pixeden apareció en internet en el año 2011 y contiene una gran colección de mockups, así como todo tipo de gráficos, íconos, vectores, etc. No es necesario registrarse en el sitio web para descargar el contenido gratuito. Dispone de material premium al que sólo tendrá acceso si se suscribe a alguno de los planes de membresía de losa que dispone el sitio.
Antes de descargar el mockup elegido, puede ver una vista previa, leer los detalles sobre el tamaño y el tipo de archivo, verificar cuántas veces se ha descargado y cuántos "Likes" tiene. Podrá hacer una selección de búsqueda por medio de filtros como: "los más recientes", "populares", "los que más gustan", "gratuitos", y también puede usar el buscador tradicional para encontrar lo que necesita.
Facebook Design
Facebook Design ofrece la descarga totalmente gratuita de mockups de una gran variedad de dispositivoses. Puede descargar todo el contenido del sitio en formato zip o elegir un modelo concreto entre los ejemplos de teléfono, tablet, reloj, ordenador o pantalla que hay.
La descarga comprende un archivo que contiene un ejemplo y el boceto para modificar del modelo que eligió.
For Graphic
Los mockups de For Graphic están creados por un estudio de diseño que se especializa en crear maquetas. Dispone de varios archivos que se pueden descargar de forma gratuita por los que hay que navegar hasta encontrar el que mejor se adapte a lo que necesitamos. También podemos comprar el mockup que se ajuste más a nuestras necesidades en la tienda online.
Para descargar los archivos directamente desde la web nos pedirán en algunos casos que dejemos nuestro email. Algunos ejemplos no pertenecen a la web y nos redirigirán al lugar de origen donde el proceso de descarga puede ser diferente. Podemos destacar que a cada imagen la acompañan las dimensiones del archivo y la versión mínima de Photoshop con la que se puede manipular el archivo.
Graphic Burger
Graphic Burger ofrece contenido de diseño digital de primer nivel de forma gratuita. Incluye un conjunto impresionante de maquetas, kits de interfaz de usuario, iconos, efectos de texto y fondos.
Al hacer click sobre el mockup que queremos descargar se abre una página con toda la información necesaria que necesitamos antes de descargar, el tamaño del archivo, formato, dimensiones, versión mínima de Photoshop y una pequeña descripción.
No hay que registrarse en el sitio web para descargar o darle a "Me gusta". Todos los artículos están destinados para uso personal o comercial y no requiere ningún tipo de atribución del origen de la maqueta. Pero no estaría de má hacerlo si es posible ya que nos aprovechamos de su trabajo
Para mantenerse al día con las novedades que vayan apareciendo puede suscribirse a su newsletter.
MockupLove
MockupLove es uno de los sitios para descargar mockups que recoge archivos de autores de todo el mundo y de diversa temática, un lugar para tener de referencia para diseñadores y desarrolladores.
Todos los archivos están en formato PSD y se pueden descargar de forma gratuita. Al pasar el ratón por encima podrá ver la fecha en la que se subió el archivo, aunque no se ha actualizado últimamente, dispone de archivos y mockups de gran nivel para utilizar tanto personalmente como de
Pixelbuddha
Desde el sitio web de Pixelbuddha puedes descargar maquetas gratuitas y premium. Los primeros están destinados para uso personal y comercial, mientras que los segundos vienen con términos de licencia específicos que debe leer antes de realizar una compra. Esta web dispone también de la posibilidad de descargar un montón de iconos, vectores, kits de interfaz de usuario, fuentes, plantillas, etc. de forma gratuita.
Para poder descargar mockups gratuitos debes crear primero una cuenta que te dará acceso a descargar lo que quieras.
Smartmockups
Smartmockups es un sitio web impresionante que presenta maquetas gratuitas y premium. Dispone de un surtino enorme muy fácil de manejar gracias a la disposición de todas las categorías en la barra lateral visible en todo momento.
La diferencia con el resto de sitios es que tienes que editar el mockup de forma online. Al seleccionar la opción que queremos utilizar tenemos que subir la imagen a la web, tendremos una herramienta para adaptar la imagen al formato adecuado y luego un botón para descargar el resultado a nuestro ordenador.
Aunque existen algunas creatividades gratuitas que pueden solucionarnos el papel en algún momento, las opciones son escasas y es mejor optar por el paquete premium que nos dará la posibilidad de conseguir los resultados óptimos que buscamos.
Envato Market
Para el último puesto de los sitios para descargar mockups que he seleccionado he dejado la plataforma que más utilizo para descargar contenido de calidad. En Envato Market puedes encontrar todo tipo de material, tanto para diseño gráfico como recursos para Web, pistas de audio, temas de gestores de contenido como WordPress o Prestashop, códigos, imágenes...
Todo el material es de muy buena calidad, lo que implica que no dispone de contenido gratuito. La ventaja de pagar por el material que descarguemos es que tendremos soporte y ayuda de los creadores en caso de que surja algún problema, como la compatibilidad o calidad de los archivos.
Requiere un registro en la web para poder acceder a la compra de cualquier artículo. Antes de descargar el archivo, y sin necesidad de registros, podemos ver todas las características, licencias y detalles de cada producto.
Conclusión
No todo el mundo es capaz de imaginar el aspecto o resultado de un producto, trabajo o diseño, y es en ese punto donde los mockups o maquetas nos pueden ser útiles. De una forma sencilla se puede insertar nuestro contenido, personalizarlo según las necesidades y crear en un momento una vista previa de como se vería nuestro proyecto en un entorno real.
Hay muchísimos sitios para descargar mockups, aquí muestro sólo unos pocos que en algún momento he tenido que utilizar, puede que haya sitios mejores con contenido expectacular y útil, pero probablemente encuentres lo que buscas en esta lista sin la necesidad de perder mucho tiempo.
¡Una recopilación estupenda, guardaré su post en marcadores! Me sirvió para descubrir algunas que no conocía. Personalmente, lasque más suelo usar son Graphic Burger, Pixeden, y mi favorita, MockupWorld. Con su permiso dejo otra que descubrí hace poco y me gustó mucho también, mockupgratis.com