Los wireframes web son bocetos que se crean como fase previa para elaborar una propuesta de un diseño para un sitio web.

En la práctica son muy útiles para fomentar discusión y el aporte de ideas sobre aspectos de usabilidad de un sitio web, este wireframe no contiene elementos gráficos que distraiga las opiniones e ideas de los usuarios.

Existen alternativas libres para la creación de wireframes, principalmente puedo recomendar Pencil, pero existe situaciones en donde los widgets que queremos mostrar en el wireframe son muy personalizados, por lo tanto se necesita una herramienta más flexible como inkscape.

En este post les comparto una colección de widgets prediseñados que les ahorrará el tiempo de creación de un wireframe, ya que son fáciles de adaptar al tamaño que deseen y al contenido de su sitio.

La colección contiene los siguientes elementos:

  • Grid en forma de navegador web para medir el tamaño de las áreas del sitio y cumplir con el estándar de 960px
  • Textos ejemplos basados en Lorem Ipsum
  • Set de íconos para aplicaciones pictoico
  • Marcos de imágenes en diferentes tamaños usados para banners y thumbails.
  • Widget de formularios e interfaces web.
  • Menú de elementos.

Aprovechando el post,  incluyo en ésta colección una serie de widgets también disponibles en formato svg.

Pueden descargar toda la colección de widgets en el siguiente enlace.

Pero luego de crear nuestro wireframe cuál es el siguiente paso?

Yader nos comparte este tutorial que puede ser un buen comienzo para diseñar una propuesta final para un sitio.

http://tucson-labs.com/articles/creating-websites-with-inkscape/