¿Estás empezando a diseñar tu página web? Seguramente ya escuchaste el término mockup. Si aún tienes dudas sobre qué se trata y para qué sirve, no tienes de qué preocuparte, presta atención a este artículo que te aclarará cualquier pregunta que tengas al respecto.
Empecemos por lo más básico, su significado, cuando hablamos de mockups nos referimos a fotomontajes que le permiten a los diseñadores gráficos y de web darle una idea clara a su cliente de cómo quedarán sus diseños. Es decir, en una imagen mostrarán cómo se vería exactamente el diseño en una situación real.
Estos fotos montajes se pueden hacer tanto en logotipos, como tarjetas de presentación, folletos, vallas y por supuesto páginas web.
¿Por qué se usan los mockup web?
Contar con mockups le permite a los clientes y al diseñador ahorrar en gastos de impresión y montajes. Estas maquetas se les muestran al cliente para que vean el diseño en los diferentes formatos que existen y en los que estarán disponibles. Esto le permitirá al cliente o a la marca tener una idea aproximada de cómo se verá en la realidad.
¿Es lo mismo wireframe y mockup?
En ocasiones estos dos términos suelen confundirse, pero no son lo mismo. Hay diferencias en los conceptos. El wireframe conecta la estructura del concepto con lo visual, mientras para hacer el diseño visual de un sitio se emplean los mock ups.
Los wireframe también se pueden denominar como bocetos de baja calidad. Esto se debe a que visualmente son un conjunto de cuadros grises que forman una información y la organiza, también se verá un texto que dará a entender mejor de qué va cada sección de la página web.
Los mock ups por su parte serán un diseño de calidad media o alta. Allí se verán los colores, los distintos tipos de tipografías, cómo será el fondo, etcétera.
Mockups web
Hay que aclarar que algunos identifican al mock up como un prototipo, lo que no es exactamente real en la web, ya que la interacción que se puede hacer con una de estas maquetas es muy mínima. Es por eso que se les conoce como low fidelity prototypes o paper prototypes.
¿Qué sigue después del mockup?
Luego del mock up va el prototipo, que es una simulación de la interfaz de usuario que va a permitir que se interactúe con el menú y el contenido. Esto servirá para probar las principales interacciones que se tendrá en la versión final de la web.
Para hacer esto se trabaja en un conjunto de páginas HTML que se conectan entre sí, con diapositivas con PPT con animaciones navegables.
Cuando se está haciendo una web siempre es recomendable hacer mapas conceptuales de lo que se quiere. Se pueden hacer wireframes y mock ups como elementos que ayudarán a ubicar el contenido de una la página.
En esta parte seguramente surgirá la duda de qué se puede hacer con las opciones del menú, del submenú que corresponde, ya que generalmente no es posible que se haga un árbol donde se establezca la jerarquía de relaciones de forma clara. Esto se logrará mediante la diagramación del contenido.
El uso de mapas conceptuales dará una visión clara y global del sitio web y de cómo se verá durante la navegación, también ayudará a darle una ubicación a las opciones que habrá en el menú y a cada una de las secciones. Esto hará todo más coherente y se evitará la duplicación del contenido.
De esta forma, podrás organizar todo el contenido de tu página de forma que tengas una mayor claridad para diseñarla y que quede justo como estás deseando.
Los formatos de archivos del mockup
Hay diferentes tipos de mockups, algunos en formato vectorial y PSD. Te recomendamos los que son archivos de Photoshop, es decir PSD. Estos son más cómodos y fáciles de editar.
Los archivos contienen una capa editable, en la que solo haciendo una sustitución del contenido, se contará con la propuesta gráfica creada.
Ten mucho cuidado acá, porque pasa a veces que le llaman mockups a bases que han sido prediseñada y solo son archivos de imágenes .png, .jpg que no cuentan con alguna capa editable. Ten claro que esto no serán mockups. Solo es un archivo de imagen, sin embargo podría ser un punto de partida si quieres crear un mockup propio.
Estos mockups falsos son los que podrás conseguir como fondos en los bancos de imágenes gratuitos para descargar. Es a partir de ellos que se pueden hacer mockups, pero esto requerirá de más trabajo.
¿Dónde se puede descargar mockups?
Obviamente puedes lograr conseguir mockups gratis si te encargas de fabricarlos tu mismo, pero esto llevaría mucho trabajo tener que ir creando cada uno con los recursos que hay disponibles.
Pero lo bueno de vivir en esta era, es que es la era de compartir, por lo que hay diseños de mockups ya listos para usar en páginas especiales. Lo que falta es que las conozcas.
Mockup World es una de las mejores páginas que encontrarás para poder descargar mockups profesionales. También hay otras opciones de bancos como GraphicBurger, Behance, Dribble, Pixeden, entre otros. Estos permiten hacer descargas gratuitas.
Pero antes de poner en uso lo que descargaste asegúrate de leer minuciosamente las licencias que tienen los archivos al momento de descargarla, ya que a pesar de ser gratuitas, puede que tengas que enlazar o nombrar al autor para que le puedas dar un uso profesional a esas imágenes.
Cómo se puede usar un mockup
Ahora sí, empecemos a adentrarnos en este tema. Es momento de aprender a manipular los mockups para que se ajusten a nuestras necesidades. Para esto hay que aprovecharse de los objetos inteligentes de Photoshop, esto lo que hace es que permite que se edite una capa de una forma que no sea destructiva, porque se va a editar el archivo de forma independiente al que se asocia al original.
Funcionamiento de las capas de un mockup
Si ya encontraste un mockup que te gustó mucho y tiene lo que necesita estás en buen camino. Asegúrate de descargar el archivo PSD y ábrelo en el programa de Photoshop, este será el programa que se usará para editar los mockups en general.
Cómo se puede usar el mockup en Photoshop
Ahora, entra en el programa de Photoshop, con el archivo del mockup que se quiere abierto. Comenzaremos por arriba. La primera y segunda capa del archivo van a corresponder para el brillo. Se usa la capa 3 como máscara de recorte de las dos anterior.
Entonces, la capa 3 del archivo es un objeto inteligente. Es la capa que vamos a editar, la que nos interesa. En el grupo de las siguientes capas se encuentra la imagen de fondo, a la que se le incorporó una máscara de capa, y debajo va a estar la copia de seguridad de la imagen, esta se puede ocultar.
La última capa de todas tampoco nos va a importar mucho, porque no se va a ver y tampoco se usará. Por lo que se puede ocultar.
Esto puede parecer complicado, pero cuando se está editando un mockup, cualquiera que sea, da igual la complejidad propia del archivo. Ya que solo será necesario manipular solo una de las capas, que es la del objetivo inteligente.
Por regla general la capa del objeto inteligente es la única que hay que modificar para que un mockup se pueda modificar.
Ya que estamos comprendiendo el archivo PSD de los mockups, hay que buscar la imagen que se quiere incorporar dentro del archivo.
Para poder aplicar una imagen en el mockup hay que manipular el objeto inteligente de forma separada al archivo general. Esto es algo que casi se hace de forma automática. Al guardar los cambios que se hicieron en el archivo, se va a mostrar en el principal.
Edición del objeto inteligente del mockup
Se pone el cursor sobre la capa 3, recordemos que esta es la del objeto inteligente. Se selecciona dos veces. Verás como aparece una ventana emergente, la que se puede desconectar luego. Le vas a dar a ok y te abrirá un archivo nuevo de Photoshop con la imagen que es de muestra del mockups, esta es la que se tiene que sustituir por la que tú quieres.
Justo en este momento verás que tienes dos archivos abiertos. Por una parte el que es general y por la otra el del objeto inteligente.
Solo tienes que añadir la imagen que quieres encima de aquellas capas que mencionamos anteriormente que no interesan. Puedes insertar una imagen, un texto o incluso las dos cosas.
También te va a interesar:
