En un artículo anterior te hablamos de la importancia del diseño UI y UX en el proceso de desarrollo de software. También mencionamos la importancia de realizar prototipos para agilizar el proceso de desarrollo y al mismo tiempo minimizar los cambios con nuestros clientes.
En este artículo vamos a conocer mejor el prototipado, esa parte del diseño de aplicaciones que pasamos muchas veces por alto.
En que momento se realiza el prototipado?
El prototipado se realiza tras haber completado nuestra fase de investigación para definir el público objetivo, la creación de la arquitectura de información de nuestro sitio o app y la definición de los contenidos que vamos a albergar. Con todos estos datos ya podemos empezar a tener una base sólida para concretar, de menor a mayor definición, nuestro producto.
Esto nos va a permitir tener desde el primer momento un visual del diseño, aunque sea a muy bajo nivel, para poder ir trabajando con el cliente e ir preparando un producto mínimo viable y así dar valor en una fase temprana del proyecto.
Generalmente, el prototipado se compone de cuatro fases en las que iremos incrementando la fidelidad del producto de forma incremental: sketching, wireframing, mockups y prototipo funcional. Vamos a ver qué es cada una de ellas:
Sketching
De una forma sencilla, los sketchs nos permiten dibujar rápidamente pantallas, secciones y relaciones entre éstas. Es una fase donde no se requiere fidelidad y permite probar ideas y establecer composiciones con rapidez para dejar cimentada una base donde apoyar los wireframes que veremos a continuación.
Los sketchs los realizamos siempre, aunque muchas veces no estemos consientes de ellos, estos darán paso al siguiente nivel del prototipado. Esto generalmente conlleva:
- Papel y lápiz: no necesitamos más para realizar sketchs.
- Formas básicas: líneas, cuadrados, rectángulos y círculos.
- Un sólo color: no necesitamos más para dejar plasmado en papel un elemento de la web.
- Baratos y desechables: no se requiere ninguna herramienta costosa para realizarlos.
Wireframing
Subimos el nivel de fidelidad y comenzamos con los wireframes. Entran en juego el layout y los elementos de la web (cajas de texto, botones, formularios, enlaces, secciones, imágenes, etc), los cuales ya tendrán un nivel de detalle lo suficientemente alto como para poder generar un diseño fiel en la fase siguiente.
También definimos la navegación de la web a través de enlaces, haciendo que el wireframe sea dinámico y permitiendo una interacción real.
Los wireframes son lo primero que el cliente ve, ya no son solo requerimientos sino algo tangible, y además en un tiempo muy corto desde el comienzo del proyecto. Gracias a esto comenzamos a recibir feedback muy pronto, por lo que cambiar, deshacer y hacer no supone un gran trabajo.
Mockup
Volvemos a subir el nivel de fidelidad y es momento de realizar los mockups. En esta fase toma protagonismo el look & feel de la web, introduciendo logotipos, colores, gráficos, tipografías, etc. Es lo que normalmente se considera diseño web, el cual el equipo de desarrollo convertirá en el producto final.
A esta fase debemos llegar con todo bien definido. Tan bien definido como para que no deba cambiar la estructura y composición de elementos de la web ya que este trabajo se ha realizado y refinado en las dos fases anteriores.
Prototipo
Tras tener finalizado el mockup toca darle vida y mostrar las interacciones y flujos como si de una web o app real se tratara. Esto nos permite representar de forma fidedigna cómo va a funcionar y se va a comportar nuestra web o aplicación móvil. Esta información es clave tanto para equipo de desarrollo como para cliente y usuario final.
Teniendo un prototipo funcional podremos pasar a la fase de testing con usuarios y ya validar de forma definitiva nuestro producto.
Herramientas recomendadas
El stack de herramientas que usamos en Rootnite para realizar los prototipos se resume en:
- Papel y lápiz para sketchs.
- Balsamiq Mockups para realizar los wireframes.
- Sketch para hacer los mockups y Sketch Cloud para tener los mockups online y que tanto el equipo como el cliente puedan dar feedback de manera sencilla.
- Marvel App para realizar el prototipo dinámico.
