Si penses en una cadira, et deu venir ràpidament al cap una imatge. És fàcil d’entendre que és un objecte on seure amb 4 punts de suport, però la realitat és que a cada persona que l’hi facis pensar li vindrà una imatge diferent de cadira al cap. El cas és que sí, sovint una imatge val més que mil paraules, sobretot en el Disseny.
Qui sap si, d’haver-se vist recolzat per un esboç, aquell malentès de la reunió o la confusió en l’equip de Disseny no haurien existit. Els dissenyadors tenim una part inevitable de dibuixants; no com a objectiu artístic, sinó comunicatiu: és una eina molt poderosa per materialitzar idees, simplificar conceptes i aclarir-los de cara a que tothom tingui en ment el mateix.
I d’aquesta necessitat en diferents moments del projecte, sorgeixen l’sketch, el wireframe, el mockup o el prototip. Però, saps la diferència entre ells, i quan fer servir cadascun?
També anomenat esboç, és un primer dibuix poc detallat que ens ajuda a reflectir idees o conceptes de manera ràpida. Apareix en les primeres etapes del projecte, quan la possible solució encara està molt en l’aire i tot està per decidir.
Bonus track Vols adquirir l’hàbit de dibuixar per millorar les teves habilitats comunicatives i recuperar múscul creatiu? L’app Dudel, de Silly Little Apps, et proposa cada dia una forma abstracta sobre la que dibuixar el que se t’acudeixi i donar a la forma un sentit.
Sí, ho és: és on veiem l’estructura general, que ens dóna una visió holística de les funcionalitats i el disseny de l’experiència. Es presenten l’arquitectura de la informació, el fluxe de l’usuari i la manera en com es presenta aquesta informació en diverses pantalles clau sense entrar en detalls visuals.
A Digrup, la comunicació és un dels valors principals sobre el que es construeix la relació amb tots els nostres clients. És per això que el wireframe és un moment especialment important: és la cohesió entre el que el client ens ha transmès i com nosaltres ho hem plasmat.
Conceptualització. Quan plasmem amb més detall, tenint en compte l’experiència d’usuari, una idea sorgida durant la Ideació.
**Col·laboració amb l’equip tècnic. **En les primeres fases de baixada a terra d’una proposta, és important la veu de l’equip tècnic per saber quant de factibles són les idees que la composen i quines limitacions tecnològiques poden aparéixer.
En qualsevol moment que es necessiti discutir o revisar com serà l’experiència d’usuari d’una secció en concret.
Presentar la proposta al client. La solució proposada que reflecteix el wireframe és la conclusió del Design Sprint, on s’ha co-creat amb totes les parts.
Rebre feedback. El wireframe ajudarà al client a comprendre cada detall de la solució, i a saber com l’experimentaria el seu públic.
La simplicitat que donen l’Sketch i el wireframe és important per obtenir feedback de manera àgil i iterar tants cops com calgui (ara, i no després) fins arribar a una solució que sigui factible, viable i útil.
Es coneix com a mockup a la proposta visual que es realitza en certes pantalles clau per tal que el client es faci una idea del resultat final de la solució. Aquesta prova es realitza en 2-3 pantalles.
Últimes pases de Disseny: en validar el mockup, es podrà replicar l’aspecte visual en tot el wireframe.
Quan volem marcar una línia visual a seguir en la resta d’interfície per a qualsevol persona de l’equip de Disseny.
Els prototips no són cap novetat d’aquesta dècada, de prototips se n’ha fet gairebé de tot el que s’ha dissenyat, i hem de pensar que ens en podem anar al 4000 a. C. Sense anar tan lluny, quan l’Edison va descobrir (o més aviat, dissenyar) la bombeta al 1880, va ser després de moltes proves fallides. A això, ell va respondre:
“No vaig fracasar, només vaig descobrir 999 maneres de com no fer una bombeta”.
El cas és que ara ja no ho considerem un fracàs, sinó que va fer molts prototips per comprovar quin d’ells donava resultat. La bombeta és el resultat final de millora rere millora del seu prototip inicial.
(L'exemple de prototip mostra l'aplicació d'interaccions sobre el wireframe, tot i que sovint també es realitza el prototip sobre el layout).
Conceptualització: Una vegada s'ha validat el Mockup i aquesta s'ha aplicat a tot el wireframe (convertint-ho així en layout), afegim interaccions per fer-ho navegable quan es necessita testejar una idea per tal de validar-la i establir-la com la millor solució per als usuaris potencials.
Desenvolupament: a vegades és precís testejar nous evolutius d’un projecte que ja s’està desenvolupant (o bé redissenys d’una secció existent), i el prototip es realitza sobre els dissenys finals.
Bonus track L’eina de disseny col·laboratiu Figma permet crear ràpidament les interaccions entre pantalles del teu disseny i compartir el prototip amb un enllaç que es pot utilitzar fàcilment en un testeig desde qualsevol dispositiu. A més, disposa de tota una comunitat amb suport tutorial que t’ajudarà en els dubtes més tècnics a l’hora de fer servir l’eina.
Amb aquests conceptes ja més clars, t’animem a que els posis en pràctica en el teu equip, producte o idea. I si prefereixes que et guiem en aquest camí, ens ho pot fer saber i seiem junts.
