Spanish (Español) translation by Alison Pumapillo (you can also view the original English article)
¿Siempre te has preguntado qué es un "mockup", pero nunca has logrado comprenderlo? Bueno, en el video de hoy vamos a desglosar este término y veremos lo fácil que es usar uno con el generador de mockups de Placeit.
Síguenos en nuestro canal de YouTube Envato Tuts+:
¿Qué es un mockup?
Un mockup es una maqueta de tamaño completo de un diseño o un dispositivo, la cual se usa para presentaciones de productos u otros propósitos.
Tómalo como una forma de mostrar cómo se vería tu diseño en el mundo real.
Dependiendo de tus habilidades y tiempo, puedes seguir el proceso para crear tu propio mockup usando un software de gráficos especializado como Adobe Illustrator o Photoshop. Sin embargo, algunas veces podría resultarte más conveniente usar herramientas más básicas.
Cómo usar Placeit para generar mockups de manera sencilla
Placeit es una poderosa plataforma que te ofrece una biblioteca de mockups increíblemente diversa, la cual puedes usar paralelamente con su generador online para que no tengas que hacer todo el trabajo.
Paso 1
Digamos que he terminado de trabajar en una aplicación del tiempo, y deseo mostrarles a mis clientes cómo se vería en un dispositivo real.
En cuestión de segundos, logré encontrar un excelente mockup de iPhone X, el cual creo que se va a adaptar muy bien a este proyecto.
Paso 2
Todo lo que tengo que hacer ahora es subir mi diseño, ya sea usando el botón Subir imagen o elegir la opción para proporcionar un link.
Si paso el cursor sobre la primera opción, podré visualizar que tamaño debería tener la imagen para que pueda ajustarse bien al espacio.
Tan pronto como haga clic en esta opción, podré seleccionar mi imagen, además de que me permitirá ajustar la posición y el tamaño de mi diseño.
Paso 3
Cuando esté listo, sólo tengo que hacer clic en el botón de recorte, el cual me dará una vista previa rápida de cómo se verá la imagen final.
Si me doy cuenta de que necesito realizar algunos ajustes rápidos, puedo hacer clic en el pequeño botón de recorte y este me llevará a la ventana anterior.
Una vez que esté satisfecho con el resultado, puedo descargar fácilmente la imagen haciendo clic en el botón Descargar, el cual me cobrará una pequeña tarifa por el uso del mockup.
Tan pronto como haya descargado la imagen, puedo abrirla y usarla como desee.
Paso 4
Lo que me encanta de Placeit, es que te ofrece una inmensa biblioteca de mockups, algunos de los cuales te dan la opción de realizar ajustes de color al instante, como este mockup de camiseta.
Al igual que en el paso anterior, repetiré el proceso para subir mi imagen. Luego, me dirigiré a la esquina superior derecha de la página, donde se puede ver una opción llamada Color de camiseta.
Si hago clic en el botón desplegable, podré cambiar el color de la camiseta usando cualquiera de los valores predeterminados o uno nuevo propio.
Una vez que esté satisfecho con el resultado, presionaré el botón Descargar y luego, seguiré con el proceso para adquirir el mockup.
Infinitas posibilidades
No importa el tipo de proyecto en el que estés trabajando, puedes encontrar fácilmente un mockup que te ayude a darle vida a tu diseño.
Personalmente, he encontrado estos tres diseños que me encantan:
- este mockup de MacBook de diseño casual
- también tenemos este simple pero hermoso mockup de tarjeta de presentación
- y finalmente tenemos a este lindo mockup de iPad, el cual planeo usar pronto.
Alternativas más avanzadas
Si sientes que lo que necesitas es un poco más de control sobre tu escena, entonces puede que quieras probar algunos mockups más personalizables, tales como lo siguientes:
Generador de mockups de teléfonos y encabezados
Este hermoso mockup de GraphicRiver viene con un generador de escenas de Photoshop, el cual te ofrece 42 objetos aislados y 5 dispositivos móviles con objetos inteligentes para presentaciones de diseño de aplicaciones o de sitios web.
Creador de mockups de exhibición
También, puedes probar este mockup de Envato Elements, el cual te permite exhibir rápidamente tus diseños y maquetas en una vitrina de exhibición digital. Las capas inteligentes te permiten reemplazar rápidamente las capturas de pantalla. Una vez que actualices una de estas capas, ¡todos los dispositivos mostrarán la captura de pantalla actualizada!
Conclusión
Los mockups permiten brindarle al espectador una vista previa de cómo se vería su aplicación o producto en la vida real. De modo que, sin importar el método que elijas usar, estas herramientas pueden ayudarte fácilmente a llevar tu diseño al siguiente nivel.
Habiendo dicho esto, espero que hayas encontrado útil este tutorial. Espero verte en el siguiente.
¡Aumenta tus habilidades de diseño!
¿Acabas de terminar este rápido tutorial y tienes ganas de seguir aprendiendo? Si ese es tu caso, entonces estás de suerte. ¡Me tomé el tiempo de hacer esta pequeña lista que seguramente te mantendrá ocupado los próximos días!
By
