13 junio 2018

Hoy vamos a hablar de un tema esencial en nuestra disciplina pero que no hemos dedicado un post dedicado en exclusiva a ello, como es el wireframing.

Wireframe básico mostrado en un iPad. Foto de baldiri

Un wireframe es una representación esquemática de las pantallas de un producto digital. También se les denomina prototipos, aunque normalmente los prototipos tienen interacción y los wireframes no. Aunque habitualmente se intercambien los términos.

Los wireframes normalmente pueden ser vistos por los clientes como una pérdida de dinero y de tiempo con excepción de clientes que tienen un nivel de madurez medio o alto en asuntos de diseño.

Pero los wireframes ayudan tanto a diseñadores como al equipo de implementación a tener una visión clara del producto y a plasmar visualmente las ideas y la arquitectura de la información que desean para su producto digital.

Esto aunque pueda parecer un asunto menor, es de una de gran importancia para que un producto digital sea exitoso, ya que unificar la visión del equipo de diseño, del encargado de implementarlo y de los product owners, ayuda a mejorar la comunicación entre los equipos y tener una plasmación visual de las diferentes visiones de cada parte ayuda a pensar mejor las decisiones de diseño y a mejorar la implementación final. Porque el diablo está en los detalles.

Si los equipos se comunican para plasmar sus ideas en los wireframes, cada equipo escuchará las razones de los otros y ayudará a que sean mejor comprendidas por sus compañeros y por la dirección. El wireframing nos ayuda a ello desde el primer momento a realizar una plasmación visual de la arquitectura de la información y de los procesos de interacción y las pantallas que queremos mostrar a los usuarios.

El wireframing puede empezar con unos prototipos en papel y lápiz de los procesos y diagramas de los procesos y conforme va a avanzando el proyecto y se van añadiendo y desechando ideas, pasando esos prototipos en papel a wireframes digitales donde se plasmen las pantallas y procesos de una manera más clara.

Tened en cuenta que un wireframe no tiene diseño visual y es en blanco y negro, ya que es la arquitectura de la información de nuestro producto digital. Si queréis diseño visual hay que pasar a un mockup o un prototipo si es visual con interacción.

En UXPlanet nos explican en qué consiste un wireframe:

  • Documentos técnicos con bloques, líneas y leyendas
  • No son esquemas en servilletas, un wireframe es una cosa seria
  • No tienen elementos visuales, ni siquiera es necesario un logo
  • Se elaboran conforme las funcionalidades se plasman

Espero que con este artículo os haya aclarado un poco los conceptos básicos del wireframing y sepáis diferenciar entre prototipo, mockup y wireframe de una manera clara. Si tenéis alguna duda todavía en este enlace donde explican los pasos de un proyecto digital os las aclaran.

Desde el Estudio os recomendamos el uso de wireframes para trabajar con clientes en temas de diseño desde el primer momento siempre que sea posible. Ya que son la mejor opción para tener una comunicación fluida con el cliente y plasmar la arquitectura de la información de un producto digital.

En Torresburriel Estudio podemos ayudarte en el proceso de investigación con usuarios, aplicando técnicas como las entrevistas personalizadas o la investigación etnográfica.