En el diseño web hay una parte fundamental que es la elaboración de un wireframe. En este artículo te voy a enseñar la mejor herramienta para crear un wireframe y encima totalmente gratuita. A partir de ahora el diseño de la UI de tus webs será mucho más rápido y fácil.
Pero antes de nada comencemos por el principio de todo y con los fundamentos básicos.
¿Qué es un Wireframe y para qué sirve?
Para los que no lo sepan, un Wireframe es un boceto en donde representaremos visualmente el esqueleto de nuestra web. La función de un Wireframe es definir lo que contendrá nuestra futura página web y la experiencia de usuario.
Además no sólo definiremos los elementos estáticos de una única página sino la navegación entre elementos y páginas. Ejemplo, al hacer clic en un enlace a donde llevará, como volveremos hacia atrás y todo lo que se nos pueda ocurrir y necesitemos validar nosotros mismos o con un cliente. Ejemplo visual:
Crear un Wireframe te ayudará agilizar las tareas de diseño de UI, a detectar y corregir problemas de UX y además podrás probar todas estas mejoras de manera visual y rápida.
¿Cómo se crea un Wireframe?
Realmente un Wireframe se puede crear hasta en papel pero lo lógico es hacerlo en digital para poder mostrarlo a un cliente o para simplemente visualizarlo correctamente.
Muchos diseñadores o responsables de usabilidad optan por usar herramientas online en donde se puede crear un Wireframe de manera muy rápida y con muchos elementos preestablecidos que pueden ahorrarnos mucho trabajo y agilizar esta tarea de manera realmente increíble.
Ahora te presentaré MockFlow, la mejor herramienta para crear Wireframes que he descubierto en los últimos años.
¿Cómo te puedes registrar en Mockflow?
Muy fácil, sólo tienes que pulsar en Login e iniciar sesión con tu cuenta de gmail. MockFlow tiene versión free y versión de pago.
- Versión Free: Con la versión gratuita puedes crear un proyecto con un máximo de tres páginas. Suficientes para crear tus webs y realizar pruebas, piensa que puedes crear una web y exportar el trabajo.
- Versión Premium: Hay varios packs, personalmente en mi trabajo tenemos la versión anual de 160$ que nos permite tener proyectos ilimitados.
¿Cómo crear un Wireframe con MockFlow?
El primer paso es pulsar en new wireframe y cómo es tu primer Wireframe te pedirá que introduzcas el nombre de tu proyecto.
A continuación seleccionarás el tipo de proyecto que vas a crear, sino lo tienes claro puedes pulsar por defecto. Ahora es cuando de verdad comienza la acción.
En la nueva pantalla que se te abre tendrás que seleccionar elements y tendrás una nueva columna llena de elementos preestablecidos que puedes usar para crear tu diseño. Yo lo primero que hago es agregar el elemento del fondo de la web, tanto si es versión Desktop como mobile se puede agregar y luego ya comienzo a diseñar el resto de la UI.
Lo bueno de esta herramienta, a parte de todo lo que ya trae diseñado por defecto, es que puedes agregar páginas en la sección de page y definir que un elemento del Wireframe sea clicable y linkar páginas entre si.
Este es el último Wireframe que he creado, es para un portfolio personal de una diseñadora de moda y estoy validando la colocación de los elementos con ella.
En la captura no se ven todos los elementos pero te animo a que entres y juegues con todos los elementos que trae incorporados. Como podrás observar es una herramienta que te permitirá diseñar cualquier tipo de UI y mejorar la UX de cualquier web.
Además con MockFlow también puedes crear Sitemaps y muchas más cosas.
¿Cómo exportar mi Wireframe en MockFlow?
MockFlow tiene muchas opciones de exportación para guardar y mostrar tus trabajos realizados:
- Imagen: La opción más usada, seleccionas las páginas a exportar y te las guarda en PDF. Luego puedes verla en cualquier ordenador.
- PDF: Esta es la opción que usaba al principio, al igual que antes seleccionas las página a exportar y te crea un PDF con todas las páginas seleccionadas. Con esta logras tener en un único archivo todos los diseños. Perfecto para enviar por email.
- Power Point: Lo mismo que la anterior pero en Power Point.
- Word Doc: Lo mismo pero en formato Word.
- Html Project: Ojo con esta opción, es mi favorita para compartir dentro del mismo equipo los Wireframes. Te exporta todos las páginas seleccionadas en formato HTML con lo cual puedes ejecutar un index que exporta y navegar por tu Wireframe desde cualquier navegador.
La opción de Html la he probado con algún cliente y dependiendo de sus conocimientos en informática es la mejor opción o algo que no debes hacer ya que perderás el tiempo explicando cosas.
Si tienes alguna duda sobre su funcionamiento escríbeme a través de los comentarios de la web y te contestaré lo antes posible. Espero que te guste el artículo y lo compartas en tus redes sociales y si quieres saber muchas más cosas entra a la sección de Marketing Digital de la web.
