WIREFRAMES, MOCKUPS Y PROTOTIPADO
En nuestro último proyecto trabajé la conceptualización de un site desarrollando: wireframes, mockups y prototipado.
Estos 3 palabrejos tan importantes y diferentes son vitales para el inicio de cualquier proyecto digital. No siempre se utilizan los 3, en muchos de los proyectos que he trabajado suelen trabajar los wireframes y los prototipados prescindiendo de los mockups.
Pero siguen siendo grandes desconocidos y muchos clientes, desarrolladores, diseñadores y usuarios no entienden la diferencia entre los tres. Así que os explico que son y para que sirven.
WIREFRAMES
¿Qué es un wireframe?
Un wireframe es un esquema o plano de pantalla que representa el esqueleto o estructura visual. Se consideran de baja fidelidad (lo-fi), es decir que el esquema no tiene porque ser el diseño definitivo (Importante de cara al cliente).
El objetivo de un wireframe es mostrar:
- el qué: ordenar el contenido
- el dónde: jerarquizar la estructura de la información
- el cómo: visualización básica del usuario – interacción de la interfaz
Los wireframes son la columna vertebral del diseño.
Se crean de forma rápida y con una visualización estética muy simplificada, líneas rectas, cuadrados, colores blanco, negro y gris.
Existen numerosas herramientas para desarrollarlos.
Pero en mi caso suelo usar:
Cuándo usar los wireframes
Los wireframes se usan para la documentación de un proyecto. De hecho mucho de los clientes que he trabajado como Doubleyou, Nicemondays requieren de esta documentación para sus clientes y los equipos de arte y desarrollo.
Los wireframes son imágenes estáticas y siempre estan acompañados de notas escritas explicando la interacción. Suele añadirles una documentación funcional.
También se pueden usar como bocetos o sketchs internos para un equipo, por ejemplo si un desarrollador me pide cómo se debería hacer algo, puedo hacer un boceto hasta en papel creando un wireframe.
MOCKUP
¿Qué es un mockup?
Un mockup es una maqueta de media fidelidad e incluye cierto diseño visual.
- Representa la estructura de la información
- Permite visualizar el contenido
- Demuestra las funcionalidades básicas de un modo estático
- Permite revisar la parte visual real del proyecto
¿Cuándo usar los mockups?
En los proyectos intento utilizarlos, ya que son más visuales y permiten que el cliente pueda entender mejor el proyecto.
Con las herramientas antes mencionadas (Mockup y mockflow) también podemos hacer diseños más fideles al resultado final y se puede añadir a la documentación funcional.
PROTOTIPADO
¿Qué es un prototipado?
El prototipado es la representación de alta fidelidad (hi-fi) de un producto final y simula la interacción de interfaz de usuario. Es decir puede ser ya el resultado gráfico. Aquí debemos ya tener un perfil diseñador que haya traducido lo que hemos definido en los wireframes con herramientas de diseño como Sketch, Photoshop, Illustrator etc…
El prototipado nos permite:
- testar las interacciones de manera muy similar al producto final
- ver el contenido real
El prototipado es una simulación. Para ello suelo utilizar InVisio: esta herramienta permite subir los prototipos (diseños) y enlazar las interacciones.
¿Cuándo utilizar el prototipado?
Sobretodo, para test de usuarios.
La simulación de interacción es tan real que permite comprobar la usabilidad que tiene la interfaz.
El prototipado es costoso ya que requiere de desarrollo tanto gráfico como testeo pero es eficaz a nivel de test UX.
Resumiendo:
| Fidelidad diseño | Uso | Herramientas | |
| WIREFRAME | Baja fidelidad | Documentación | Mockflow, mockup balsamiq |
| MOCKUP | Media fidelidad | Documentación y revisión con cliente | Mockflow, mockup balsamiq |
| PROTOTIPADO | Alta fidelidad | Test de usuarios | Sketch, Photoshop, InVision |
