María Jose Ramírez
¿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
Cinco herramientas populares en el mercado
En este listado no existe un programa que supere a otro, cada uno tiene sus particularidades.- Adobe XD
- Axure RP
- Lucidchart
- NinjaMock
- Hotgloo