sketched wireframes

Los Wireframes son representaciones esquemáticas de una página web, de manera coloquial puede ser el “esqueleto” del sitio, hacer wireframes resulta mucho más rápido y económico, es mucho más fácil ver si la interfaz que estamos construyendo puede cumplir con los objetivos del negocio y generar buenas experiencias en los usuarios que la vayan a utilizar.

Los wireframes son útiles porque nos permiten de una manera esquemática ver que elementos va a tener la interfaz, que jerarquías debe tener y como se relacionan los elementos con el resto del sitio o que funcionalidad pueden tener, es mucho más eficiente si se quiere crear los diferentes wireframes para diversas pantallas, ver el flujo por el cual tendrá que moverse el usuario y hacer cambios sobre estos wireframes ya que es mucho más rápido.

Una vez se tenga claro el funcionamiento y el esquema general de las pantallas si se debe proceder a realizar un wireframe más elaborado, es decir un mockup.

Es importante crear esta cultura en la empresa en la que trabajamos o con los clientes que tengamos puesto que nos ayudará a tener un proceso de diseño más eficiente y nos evitará sorpresas desagradables tales como montar un sitio de 200 páginas y 500 fotos y mostrárselo al cliente para que nos diga que ya no le gusta de esa forma o que se lo imaginaba diferente.

Cómo se hacen los Wireframes?

Existen diversas formas de hacer los wireframes, la más fácil en papel y a mano, despues tomare una foto y listo, pero si se quiere se pueden hacer con recortes de papel (Paper propotipyng).

How to Wireframe from Clay Parker Jones on Vimeo.

Existen varias herramientas en internet que nos permiten hacer wireframes, les dejo algunas de las mejores que he encontrado.

1. Balsamiq

Balsamiq Mockups Tool

2. iPlotz

iPlotz Wireframe Maker

3. Pencil Project

Pencil Project GUI Wireframe

4. templatr

Templatr Mockup Creator

5. Flair Builder

Flair Builder Interactive Mockup Creator