Herramientas para el diseño de wireframes

Los wireframes o esquemas de página conectan la arquitectura de información con la superficie de un sitio web o app móvil. Muchos los confunden con diseño final y gráficos, pero se tratan de representaciones de la interfaz usadas para comunicar estructura, contenido, jerarquía de información y no para definir colores, líneas o estilo.

Aún así, la creación de wireframes es un proceso creativo complejo donde hay varios factores como experiencia de usuario, niveles de información y los flujos de navegación. Por esto se debe balancear adecuadamente la flexibilidad para hacer modificaciones y claridad de los elementos graficados.

Ventajas y desventajas de las herramientas

Basados en el libro The Guide to Wireframing de Chris Bank, analizamos las ventajas y desventajas de las herramientas más comunes usadas en la industria para elaborar estos esquemas, desde el simple borrador a mano alzada a software de edición más estructurado.

Sketching

Dibujos hechos a mano sobre papel.

Pros

• Son rápidos y no hay necesidad de navegar entre muchos archivos o cambiar de herramientas.
• Son flexibles, puedes poner más o menos detalles según quieras.
• No tienen muchas distracciones de diseño así es que te puedes enfocar únicamente en el esquema.

Contras

• No hay plantillas maestras o elementos para reutilizar.
• Es difícil actualizarlos y editarlos.
• No podrás digitalizar el trabajo y procesarlo en otras aplicaciones.
• Los dibujos no se pueden enlazar.
• A menos de que tomes fotografías del proceso, no hay control de las diferentes versiones.
• El trabajo colaborativo es limitado.
• No hay estandarización de los elementos, lo que crea inconsistencias en las proporciones y tamaños.

Pizarras

Muy parecido a los dibujos, pero en vertical y más grande.

Pros

• Rápido y flexible.
• El gran tamaño de las pizarras permite visualizar diferentes aspectos del diseño en conjunto.
• Permite colaboración. Cualquiera que pase puede ver lo que se está haciendo y contribuir.

Contras

• Presenta los mismos problemas análogos que el dibujo en papel.
• Es difícil escribir y dibujar en vertical, no todos pueden hacerlo.
• Detalles limitados.

Recortes de papel

Se puede usar un kit estándar de esquemas en papel o simplemente cortar los dibujos hechos en papel o impresos.

Pros

• Fidelidad, ya que puedes escoger la calidad de los elementos iniciales.
  Se mantienen bien las proporciones.
  Puedes ponerlos en una pared, pegarlos en la pantalla del computador o teléfono y moverlos como quieras.

Contras

• Requiere habilidades manuales para recortar y pegar las figuras, por lo que es más desordenado.

Stencils

Hay muchas plantillas que puedes imprimir o también puedes comprar un block de ellas. Estas hojas presentan una diagramación simple para guiar el dibujo.

Pros

• Funcionan como plantillas maestras que puedes usar muchas veces y ahorrar tiempo.
• Se mantienen las proporciones y tamaños.
• Tienen líneas limpias y bien alineadas que le dan más estructura a tus dibujos y permiten entender mejor cómo se organizan los contenidos.

Contras

• Parecidos a los de dibujar: No permite crear enlaces, es difícil de editar, no se puede exportar a software.
• Se pierde flexibilidad al estar limitado a plantillas.
• Al igual que las otras herramientas manuales, son difíciles de actualizar, ya que para hacerlo tendrías que empezar todo denuevo o borrar y volver a dibujar.
• La combinación de dibujo libre y líneas con regla puede causar distracción.

Programas de edición gráfica

Hay muchas aplicaciones para gráficos digitales que pueden ser usadas. Adobe Illustrator, Photoshop son los más comunes para construir wireframes.

Pros

• Tienen herramientas y plantillas especiales para wireframing.
• Puedes usar casi cualquier forma, color o texto.

Contras

• Tienen muchos elementos de distracción que pueden hacer que te enfoques la apariencia en vez de la funcionalidad.
• No permite trabajar de manera colaborativa.
• No se pueden hacer enlaces, mostrar animaciones, o botones clickeables.

Software de wireframing

Programas específicos para el diseño web que proveen elementos específicos para la creación de esquemas de pantalla.

Pros

• Diseñado específicamente para wireframing.
• Permiten visualizar un esquema al lado del otro para que puedas navegar entre ellos.
• Permite colaboración.
• Se puede exportar a PDF, a un software de presentación, a un sitio web o usar el modo de presentación del mismo programa.

Contras

• Son desconocidos para muchos y pueden ser parecer complejos.
• Si no estás feliz con los elementos que el programa ofrece, tendrás que cambiarte a otro programa y empezar todo de nuevo, ya que no todos permiten exportar tu trabajo entre software.
• La mayoría son pagados. Una excepción es Axure, que ofrece una versión gratuita con opciones limitadas.

 

También hemos visto que algunos usan programas como PowerPoint en el proceso de creación. Sin embargo, consideramos que esto no es buena práctica, ya que no ofrecen funcionalidades específicas y pueden ser incompatibles al momento de exportar el trabajo a programas especializados.

En IDA, para la mayoría de los proyectos, nos gusta comenzar con una combinación entre stencil y dibujos, porque estos permiten más flexibilidad y rapidez al proponer ideas y organizar la estructura inicial del sitio o aplicación.

Luego pasamos nuestros esquemas iniciales a un programa especializado para formalizarlos y comenzar a iterar el resto de las plantillas.

Para esta etapa, nuestros favoritos son Fireworks y OmniGraffle. El primero permite crear wireframes de alta fidelidad y generar maquetas navegables, mientras que con el segundo podemos crear un panorama del flujo completo, graficando además otras funcionalidades.