Un wireframe es un prototipo visual de baja calidad que muestra el esqueleto o armazón de un sitio web o aplicación, indicando áreas, layout, jerarquías y esquemas de navegación sin detalles de diseño. Sirve para explorar posibilidades y probar requerimientos de forma rápida. Algunas herramientas gratuitas para crear wireframes son Mockingbird, Lovely Charts, Cacoo, Gliffy, Lumzy, Mockflow, Pencil Project, SimpleDiagrams, Denim y Website Wireframe.

2. ¿Qué es un Wireframe?

3. 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.

5. 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)

9. 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.

18. 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.

24. Herramientas
gratis para
hacer
Wireframes

25. 1. Mockingbird
Existe una versión gratuita que permite guardar un
proyecto con hasta 10 páginas y pueden
exportarse a pdf.

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

30. 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.

32. 4.Gliffy

34. 5.Lumzy

36. 6.Mockflow

38. 7. Pencil Project

40. 8.SimpleDiagrams

42. 9. Denim

44. 10.Website Wireframe