Qué es un wireframe y por qué es fundamental en diseño web

¿Qué es un wireframe?

Un wireframe es un esquema que representa la estructura básica, tipos de contenido y posición de los mismos en una web o app. Los wireframes, junto con los mockups y prototipos, son una de las herramientas fundamentales a la hora de diseñar webs, apps e interfaces de usuario. Mientras los wireframes se encargan de definir la estructura, los mockups definen el aspecto visual y los prototipos van un paso más allá añadiendo interactividad.

¿Por qué debes utilizar wireframes?

Uno de los errores más habituales en diseño web es empezar a trabajar directamente la parte visual, obviando la estructura y pensando que de esta manera ahorraremos tiempo y costes. El resultado obtenido es el contrario pues, sin una estructura definida, realizar correcciones llevará más tiempo y será mucho más costoso. De la misma manera que no empezamos una casa por el tejado, no debemos empezar a diseñar una web o app sin tener una estructura correctamente definida. 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?

Ejemplo de wireframe creado con Adobe Xd

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 impediment para no utilizar wireframes en tu proceso de diseño.

Cinco herramientas populares en el mercado

En este listado no existe un programa que supere a otro, cada uno tiene sus particularidades.

Adobe XD

Adobe cuenta con varios programas que pueden servir para crear un wireframe, como Photoshop o Illustrator. Sin embargo, Adobe XD es un software propio para eso. Tiene una versión gratuita para uno o varios proyectos, mientras que el plan más económico de la paga es de 9,99 dólares por mes.

Axure RP

Se trata de una de las herramientas más populares entre los profesionales del área, puesto que dispone de diversas funcionalidades; entre ellas: verificar la navegación del sitio. Se mensualidad es 29,90 dólares.

Lucidchart

Aunque no se trata de una herramienta específica para la creación de wireframe, sirve como alternativa para crear flujogramas y diagramas antes de la elaboración de determinado proyecto. Al igual que Adobe XD, cuenta con dos versiones: una gratuita pero limitada y otra paga, por un precio de 9,95 dólares cada mes.

NinjaMock

La mayor particularidad de esta otra herramienta es que es de fácil utilización, por lo que resulta ideal para principiantes en el área. Su costo por mes es de 10 dólares.

Hotgloo

Los prototipos de esta herramienta son totalmente interactivos, lo que le ha permitido estar en la categoría de alta fidelidad. Su costo es de 12 dólares por mes, con una prueba gratuita por una semana. Imagen: Freepik

Artículos relacionados