Si querés rediseñar tu sitio web, te dejamos 3 aplicaciones para wireframes o bocetos que te ayudarán a enfocarte en la funcionalidad de tu sitio.

¿Qué es un wireframe?

Un wireframe es un boceto. Un prototipo de diseño de baja calidad. O, también, el esqueleto de una página web o aplicación.

Es muy importante su diseño para que tengamos una idea de cómo va a desarrollarse el sitio. Qué diseño va a tener y qué jerarquías y esquemas de navegación se van a crear para el mismo.

No deben tener elementos finalizados de diseño (colores o tipografías).

En los wireframes el concepto del proyecto se materializa a través de lineas.

Muchos diseñadores lo desarrollan a mano para presentarselo a su cliente, otros eligen hacerlo de forma digital. Por eso hoy queremos que conozcan 3 aplicaciones que les van a servir mucho a la hora de crear.

wireframe

Beneficios de un wireframe

  1. Son fáciles y rápidos de hacer.
  2. Las aplicaciones de desarrollo son muy intuitivas.
  3. Sirve para probar la funcionalidad y el armado de los sitios antes del desarrollo.
  4. Es recomendado para pruebas en el usuario.

¿Por qué elementos está compuesto un wireframe?

Un wireframe se compone de 3 elementos: la información, la navegación y la interfaz.

Diseño de información

Es colocar la información de una forma efectiva, para que el mensaje sea comprendido para el usuario. Siempre va a estar acompañado de los objetivos que la empresa tenga a la hora de desarrollar el sitio/app.

Diseño de la navegación

Se comunica cómo el usuario navegará por el sitio, cómo interacturá con los enlaces y cómo se desplazará por el mismo.

Diseño de Interfaz

Está enlazado al concepto de experiencia de usuario, es cómo el usuario va interactuar con los botones, los campos de texto, las cajas de verificaciones y los menús.

3 aplicaciones para diseñar wireframes

  1. Wireframe: Tiene un diseño simple y eficaz. Como la mayoría de estas aplicaciones es paga, pero nos gustó que permite de forma gratuita crear un proyecto. Si lo que necesitas es diseñar algo simple y básico y no querés hacerlo a mano, te resultará muy útil.
wireframe

Axure

A diferencia del anterior, es un programa y no funciona online. El precio es un poco elevado, si tenemos en cuenta a los de la competencia. Es muy completo, y llega a parecerse mucho a Sketch, otra herramienta que también se utiliza mucho para este tipo de trabajos.

axure wireframe

Mockflow

Muy amplia herramienta online, con una interfaz seductora que invita a la creación de proyectos. Amplia y diversa, no solamente te permite diseñar para webs o app, sino para múltiples propósitos. Permite compartir tus proyectos y trabajar colaborativamente. Como así también, tener una lista de tareas en proceso, completadas o por realizar. De forma gratuita podés desarrollar 1 proyecto, que es muy bueno. Sino, su valor mensual es de 14 dólares.

Mockflow wireframes

Bee-Extra

Pencil Project

Para los amantes de código abierto, les dejamos como extra esta herramienta para crear su wireframes gratuita, muy completa que solamente debería mejorar un poco su diseño para convertirse en la mejor de todas.

Si trabajás en diseño, seguramente te va a ser muy útil nuestra nota sobre bancos de imágenes gratuitas, ¡no te la pierdas!