Logo

Descubre de una vez por todas qué son los wireframes 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ñoWebTwitéalo

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.

wireframe

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.

hotgloo wireframes

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.

mockplus wireframes

Las mejores herramientas para crear #wireframes. #DiseñoWebTwitéalo

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.

 

smarketing, marketing y ventas

Comparte:

Suscríbete a la newsletter y recibe cada semana los contenidos en tu email

woko creativos, S.L., como responsable del tratamiento, le informa que sus datos son recabados con la finalidad de: Recoger los datos de carácter personal que sean obtenidos a través de los formularios de contacto disponibles en la página web de la empresa para el contacto con el solicitante. La base jurídica para el tratamiento es el consentimiento del interesado. Sus datos no se cederán a terceros salvo obligación legal. Cualquier persona tiene derecho a solicitar el acceso, rectificación, supresión, limitación del tratamiento, oposición o derecho a la portabilidad de sus datos personales, escribiéndonos a la dirección de nuestras oficinas, (Plaza Ibaiondo, 4 -2º oficina 210. 48940-Leioa (Bizkaia)), indicando el derecho que desea ejercer o enviando un correo a: info@woko.agency Puede obtener información adicional en nuestra página web.

Contenidos relacionados