Si trabajáis como diseñadores/desarrolladores web o UX/UI probablemente la realización de wireframes es el pan de vuestro día a día. Pero es probable que si has llegado aquí es porque quien os está diseñando la web os ha dicho: – Mañana os mando los wireframes – y habéis entrado en pánico pensando qué es lo que os va a enviar.
Qué es un wireframe
Un wireframe, es una representación gráfica de la estructura y funcionalidades de una página web o app. Se tata de una versión muy simplificada evitando el uso de colores, logotipo, tipografías o imágenes. Se realiza en una fase inicial del proyecto y sirve para validar de una forma sencilla la navegación, estructura y funcionalidades del sitio web.
Wireframes y navegación
Gracias al diseño de las pantallas a modo de wireframe, podemos presentar la navegación del sitio web en general. Puede reemplazar de una manera más completa a lo que también se puede validar mediante un mapa web. Realizando un conjunto de wireframes interactivos, el usuario podrá navegar entre ellas y prever el uso y navegación antes de desarrollarlo y aumentar el tiempo invertido en los cambios.
Wireframes y estructura
Gracias a la elaboración de wireframes, podemos establecer las principales secciones de cada página así como los titulares principales (h1) y secundarios (h2, h3) para que tanto el cliente como el experto en SEO puedan prever dónde irán colocados.
Wireframes y bloques de texto
Gracias a los wireframes, también es más sencillo visualizar los bloques de texto para coordinar con la persona encargada de redactarlos.
Ventajas de realizar un wireframe
A la hora de crear una web o una app, es necesario crear un wireframe por lo siguiente:
- Agilidad: haciéndolos de manera muy sencilla puedes realizar todas las pantallas de manera rápida.
- Ahorro: ahorras tiempo y recursos al realizar cambios en fases iniciales antes de que la web ya esté diseñada/desarrollada y sean más costosos de modificar.
- Se detectan antes posibles fallos en la usabilidad y la experiencia de usuario, ya que podemos navegar en ella de manera sencilla.
- Mejora la comunicación: Gracias al wireframe, el equipo implicado en el diseño y desarrollo de la web puede saber de antemano (como comentábamos previamente), cantidad de texto, estructura, navegación, etc.
Qué tipos de wireframes existen
Dependiendo de lo fieles que queramos ser al diseño final, existen varios grados de wireframes.
Wireframe baja fidelidad (low-fi wireframe): Son muy básicos, generalmente en blanco y negro.
Una variables de los wireframes podrían ser los wireframes con anotaciones, en los cuales incluimos pequeñas explicaciones de cada una de las secciones a un lado o al final del documento.
Wireframes fidelidad media (mid-fi wireframes): sin llegar a ser con un detalle final, vamos aplicando pequeños detalles que nos ayuden a seguir validando contenido, estructura y navegación. Si disponemos ya del contenido en texto es un buen momento para ver qué tal encaja.
Wireframe alta fidelidad o mockup: Es posible que si cuentas con un equipo de UX/UI esta fase sea la que se encarguen directamente los diseñadores visuales. Se trata de dar la capa final visual al diseño, en él ya incluimos todo lo referente a iconos, imágenes, tipografías finales, etc.
¿Podemos ayudarte en algo? Estaremos encantados de comenzar un proyecto web contigo. ¡Contáctanos!