Los wireframes: qué son y qué herramientas existen

Si te dedicas al diseño web, si cliente y agencia no os entendéis o simplemente estás pensando en crear/modificar la web de tu negocio, no te puedes perder este post.

Antes de meternos en harina conviene definir qué es un wireframe y para qué sirve exactamente.

Según la Wikipedia un wireframe es:

Un esquema de página o plano de pantalla, una guía visual que representa el esqueleto o estructura visual de un sitio web. El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.​ Usualmente este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.​ En otras palabras, se enfoca en “qué hace la pantalla, no cómo se ve”.​ Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra, o pueden ser producidos con medios de diseño de aplicaciones de software libre o comerciales.

Por lo tanto, dicha representación visual esquemática y sencilla se convierte en un imprescindible si se quieren alinear los objetivos de cliente y agencia.

Ten en cuenta que los wireframes recogen información sobre los objetivos del proyecto, las características del sitio y las funciones disponibles. Lo cual, a su vez, permite una comunicación fluida, realizar fácilmente correcciones e identificar problemas a tiempo.

Tal vez, llegados a este punto, no veas las diferencias entre wireframe, mockup y prototipos, pero las hay.

Básicamente el wireframe es la primera representación del diseño de una web, los mockups y los prototipos vienen más adelante representando otra serie de funcionalidades y aspectos de carácter gráfico y estético.

Qué son los #wireframes. Aspectos a tener en cuenta para crear un buen #DiseñoWeb

Herramientas para crear wireframes

Ahora bien, ¿cómo podemos realizar wireframes? ¿Qué herramientas existen? A continuación hemos recopilado algunas herramientas destinadas a diseñadores web y desarrolladores para crear wireframes.

Wireframe.cc

El wireframe perfecto si eres principiante, la mejor manera de empezar a familiarizarse con este tipo de herramientas, ya que cuenta con una interfaz muy sencilla.

Te da la opción de crear una cuenta básica gratuita, a no ser que quieras crear wireframes privados, incluir elementos sobre los que poder hacer click y mantener todo en una cuenta personal. En ese caso hay tarifas desde 15 € al mes.

Mockflow

Esta herramienta es también muy sencilla, aunque con la ventaja de que cuenta con una tienda de plantillas de terceros, a través de la cual puedes navegar si buscas inspiración e incluso comprar alguna de ellas.

Además se puede integrar con Slack y Trello.

Axure

Esta herramienta para la creación de wireframes es ya más completa y compleja, la solución ideal para un nivel intermedio/avanzado. Aunque se trata de una herramienta de pago: 29 $ por usuario/mes o 495 $ por la licencia.

HotGloo

Esta podría decirse que es una de las herramientas para creación de wireframes más avanzadas, ya que permite exportar e implementar rápidamente tus wireframes y prototipos en HTML.

También te facilita la colaboración en cualquier momento y en cualquier lugar con tu equipo gracias a su interfaz.

MockPlus

Y por último la que se define como la herramienta de wireframes más rápida del mercado. La suscripción es 129 $ por usuario al año, aunque también se puede adquirir una licencia ilimitada por 399 $. Cuenta con una versión gratuita, pero es más limitada.

Las mejores herramientas para crear #wireframes. #DiseñoWeb

Estas son las principales herramientas para la creación de wireframes, pero existen muchas más plataformas gratuitas de creación de wireframes. Deberás probarlas para quedarte con la que más te guste y facilite tu labor de diseñador o desarrollador.