Los wireframes nos permiten representar la arquitectura de la web y definir la posición y tamaño específico de cada uno de los elementos a un nivel básico . Es decir , se define qué tipo de elemento se va a utilizar ( texto , imagen , botón , etc .) pero no se detalla su aspecto visual .
Los wireframes son fundamentales en las primeras fases del proyecto pues actúan como bocetos que permiten al equipo de trabajo entender la estructura del sitio o app .
Facilitan el trabajo colaborativo , el intercambio de ideas y permiten obtener la aprobación del cliente en el diseño de elementos clave como las páginas principales y la navegación , proporcionando seguridad al equipo a medida que avanza en el proceso de desarrollo .
Al tratarse de una representación esquemática , los wireframes también son perfectos para realizar análisis heurísticos de usabilidad , detectar problemas y realizar correcciones .
¿ Cómo crear wireframes ?
Antes de empezar a diseñar wireframes debes tener clara la arquitectura de la web mediante un mapa del sitio o diagrama de flujo de las diferentes páginas que lo componen .
Es habitual que los primeros wireframes se realicen con lápiz y papel . Una vez tengas la estructura definida , puedes utilizar herramientas específicas que te ayudarán a posicionar los diferentes elementos con mayor precisión .
Existe una amplia variedad de herramientas que permiten crear wireframes . Desde herramientas específicas como Balsamiq , Moqups o Cacoo a otras más generales como Adobe InDesign , Illustrator , Photoshop , Canva o Powerpoint .
También puedes utilizar herramientas avanzadas orientadas al diseño de interfaces de usuario como Adobe Xd , InVision , Figma , Sketch o Axure RP . Todas ellas te permiten desarrollar un proyecto de diseño web desde la fase inicial hasta la final y cuentan con numerosas plantillas y kits que aceleran el flujo de trabajo .
La elección de una u otra herramienta dependerá de tus necesidades , recursos y nivel de destreza , pero en ningún caso puede suponer un impedimento para no utilizar wireframes en tu proceso de diseño .
¡ Manos a la obra !
22