Los secretos de la usabilidad UI/UX y 10 herramientas Wireframing gratuitas

La usabilidad y diseño UI/UX en nuestra web es tan importante como nuestra imagen o el producto que ofrecemos. La experiencia del usuario es de vital importancia para conseguir que nuestras visitas se conviertan en CLIENTES. Si queremos que nuestra marca sea importante para los usuarios, los usuarios y su experiencia deben ser importantes para nuestra marca. Ponerle fácil al usuario la navegación es esencial para el buen funcionamiento de nuestro negocio y así consolidar objetivos a corto plazo. Si no tenemos en cuenta este factor, corremos el riesgo de fracasar. Gran importancia esforzarnos y "sentirnos usuarios", testear y ver de que manera nuestros usuarios interactuan con nuestro diseño y que es lo más sencillo para ellos.

Actualmente con las multiplataformas existentes, tenemos que pensar en un diseño RESPONSIVE y adaptable a todos los dispositivos (especialmente el móvil) ya que es la tendencia social actual.

Recomendaros que siempre hagáis vuestros primeros bocetos del wireframe y sketching antes de nada,... en el papel... por supuesto! pero después de ver estas herramientas os costará ;)

Os quiero presentar diferentes herramientas gratuitas de Wireframing que os ayudarán a desarrollar el wireframe sobre el diseño de vuestra site o App.

1. Mockingbird

Mockingbird es una versión beta basada en Capucchino, donde podrás crear, enlazar, realizar vistas previas y compartir wireframes de un sitio web o aplicación.

Dispone de una interfaz limpia y sencilla, al mismo tiempo intuitiva, sólo tienes que arrastrar y soltar, fácil edición de los "textos inteligentes" , además con página de vinculación completamente interactiva y nos permite con gran facilidad compartir maquetas/bocetos con clientes o colegas con un simple link. Mockingbird es una de las mejores herramientas para diseño UI/IX disponibles además de gratuita. Como digo es una versión beta, y la verdad que estoy deseando que llegue la versión completa para probarla. Al ser una herramienta online puedes trabajar desde cualquier lugar.

2. Lovely Charts

Lovely Charts es una aplicación online para la creación de wireframes, y se nos presenta con un atractivo diseño de interfaces de usuario UI muy intuitivo que nos permitirá crear diagramas interactivos, frames, gráficos, mapas de sitio gráficos, charts y darles funcionalidad.

Una de las principales características de esta aplicación es que nos permite realizar el boceto con gran agilidad, teniendo además un largo historial de hasta 20 "pasos atrás o rehacer" que nos permitirá modificar casi desde el principio. Dispone además de una amplia biblioteca de símbolos y grafismos que se adaptarán a la mayoria de nuestras necesidades.

3. Cacoo

Cacoo es básicamente una herramienta de "dibujo online" de fácil uso que nos permitirá realizar cantidad de esquemas con muchísimas  posibilidades. Dentro del interfaz de usuario UI sólo tenemos que arrastrar y soltar (como en la mayoría)... es muy sencilla de usar. Cacoo dispone además de "plantillas" que se pueden usar como "base del boceto" y hacer el proceso más eficaz. Tiene "pasos atrás-rehacer" ilimitado. Otra de las características importantes a destacar de Cacoo, es que puedes trabajar en red con compañeros de forma simultánea a tiempo real. Esta herramienta es de gran utilizar para trabajos de gran envergadura donde se necesiten muchas manos ;).

4. Gliffy

Gliffy es una aplicación basada más UI en web que permite crear bocetos, organigramas, planos, procesos de negocio, diagramas de red, dibujos técnicos, wireframes del sitio web, y mucho más. Utiliza una interfaz de usuario UI de arrastrar y soltar con la capacidad de agregar cuadros, botones, líneas, etc.. en cualquier parte de la página.  

Puedes añadir fácilmente el texto linkeable para crear una clara y concisa maqueta.
Dispone de una biblioteca completa de formas y podemos incluso importar nuestras propias imágenes, como logotipos y fondos, para completar nuestros proyecto. Se puede compartir y trabajar con demás desarrolladores, en cualquier plataforma, en cualquier lugar, mientras que tu tienes la capacidad de proteger y controlar los cambios.
 

Gliffy es una aplicación beta pero dispone también de una función donde puedes incluir funciones a un desarrollo web ya existente.

 

 5. Lumzy

Lumzy es una herramienta ideal para el prototipado para nuestra web o aplicación. Con esta aplicación podremos crear el proyecto y darle total funcionalidad a todos los controles del mismo. Podemos ver en el proyecto la navegación y emular al usuario y ver si es realmente fácil o encontramos algún tipo de error de usabilidad.

Con Lumzy disponemos de un chat para poder cambiar ideas e impresiones con nuestro equipo de trabajo, además Lumzy es la única herramienta de maquetación Wireframes que permite editar nuestras imagenes subidas desde nuestro ordenador (saturado, brillo y contraste...) a tiempo real, y añadirlas a nuestro prototipo.

La versión PRO permite a empresas de desarrollo trabajar de forma confidencial con una implantación en host.

6. Mockflow

MockFlow es una aplicación web basada en la Plataforma Flash de Adobe . Cuenta con una interfaz limpia, minimalista , organizada y un conjunto de funciones de edición extensa.Arrastra y suelta los componentes en una maqueta para crear la estructura de wireframe con la posibilidad de añadir páginas y trazar un sitio completo y su estructura. Los componentes integrados son ámplios, desde los gráficos y los enunciados de los menús y las listas de desplegables . Puedes subir tus propias imágenes que vayas a utilizar en el proyecto, así como la opción de elegir entre una biblioteca de los elementos e iconos más comunes de las sites, como iconos de las redes sociales y comercio electrónico, etc, hacen que nuestro proceso de 'construcción' de la maqueta bastante eficiente .En MockFlow también disponemos de chat en tiempo real e invitar a otros como editores o lectores , dependiendo del nivel de implicación que cada editor le gustaría tener. Los editores tienen la capacidad de realizar cambios en los wireframes, mientras los otros se pueden limitar a revisar y comentar. MockFlow es una fantástica aplicación que proporciona componentes de terceros y plantillas compartidas por la comunidad de usuarios.

 

7. Pencil Project

Pencil Proyect es una herramienta de código abierto para hacer diagramas y prototipos GUI que todos puedan utilizar . Está disponible como un pluging o como una aplicación independiente (Linux y Windows) para Firefox. Pencil Proyect esencialmente se instala como una aplicación de dibujo en su navegador Firefox y te da la posibilidad de mostrar, guardar y cargar un dibujo externo, junto con una gama de colores y formas.Es interensate el generador de plantillas que te permite crear tu propia colección y guardar los archivos en una carpeta. Pencil Proyect te permite buscar plantillas prediseñadas a través de la biblioteca de la openclipart.org y colocar directamente las imágenes a la derecha en su documento Pencil Proyect. También te permite la opción importar archivos tanto como tanto raster y vectoriales, simplemente copiando y pegando o arrestrando y soltando, así de sencillo.El prototipo final se puede exportar como archivo de imagen PNG , página web, archivo de OpenOffice , PDF o DOC . Si eres usuario habitual de Firefox, esta herramienta seria esencial para expresar visualmente las ideas conceptuales sobre la marcha. 

8. SimpleDiagrams

SimpleDiagrams es una de mis preferidas. Esta pequeña aplicación de escritorio que te ayuda a expresar tus ideas de forma rápida y sencilla con la suficiente funcionalidad para describir un pensamiento o capturar una "inspiración divina". Está creada sobre la plataforma de Adobe AIR, por lo que se ejecutará sin problemas en Mac, Windows y Linux.

Puede arrastrar, soltar símbolos y tamaño de las bibliotecas, añadir fotos y post-notas y exportar el diagrama a PNG.

Puede que no sea una herramienta de maquetación web "de verdad", porque SimpleDiagrams es muy básico, pero si crearás wireframes en cuestión de minutos... o segundos ;).

 

9. Denim

Denim es una aplicación de escritorio multiplataforma gratuito que soporta dibujo y permite el diseño en varios niveles de perfección. Es una herramienta eficaz para los "brainstorming" en el inicio del proyecto o wireframing.

Dos características principales dentro Denim son que permiten crear "widgets" que pueden ser reutilizados y los condicionales, que permiten crear transiciones entre páginas, dependiendo de las acciones de los usuarios finales, lo que resulta en una experiencia más interactiva.

Es una herramienta simple pero eficaz y permite una fácil "captura de ideas" en un plis plas.

10. Website Wireframe

Wireframe es una herramienta basada en la web muy simple para construir wireframes en cuestión de minutos. Un enlace para ver la estructura del boceto que se puede enviar por correo electrónico, mensaje instantáneo, o teléfono móvil, y luego el boceto del wireframe puede ser actualizado fácilmente entre los participantes con el feedback: discusión, ideas y/o sugerencias.

La clave de esta herramienta es la sencillez de uso, y se presta a la velocidad, tanto en la creación del wireframe como el compartir. Es completamente gratuita (solo registro) y funciona en la mayoría de los navegadores actuales.

Puede que no sea particularmente sofisticado, sin embargo, en la simplicidad y la eficiencia es perfecta para aquellos que quieren iniciarse y es una clara alternativa a las herramientas más sofisticadas para diseñadores más avanzados.

¿Estás usando actualmente cualquiera de estas herramientas? Si es así, por favor, comparta sus conocimientos, pensamientos y experiencias en los comentarios . GRACIAS ;).

Primera edición 28/05/2014. Re-editado mayo 2015.