We create amazing digital solutions.
Learn more about us!

Del wireframe al código

Ricardo Ramírez — February 26, 2016

Del wireframe al código

Al igual que al construir una casa, definir la estructura desde el principio es esencial en cualquier proyecto. En el caso de proyectos digitales, comenzar con el esquema de contenido o Wireframe nos ha permitido optimizar el tiempo, mejorar la comunicación y garantizar la calidad en cada producto. 

Hasta hace algunos años se consideraba normal que en un proyecto web o móvil alguien hiciera el diseño gráfico, el cliente aprobaba una imagen y otra persona (o empresa) se encargaba de transformarlo a código. Claramente son muchas las desventajas que vienen con esto, comenzando con una mala comunicación. 

Para evitar este tipo de problemas de comunicación, en IdeaWorks decidimos integrar en nuestro proceso de trabajo la creación de un wireframe del proyecto que nos permita comunicar la idea del producto.

Un wireframe es una guía visual que representa el esqueleto o estructura visual de un sitio web. El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto. Usualmente este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos.

Sabemos que las opiniones de un equipo multidisciplinario son muy importantes ya que nos permite afrontar un proyecto desde diferentes puntos de vista y mantenernos en constante comunicación, incluso antes de tocar una computadora. Lo anterior significa que las decisiones de diseño y experiencia son tomadas por el equipo.

Son muchas las ventajas que conlleva este tipo de metodología, entre ellas el que podamos identificar funciones, problemas y escenarios en etapas tempranas del proyecto, minimizando los fallos y correcciones al final. Estos son algunos consejos que puedo compartir para la creación de un wireframe:

Explicar el concepto

El concepto de estructura o wireframe puede ser desconocido para el cliente. Una buena forma de comenzar es explicando el concepto, las ventajas de su creación y los resultados que se van a obtener.

Hay que recordar que un wireframe es una imagen un tanto abstracta y sólo representa la estructura del proyecto por lo que puede ser un poco complicado “imaginarse” el resultado. Aquí es importante aclarar que los detalles se podrán discutir más adelante, pero que por el momento es clave definir una base sólida del funcionamiento.

Buscar inspiración

Existen muchos lugares que muestran las mejores prácticas al diseñar sitios y aplicaciones móviles. Es totalmente válido retomar soluciones existentes a problemas comunes, no hay que reinventar la rueda siempre. Algunos de nuestros lugares favoritos son: SiteInspire, Pttrns y UIgarage.

Usar Herramientas disponibles

Herramientas como Moqups, Mockingbird y Gliffy permiten hacer wireframes en línea de una manera fácil. Otras como Invision, UXpin y Atomic permiten agregar animaciones, en el caso de necesitar visualizar el flujo de una aplicación o sitio. También existen programas como Adobe Photoshop e Illustrator, que aunque no es su objetivo, pueden funcionar. al final les recomiendo utilizar la herramienta con la que se sientan más cómodos.

Vieja escuela: Papel y lápiz

Aunque puede sonar tentador comenzar el wireframe utilizando una de las herramientas que mencione anteriormente, mi consejo es comenzar siempre haciendo bocetos en lápiz y papel. De esta manera es mucho más fácil iterar entre ideas sin preocuparte por cometer errores. Luego es mucho más fácil digitalizar el concepto final.

Experimentar

Las maneras y formas de crear un wireframe son infinitas, por lo que el proceso se puede adaptar para cada tipo de proyecto. Desde una esquema muy general hasta la visualización de interacciones por medio de animación,  desde lápiz y papel hasta el uso de software de prototipo, el objetivo final debe ser siempre validar un concepto o idea antes de comenzar a diseñar o programar.

Ricardo Ramírez

Front-End Developer @ IdeaWorks