Un wireframe es una guía visual que representa el esqueleto o estructura visual de un sitio web. Esquematiza el contenido incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto — Wikipedia.
En este post no voy a hablaros de la importancia obvia de los wireframes en el proceso de diseño web, ni de cómo poneros en la piel del usuario (cómo mira y sus necesidades). Tampoco de cómo planificar que vuestra aplicación o proyecto web cumpla con todos los requisitos requeridos por el cliente. Pero sí del ahorro de tiempo que generan en la etapa de diseño y de su gran capacidad de venta si los haces bonitos.
Existen un sinfín de herramientas para crear wireframes de tus proyectos. Nosotros hemos probado varias a lo largo del tiempo, aunque desde hace ya más de dos años los creamos con Sketch, apoyados con el plugin de anotaciones Notebook pro.
¿Por qué un wireframe en Sketch?
La respuesta es simple: personalización.
Desde el inicio, los que formamos parte del departamento de diseño web de Onion Studio, nos dimos cuenta de que habíamos tomado una de las decisiones más acertadas de los últimos tiempos. Crear wireframes personalizados, en muchas ocasiones con una cuota bastante alta de diseño, además de ayudar a entender con profundidad el proyecto y sus necesidades, vende.
¿Qué significa esto?
Notamos inmediatamente que en las reuniones de presentación de proyectos, nuestras cuentas entendían a la perfección la arquitectura de la información y la experiencia de navegación que proponíamos para sus sites, con el agregado de que les resultaba muy fácil imaginar cómo se verían, a nivel diseño, sus futuras páginas web.
Wireframe y diseño para Grupo Dani García.
Un prototipado bonito, engancha
No os voy a engañar, la inversión de tiempo en esta primera fase es grande, pero la ganancia en la etapa de diseño es altísima. El feedback con los clientes es fluido y el margen de error (ruido en la comunicación, cambios de diseño, correcciones de última hora), bajo.
Estaréis mucho más cerca del tan preciado “visto bueno”.
Wireframe y diseño para Vitamina Workroom.
El presupuesto manda
Todo depende de la envergadura del proyecto al que os enfrentéis, no nos equivoquemos, si la inversión de tiempo necesaria para embellecer vuestros prototipados da pérdidas, no sirve.
Por otro lado, si estáis sumergidos en el proceso de una cuenta a concurso y necesitáis ganarla, vale la pena. Los beneficios llegarán con el tiempo.
Desde Onion Studio os animamos a probar nuestra metódica de trabajo, con la esperanza de ayudaros a reforzar vuestros procesos de venta.
La imagen que ilustra la cabecera de este artículo es de Unsplash.