Wireframe: el borrador de tu producto TIC

Cuando hablamos de un "wireframe" nos referimos en general a un esquema o esqueleto visual de una página web que, además de recoger ciertos aspectos de diseño, muestra también elementos funcionales del interfaz y la navegación del sitio. Hoy en día podemos encontrar diversas herramientas para poder diseñar el wireframe de tu producto TIC sin requerir grandes conocimientos de programación web. Gracias a ello es poco costoso plasmar las primeras ideas sobre tu producto en un borrador funcional que te apoye en un primer contraste con potenciales clientes reales, siguiendo los pasos del "Customer Discovery" que mencionábamos ayer y practicando el "get out of the building" que recomendaba el equipo de Wemories.

Existe cierta variedad entre las herramientas de wireframing y el enfoque que priorizan: unas priman la sencillez al plasmar una idea previamente diseñada sobre el papel, algunas el poder trabajar en el escritorio, y otras la integración con herramientas como Google Drive o con Bootstrap. Antes de hablar de alguna de ellas con más detalle, os dejo un breve vídeo de unos 10 minutos que ilustra el concepto de wireframe para quienes no lo conocierais. El vídeo fue elaborado en 2010 por Michael Locke y su contenido se estructura así:

• 00:00-04:14. Concepto general de wireframe, diferenciación entre wireframes de baja o alta fidelidad y recomendaciones al respecto.
• 04:14-08:45. Ejemplo de creación de un wireframe usando la herramienta Mockingbird.
• 08:45-10:27. Recordatorio de la recomendación principal (empezar con un wireframe de baja fidelidad, e ir detallando poco a poco).

Aquí tenéis el vídeo llamado "Creating Wireframes: Examples, Advice and Tips" (10:27, en inglés):