Imagina o piensa en ese cliente que te llega y que te encarga el diseño de una web. Puede ser que tú tengas que diseñarle el theme que va a utilizar, y que será la primera impresión que dejará en los miles o millones de personas que van a visitarlo. ¿Cómo se lo presentarías? ¿Le harías capturas a una web en la que trabajaras el diseño y se lo enseñarías? ¿No sería mejor usar un mock up de web?
Espera, ¿no sabías que también había mock up de web? Pues entonces este tema te interesa. Y mucho. Porque puedes dar una mejor presencia a tu presentación y hacer que el cliente se vaya mucho más contento después de ver imágenes donde parece que la web ya está operativa. Y lo cierto es que no te va a costar tanto hacerlo.
Qué es un mock up de web
Antes de nada, déjanos explicarte un poquito lo que sería un mock up de web. Como sabes, un mockup es en realidad una representación normalmente «a imagen real» que muestra cómo quedaría el resultado final de tu trabajo.
En el caso de una web, sería una imagen del resultado de esa página web.
Este tipo de collage se usan para dar más realismo al trabajo, ya que muchas veces, cuando lo presenta, puede quedar vacío o no representar al cien por cien lo que has hecho. Además, el cliente tiene una manera más visual de hacerse una idea.
Y dirás, ¿y por qué no mostrarle la web en la que has trabajado? Podría hacerse, pero no como una presentación del trabajo sino que tendrías que dejar que fuera el cliente el que navegara por la web para que la conociera a fondo y, muchas veces, estos no tienen tiempo para hacerlo, con lo que no te aseguras de que ha visto todo.
En cambio, con un mockup de web sí que lo conseguirías porque destacarías en esas imágenes todo lo que quieres que vea.
Cómo se hacen
Ahora bien, ¿cómo se hacen esos mock ups de web? ¿Hay algún programa para crearlos? ¿Son collage que se sacan de Internet?
En realidad hay varias herramientas gratis que pueden echarte una mano a crear estos, y que pueden darte opciones, no solo con los ejemplos que te vamos a poner un poco más adelante.
Con ello podrías incluso crear una colección de ellos para ese cliente, poniendo el diseño en diferentes secuencias que hagan que este vea mucho mejor el resultado final.
Estas herramientas son:
Gliffy
Esta herramienta es online y es gratuita. Con ella puedes crear mock up de web porque tiene muchos esquemas y una API con la que podrás hacer el trabajo en cuestión de minutos.
De hecho, es una de las más utilizadas y que te da muchas opciones.
Cacoo
En este caso debemos advertirte que, si bien nos vamos a centrar en la parte gratuita, la herramienta también es de pago y eso significa que estará más limitada en lo que puedes hacer.
Por hacerte una idea, solo podrás exportar en PNG (con lo que no es tan personalizable si lo quieres usar con otros clientes).
Lo bueno es que si trabajas con un equipo podríais trabajar juntos al mismo tiempo (es decir, en tiempo real).
Wirify
Wirify es una de las herramientas que puede convertir una web en un wireframe y, con ello, trabajar con el cliente enseñándole la web a su gusto. Pero claro, aquí faltaría escoger una foto de un ordenador, tableta u móvil para montar el resultado de este programa.
Como habrás intuido, todas las herramientas te dan una imagen del diseño de la web, pero faltaría montarla realmente en una imagen real. Para esto, tienes que acceder a fotos donde se muestren ordenadores, móviles, tabletas a fin de insertar tu diseño por encima y conseguir una foto que una ambas (y que quede bien).
Para hacer esto puedes valerte de mockups ya hechos o crearlos tú con programa de edición de imágenes.
Mock up de web que puedes descargar
Si no quieres agobiarte demasiado para presentar el trabajo, aquí te dejamos algunos ejemplos de mock up de web que puedes descargar y utilizar. Ahorrarás tiempo.
Mock up de web realista
Empezamos por una escena que cualquiera podría tener. Se trata de un escritorio y encima una pantalla de ordenador (teclado y ratón debajo). De fondo una librería con libros. Sin embargo, esta librería está en blanco y negro, igual que los elementos decorativos del escritorio (más libros y una lámpara) y la pared, que es en tono gris.
¿Por qué? Para que la mirada se centre en la página que muestra el monitor. En tu caso podría ser la home de la página, o partes representativas que quieras mostrar al cliente.
Lo descargas aquí.
Mockup de web sencillo
Una representación más sencilla, donde con un fondo en gris (aunque se puede personalizar) no muestra una pantalla en la cual habremos insertado la página web.
Destaca que, si te fijas en la pantalla, tiene una parte más clara y otra más oscura, porque simula que la luz incide sobre ella.
Esta puede ser interesante para partes donde quieras que el cliente se fije exclusivamente en ellas.
Lo descargas aquí.
Samsung Galaxy S5 Mockup
Este en concreto es un mockup del Samsung Galaxy S5 pero a ti te puede venir perfecto para mostrarle, en una misma imagen, tres partes del diseño web que has realizado para que el cliente aprecie cómo se vería este en un móvil.
Ten en cuenta que ahora Google potencia más a los negocios que usan una web responsive, es decir, que se vea bien ya sea que se use un ordenador, una tablet o un móvil. Por eso, no basta que en el ordenador se vea bien, tienes que cerciorarte en todas las demás plataformas.
Lo puedes descargar aquí.
Mockup para tablet y móvil
En este caso no vas a poder enseñar al 100% la web en una tablet, pero sí en el móvil. Y es que si quieres mostrar tu diseño en estos dos dispositivos también puedes hacerlo, para que el cliente se haga una idea de cómo va a quedar.
Eso sí, ten en cuenta que en la tablet se mostrará en formato horizontal mientras que el móvil la tendrá vertical. Es una forma de que vea el cambio de tu diseño para adaptarse a los dos aparatos.
Lo tienes aquí.
¿Tienes algunos ejemplos de mock up de web? Puedes compartirlos en los comentarios.