¿Qué es un Wireframe?

Wireframe
Un Wireframe es prototipo visual de baja calidad, es un armazón o esqueleto de lo que puede ser un sitio web o una aplicación web. En inglés son sinónimos de Wireframe: skeleton, blueprint, outline.

Sirve para darnos una idea de que áreas van a conformar el sitio, su layout, jerarquías y esquemas de navegación. No deben tener elementos finalizados de diseño (colores o tipografías)

Deben estar en blanco y negro o máximo en escala de grises, no deben tener color porque sirven más para validar la arquitectura, el layout. Los colores pueden suponer distracciones.

Beneficios de los Wireframes

  • Lo primero y más importante es que se pueden hacer fácil y rápidamente.
  • Permiten explorar múltiples posibilidades.
  • Sirven para levantar requerimientos de forma rápida.
  • Sirven para probar y validar esquemas de navegación.
  • Pueden utilizarse para hacer pruebas de usabilidad en etapas tempranas del proyecto.

Herramientas gratis para hacer Wireframes

A continuación podrán ver 10 herramientas gratis online que les permitirán hacer wireframes.

1.Mockingbird

Este es uno de mis favoritos por su sencillez de uso y cuenta con elementos básicos en la librería, pero parra mi gusto los suficientes, existe una versión gratuita que permite guardar un proyecto con hasta 10 páginas y pueden exportarse a pdf.

2.Lovely Charts

Este lo he utilizado para hacer diagramas, mapas del sitio y flujos de usuario, pero también sirve para hacer Wireframes.

3.Cacoo

Lo más interesante de este es que varios usuarios pueden trabajar en el mismo archivo al tiempo, la interface no me parece tan amigable puesto que ya tiene muchos controles.

4.Gliffy

5.Lumzy

6.Mockflow

7. Pencil Project

8.SimpleDiagrams

9. Denim


10.Website Wireframe

website

Foto de Luc Legay