Hoy os compartimos una herramienta imprescindible para cualquier diseñador web y que en SiloCreativo utilizamos prácticamente a diario: se trata de moqups, un editor online para crear mockups de nuestros diseños web. Muy sencillo, rápido de utilizar y además online. ¿Qué más se puede pedir? ¿Que sea gratis? También podemos usarlo gratuitamente.
Los mockups y su importancia en la fase de diseño.
El proyecto de diseñar una web consta de varios pasos necesarios para finalmente obtener un buen resultado. Uno de ellos, y según nuestra experiencia fundamentales, es el paso de creación de Mockups o Wireframes, en los que definimos el esquema básico de navegación y estructura de la web, sin definir aún nada sobre colores, tipografías, texturas…
Este paso por tanto sirve al diseñador web para comenzar a lidiar con la estructura y disposición de contenido, y sentar por así decirlo, una base solida sobre la que poder diseñar. Son los primeros elementos que situar y evitar así el pánico al papel en blanco. Tanto diseñas en HTLM5 y CSS o realizas plantillas y temas para algún CMS (aquí te contamos el proceso de diseño de una de nuestras plantillas para WordPress), este paso es fundamental.
Otro punto importante, sobre todo si eres freelance o si al igual que nosotros ofreces servicios de diseño web a medida, es que estos mockups deben servirte para fijar puntos de partida con tu cliente, y aprobar ciertas partes y estructura mínimas. Todos sabemos lo doloroso que puede resultar, cuando casi al final del proyecto el cliente te comunica: «Oye, el menú mejor en el pie de página, que en la cabecera finalmente queremos solo el logo…»
El cliente supone que este cambio pude ser insustancial, pero lo cierto es que puede que no lo sea, y si no tienes ningún documento que fije la aprobación por parte del mismo de los elementos básicos, creo que te va a tocar cambiarlo.
Pero si por el contrario, fuiste previsor, realizaste unos buenos mockups, se los pasaste al cliente y este lo acepto, tienes todo de tu parte para medir cuanto trabajo extra implica esa modificación, y cuanto incremento económico conlleva modificar un elemento que ya se aprobó por parte del cliente. Fundamental
Mockups online y gratuitos: Moqups
Bueno, ya que estas convencido a realizar mockups como parte del proceso de diseño de una web, es hora que conozcas una de las mejores herramientas que existen para realizarlos. Se trata de moqups, una aplicación en la nube, realizada en HTML5, y extremadamente fácil de usar. Además de todo ello, podemos hacer uso de ella de forma gratuita.
El concepto es muy básico: trabajamos con proyectos, donde cada proyecto tiene una serie de láminas o espacios de trabajo como en Illustrator. Cada espacio de trabajo puede tener sus propias dimensiones en pixeles, y son independientes uno de otros.
Esto es muy útil, si tenemos que realizar un diseño con responsive design y queremos ir ideando como serán las distintas versiones según el dispositivo. Créate por tanto tres o más resoluciones y comienza a componer como se disponen las imágenes, los cuadros de texto y los elementos básicos de todo diseño web.
Y es que en la barra lateral, solo con arrastrar y soltar, tienes disponibles un gran número de elementos básicos predefinidos. Menús de navegación, cuadro de texto, cuadros de imágenes, iconos, formularios, botones…todo muy básico, en monocromo y pensado exclusivamente para realizar mockups, solo estructura, sin contenido, ni colores ni estilos.
Exportación y almacenamiento de tus Mockups
No nos cansaremos de repetirlo, una de las ventajas que tienen este tipo de aplicaciones, como moqups, es que al ser soluciones en la nube, puedes acceder a ellas desde cualquier ordenador o dispositivo, únicamente con tu clave y contraseña. Es decir, no hay una aplicación que descargar, instalar, ejecutar…no, todo desde el explorador. Además cuentan con una extensión para Google Chrome.
De todas formas, puedes adjuntar el proyecto directamente por mail al cliente o a tu compañero de diseño, pero también puedes descargarte tus proyectos en dos formatos, .pdf y .png. Esto es muy positivo, si quieres componer una propuesta, y tienes un modelo y lo único que necesitas es insertar la imágenes del mockup creado por Moqups.
En definitiva un recursos muy potente que todos los que nos dedicamos al diseño web deberíamos estar utilizando. Existen más alternativas en el mercado, mucho más completas y con opciones avanzadas. Pero es su sencillez y velocidad lo que nos hace quedarnos con Moqups como herramienta para dibujar nuestros mockups y wireframes. Añadiremos herramientas tan útiles como esta próximamente en nuestro recopilatorio de recursos y herramientas de diseño
¿Y tu, conoces más recursos y herramientas de este tipo?
[wysija_form id=»5″]
Seria muy bueno hacer una pequeña reseña de CANVA «https://www.canva.com/» pues esta tambien es una muy buena herramienta gratuita y de trabajo colaborativo. Saludos….