No lo entiendo

En la lista de Cadius se discute estos días sobre los wireframes. Aprovecho para publicar algunas anotaciones y recopilar los enlaces que me han parecido más útiles.

¿Qué son los wireframes?

Una representación esquemática de una página web sin elementos gráficos que muestran contenido y comportamiento de las páginas. Sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para pruebas de usuarios.

En inglés a veces se le llama: schematics, blueprints o page architecture.

¿Cuándo se crean?

Una vez tengamos delimitados los objetivos del cliente, las necesidades de los usuarios y los contenidos y funciones de la web; antes de empezar a programar y de crear el diseño visual de la página;

¿Quién hace los wireframe?

El que desempeñe el papel de arquitecto de la información en el equipo. Pero hay que tener en cuenta a otras personas al hacer los porque, como señala Christina Wodke

Well, I can't say I'm surprised that designers are mad at us. We've stolen the fun part of the problem, and left them with nothing more than color and font selection. Not exactly satisfying."

Así que hay que evitar posiciones egocéntricas y comunicarse con el resto del equipo.

¿Qué programas se utilizan?

Muchos, aunque los favoritos son los editores HTML o programas como Visio u Omnigraffle.

Otras posibilidades son:

• PowerPoint
• Keynote
• Illustrator o similares.
• ¡¡Excel!! (Lo he visto en estos comentarios).
• Lápiz y papel.

Enlaces

• Using wireframes. Qué son y cómo se utilizan.
• Wire frame your site. Cómo crear un wireframe con un editor de HTML.
• Visio, the interaction designer's nail and gun. Cómo crear un wireframe con Visio.
• Representing data using wireframes (PDF, 160Kb). Póster con las técnicas para representar infomación en un wireframe y los riesgos que conlleva.
• HTML Wireframes and Prototypes: All Gain and No Pain. Las ventajas de crear wireframes con HTML.
• Practical Applications: Visio or HTML for Wireframes. Ventajas e inconvenientes de Visio y HTML para hacer wireframes.
• Creación de notas con Ajax y una aplicación muy particular. Un wireframe hecho con una aplicación Ajax.
• Ejemplo de wireframe de El Factor Humano.
• The Information Architecure Institute: Tools. Para encontrar numerosos ejemplos de wireframes.
• Paleta para crear wireframes con OmniGraffle.
• Paleta para crear wireframes con Visio.

Actualización: En Torresburiel se explican algunas restricciones que se deberían seguir al crear wireframes.

Si con esto no tienes suficiente, puedes econtrar multitud de artículos relacionados con los wireframes en How To: Methods & Approaches Articles de Boxes&Arrows.

Etiquetado como arquitectura de información, técnicas, wireframes.