Mockups o Mock- Ups
Son sencillamente maquetas ya establecidas o predeterminadas que se utilizan en diseño gráfico para dar un bosquejo de cómo resultaría una presentación o diseño aplicados en distintos formatos, y de esta manera poder darle al cliente una mejor visión de cómo quedará el resultado final, ya sea de un producto, un diseño o una página Web, entre otros. Esto permite ahorrar de manera significativa gastos, tanto de impresión como de montaje.
La ventaja de los mockups es que puede utilizarlo cualquier persona, así tenga poca experiencia en Photoshop o fotomontaje, pues son muy sencillos de manejar, ya que la función de los archivos es minimizar el trabajo y realizar cualquier manipulación fotostática, en cuanto a valores de luz o sombra, perspectiva y otros aspectos.
No solo pueden utilizarse para mostrar un trabajo a un cliente, también sirven para mejorar portafolios de trabajo, pues estas herramientas pueden mejorar de manera profesional cualquier diseño o publicación.
En la actualidad existen en la red muchas páginas de representaciones virtuales descargables de manera gratuita o de pagos (Premium), que con un poco de conocimiento en fotomontaje, harán más fácil y eficiente la visualización de un producto o diseño final.
Tipos de Mockups
Existen diversidades de Mockups para diferentes tipos de diseños, algunos en formato vectorial y/o PSD (Photoshop Document). Entre ellos se encuentran:
Mockups Software: Pueden encontrarse desde diseños hechos a mano en pantallas muy simples con mapas de bits muy realistas, hasta interfaces semi-funcionales elaboradas con herramientas de desarrollo de software.
Mockups para Photoshop: Son imágenes o fotografías pre-establecidas en las cuales podemos cambiar o modificar algunos elementos para mostrar cómo se visualiza un producto o diseño final. Estos archivos contienen una capa editable donde pueden realizarse sustituciones de un contenido y de esta manera obtener una propuesta gráfica creada.
Mockups Web: En estos se simula la interfaz del usuario y de esta forma se puede interactuar conjuntamente con el contenido y el menú, facilitando las pruebas en las interacciones de la versión final de una página Web.
Esto se logra trabajando simultáneamente con paginas HTML que se conectan entre sí con dispositivas de PowerPoint con animaciones navegables
Como usar los Mockups
El primer paso es utilizar un programa de modificaciones de imágenes como lo es Photoshop o uno similar. Paso siguiente, abrir el proyecto que se acaba de descargar en formato PSD preferiblemente. Una vez abierto, deben buscarse las capas que pueden suplantarse por las imágenes o contenidos que se desee.
Normalmente la primera y segunda capa de estos archivos son las correspondientes a la modificación y ajuste de luz y brillo, y la tercera capa del archivo es la que se conoce como objeto inteligente, siendo esta capa la editable. Se coloca el cursor sobre esta capa 3 y se dará doble clic, apareciendo una ventana emergente, al presionar OK se abrirá un nuevo archivo en PSD con la imagen de muestra del Mockup, siendo esta la que será sustituida por la que se desea.
Se observarán dos archivos abiertos, siendo uno de estos el objeto general y el otro, el objeto inteligente. Finalmente se debe importar la imagen que se quiere insertar en el texto para luego amoldarla al tamaño o espacios de la capa. El objeto inteligente siempre debe manejar de forma separada al archivo general.
A pesar de que todos estos pasos parezcan complejos, en realidad todo es muy sencillo, pues en los Mockups solo puede modificarse una sola capa. Sin importar lo sofisticado que pueda visualizarse el contenido, sabiendo trabajar el objeto inteligente, se podrá insertar la imagen requerida y visualizar un diseño final en pocos pasos.
Diferencia entre Mockup y Wireframe
Estos dos términos tienden a confundirse muchas veces, pero los conceptos son totalmente distintos. En la definición de Wireframe, podemos encontrar que son básicamente bocetos de baja calidad compuestos de cuadros grises que forman una información y la organizan, conectando la estructura de un concepto con lo visual. A diferencia de los Mockups, que son diseños con una calidad más alta que el de los wireframe, y donde pueden visualizarse diversidad de colores, distintos tipos de tipografía, variedad de fondos, etc.; que se emplean para hacer el diseño visual de un producto.
Mockups Gratuitos
Existen infinidades de formas, imágenes, soportes y situaciones en lo que respecta a maquetas de fotomontajes, para cualquier tipo de Logo Corporativo, folletos, productos (franelas, toldos, vasos, etc.), tarjetas de presentación, páginas web o lo que se necesite. Entre las muchas páginas de Mockups gratuitas en la Red se pueden encontrar unas con mejor calidad que otras, pero todas con la misma función y finalidad de facilitar el trabajo.
Tome siempre como recomendación, leer cuidadosamente las licencias que tienen cada archivo al momento de descargarlas y ponerlas en uso, pues, a pesar de ser gratuitas, algunas piden que deba enlazarla o nombrar al autor para poder darle uso profesional. Se citan algunas de las más usadas:
Ø Mockupworld: No necesita registro, excelente herramienta de búsqueda. Ideal si lo que necesita es fotorealismo profesional.
Ø GraphicBurger: Es una de las más populares. Gran gama de Recursos libres para uso personal o comercial con muy buena calidad en formato PSD.
Ø Smartmockups: Variada colección de Mockups que permite editarlos en línea de manera muy fácil. Tiene la opción gratuita y la Premium pero los precios son accesibles, debes registrarte para poder utilizarla.
Ø Mockup Planet: Diversidad de Mockups gratuitos en formato PSD.
Ø Stockingdesign: Creada para diseñadores editoriales, se encontrará de todo a cerca de libros, revistas, ebooks, flayers y más. La versión gratuita solo puede ser utilizada para uso personal.
Ø Pixeden: Excelente variedad de Mockups gratis y de pago. Todos los recursos están libres de derechos tanto para uso personal como comercial.
Ø Original Mockups: Solo debe registrarse en pocos pasos para disfrutar de una cantidad de Mockups muy creativos. Se consiguen contenidos gratuitos y pagos
Ø Behance: Infinidad de diseños publicados por creadores expertos, solo debe verificarse que contengan la palabra “free”, ya que también hay pagos.
0 Comentarios