Si piensas en una silla, te viene rápidamente a la cabeza una imagen. Es fácil de entender que es un objeto donde sentarse, con 4 puntos de soporte, pero la realidad es que cada persona a la que le hagas pensar, visualizara una imagen distinta de una silla. La cuestión es que normalmente una imagen vale más que mil palabras, sobre todo en Diseño.
Quién sabe si de haberse respaldado en una esbozo, aquel malentendido de la reunión o confusión con el equipo de diseño no habría existido. Los diseñadores tenemos una parte inevitable de dibujantes; no como objetivo artístico, sino comunicativo: es una herramienta muy poderosa para materializar ideas, simplificar conceptos y aclararlos para que todos tengan en mente el mismo.
De esta necesidad, en diferentes momentos del proyecto, aparecen el Sketch, el Wireframe, el Mockup o el Prototipo. ¿Pero sabes la diferencia entre ellos y cuando se usa cada uno?
También conocido como esbozo, es el primer dibujo, poco detallado, que nos ayuda a mostrar las ideas y conceptos de forma rápida. Aparece en las primeras etapas del proyecto, cuando la posible solución aún está muy difuso y todo está por decidir.
Bonus track Quieres adquirir un hábito de dibujo para mejorar tus habilidades comunicativas y recuperar músculo creativo? La app de Dudel, de Silly Little Apps, te propone cada día una forma abstracta sobre la que dibujar lo que se te ocurra y darle forma.
Sí, lo es: es donde vemos la estructura general, que nos da una visión holística de las funcionalidades y el diseño de la experiencia. Se presentan la arquitectura de la información, el flujo de usuarios y la manera en como se presenta esta información en distintas palabras clave sin entrar en detalles visuales.
En Digrup, la comunicación es uno de los valores principales sobre el que se construye la relación con todos nuestros clientes. Es por esto que el wireframe es un momento especialmente importante: es la cohesión entre lo que el cliente nos ha transmitido y como nosotros lo hemos plasmado.
Conceptualización: Cuando plasmamos con más detalle, teniendo en cuenta la experiencia del usuario, una idea aparecida durante la Ideación.
**Colaboración con el equipo técnico: **En las primeras fases de bajada a tierra de una propuesta, es importante la voz del equipo técnico para saber cuanto de factibles son las ideas que la componen y que limitaciones tecnológicas pueden aparecer.
En cualquier momento que se necesite discutir o revisar como será la experiencia de usuario de una sección en concreto.
Presentar la propuesta al cliente. La solución propuesta que refleja el wireframe es la conclusión del Design Sprint, donde se ha cocreado con todas las partes.
Recibir feedback. el wireframe ayudará al cliente a comprender cada detalle de la solución, y a saber como la experimentaría su público.
La simplicidad que dan el Sketch y el wireframe es importante para obtener feedback de manera ágil e iterar tantas veces como sea necesario (ahora, y no después) hasta llegar a una solución que sea factible, viable i útil.
Se conoce como mockup en la propuesta visual que se realiza en ciertas pantallas clave para que el cliente se haga una idea del resultado final de la solución. Esta prueba se realiza en 2-3 pantallas.
Últimos pasos de Diseño: al validar el mockup, se podrá replicar el aspecto visual en todo el wireframe.
Cuando queremos marcar una línea visual a seguir en el resto de la interfaz para cualquier persona del equipo de Diseño.
Los prototipos no son ninguna novedad de esta década, los prototipos los han usado en casi todo lo que se ha diseñado, y debemos pensar que podemos llegar hasta el 4000 a.C. Sin ir tan lejos cuando Edison descubrió (o mejor, diseño) la bombilla, fue después de muchas pruebas fallidas. Esto es lo que respondió:
“No fracasé, solo descubrí 999 maneras de como no hacer una bombilla”.
El caso es que ahora ya no lo consideramos un fracaso, sino que realizó muchos prototipos para comprobar cuál de ellos daba resultado. La bombilla es el resultado final de mejora tras la mejora de su prototipo inicial.
(El ejemplo de prototipo muestra la aplicación de interacciones sobre el wireframe, aunque a menudo también se realiza el prototipo sobre el layout).
Conceptualización: Una vez validado el Mockup y esta aplicación a todo el wireframe (convirtiéndolo en el layout), se realizan interacciones por navegación navegable cuando es necesario probar una idea con tal de validarla y establecerla como la mejor solución para los usuarios potenciales.
Desarrollo: a veces es preciso testear nuevos evolutivos de un proyecto que ya se está desarrollando (o rediseños de una sección existente), y el prototipo se realiza sobre los diseños finales.
Bonus track La herramienta de diseño colaborativo Figma permite crear rápidamente las interacciones entre pantallas de tu diseño y compartir el prototipo con un enlace que puede utilizarse fácilmente en un testeo desde cualquier dispositivo. Además, dispone de toda una comunidad con soporte tutorial que te ayudará en las dudas más técnicas a la hora de utilizar la herramienta.
Con estos conceptos ya más claros, te animamos a que los pongas en práctica en tu equipo, producto o idea. Y si prefieres que te guiemos en este camino, cuéntanoslo y sentemosnos juntos.
