Un wireframe o plantilla es un esbozo que interpreta de manera visual y sencilla la disposición de una página web. La representación visual de la disposición y la funcionalidad se realiza en escala de grises tanto para una página web como para una aplicación móvil. Su diseño es de baja calidad evitando así la inserción de una interfaz de usuario especificada, es decir solo muestran el concepto o idea principal.
Su uso sirve de guía de lo que acabará siendo el diseño en cuanto a funcionalidad y estructura de un producto o servicio. Todo esto atendiendo siempre a las necesidades de los clientes.
Con los wireframes podemos:
- Representar el concepto inicial de la interacción y la funcionalidad.
- Trazar estructuras y composiciones de la navegación a nivel básico.
- Plantear un enfoque generalizado de la interfaz de usuario.
Que debe englobar un wireframe
Un wireframe deberá estar compuesto de los siguientes elementos:
- Información de nuestra web. Para comenzar determinaremos la ubicación de los distintos bloques de contenido estableciendo un rango de lectura. Daremos diferentes grados de prioridad en la lectura de la información para dirigir al usuario.
- Navegación. Insertaremos los elementos que otorgarán la movilidad del usuario por la página web como por ejemplo enlaces y todo lo que le permita interactuar.
- Interfaz. Por último nos adentraremos en la usabilidad y las funciones que daremos al usuario para que su experiencia se amena, sencilla y eficaz.
Si te dedicas al diseño web lo ideal es que antes de comenzar con un nuevo proyecto destines un poco de tiempo a realizar un wireframe. Se recomienda siempre hacer más de un esquema para poder comparar y tomar la decisión correcta. Al fin y al cabo es el proyecto de tu futura página web, tómate tu tiempo.