UI Design: 5 consigli per collaborare fra più designer

Premessa

Quando si affrontano progetti imponenti, caratterizzati da un numero elevato di interfacce da disegnare, impegnare un solo UI designer può generare delle tempistiche troppo lunghe. Nasce quindi l’esigenza di collaborare allo stesso progetto a più mani, in modo da ridurre notevolmente i tempi di realizzazione.
Tuttavia, disegnare la stessa app o lo stesso portale in 2 o più designer non è sempre facile. Spesso, il rischio a cui si va incontro è quello di creare un “prodotto Frankenstein”, che pecca di coerenza grafica o di layout. Non sempre è sufficiente confrontare i singoli lavori per limare le discrepanze.
Per esempio, nel momento in cui si cerca di unire diversi file, per ottenerne uno definitivo si incorre in problemi come la duplicazione di simboli o di stili. É per questi motivi che lavorare in tanti a uno stesso progetto richiede un’ottima coordinazione e soprattutto un buon metodo, in base al software di design utilizzato.

Ecco 5 consigli utili per affrontare progetti tra più designer:

1. Sfruttare le proprie risorse

Attualmente esistono diversi programmi per disegnare interfacce, fra questi spiccano sicuramente Sketch e Figma. Il secondo, in particolare, permette la collaborazione in real time fra più designer, un po’ come le web app della suite di Google. Tuttavia anche Sketch ha introdotto un suo cloud per aiutare la collaborazione, e dagli ultimi annunci dovrebbe implementare a sua volta la possibilità di lavorare in real time. 

Ogni azienda, deve scegliere un software che permetta al team di design di lavorare coordinato. In Antreem, utilizzando da sempre come software Sketch, abbiamo deciso di sfruttarlo al meglio, elaborando un flusso di lavoro volto a ridurre al minimo le incongruenze grafiche e far emergere il prima possibile eventuali errori.

Primo step di questo flusso è la realizzazione dei wireframe, fondamentali per ogni buon progetto di UX/UI design, in questo caso assumono ancora più importanza.
Servono infatti a individuare tutto il set di componenti da disegnare e inserire nel cloud, creando un unico component kit condiviso fra i membri del team. Con Sketch cloud esistono due possibilità: nel caso di una licenza personale avremo un singolo designer che assumerà il ruolo di “master”, diventando unico editor del component kit.
Nel caso della licenza team invece ogni membro può essere potenzialmente un editor in grado di modificare i componenti.

2. Creare un component kit

Un component kit è una libreria con tutti i componenti e le icone. Una volta caricata su un progetto cloud di Sketch può essere condivisa con gli altri membri del team che potranno aggiungerla alle proprie “libraries”. Chi costruisce il component kit, oltre a creare componenti e icone deve preoccuparsi di definire anche tutti i layer styles e i text styles. Infatti, il modo migliore per lavorare con Sketch è limitare il numero di componenti e sfruttare gli stili per declinarli in tutte le loro versioni. Per esempio, se decidiamo che un bottone può assumere 3 tipologie di colore riempimento (fill colour), 3 tipologie di colore bordi (border colour) non andremo a realizzare 6 componenti diversi. Bensì creeremo un unico componente “button” che potrà essere declinato in 6 versioni diverse attraverso i layer styles.

Una volta creato e condiviso il component kit, tutti i membri del team che lavorano al progetto dovranno costruire le loro interfacce sfruttando rigorosamente solo quei componenti. Ciò permette di realizzare un design uniforme e soprattutto di effettuare eventuali modifiche in pochissimo tempo. Basta infatti che venga modificato un componente dal file cloud originale per poterlo aggiornare in tutti i singoli file degli altri colleghi. Infatti, quando viene effettuata una modifica al “file master”, Sketch mostrerà una notifica a tutti coloro che hanno aggiunto e utilizzano quella libreria, mostrando quali componenti hanno subito modifiche e permettendo di aggiornarli con un semplice click.

Prima di avviare il lavoro di tutto il team, sempre per mantenere un design coerente, è importante definire anche delle regole di layout e di spaziatura fra i componenti.
Per farlo abbiamo realizzato prima una griglia di riferimento e in seguito 3-4 schermate archetipo, come esempio per tutte le altre. Infine, è buona norma costruire anche un artboard che fornisca un esempio con le possibili applicazioni degli stili sui componenti, evidenziando anche tutti i comportamenti da evitare.

3. Ridurre ulteriormente gli errori

Una volta impostato e avviato il lavoro come descritto in precedenza, è normale che, durante lo sviluppo del progetto, emergano nuovi componenti da aggiungere o nuovi stili. Per mantenere tutti i singoli file sempre allineati abbiamo organizzato uno stand up meeting fra i designer coinvolti, dove ogni membro del team porta al tavolo eventuali problematiche e una lista dei componenti da modificare o creare ex novo.
Un costante dialogo e confronto interno tra il team, durante l’intero processo di design, farà emergere fin subito possibili errori e incongruenze. Questo permette di ridurre notevolmente l’impatto dei rework.

4. Unire i lavori in un unico file

Al termine del progetto può essere utile raggruppare tutti i lavori in un unico file. Questo tipo di operazione quasi sempre crea dei problemi. Anche se i simboli utilizzati sono gli stessi, Sketch non riesce a riconoscerli automaticamente, e se si controlla nella sezione “Symbols” troveremo ogni simbolo duplicato. Per ovviare a questo problema consigliamo Camilo: un plugin di Sketch che permette di riconoscere tutti i simboli duplicati, e una volta avviato, li unifica, chiedendo all’utente quale dei simboli gemelli vuole utilizzare.

5. Collaborare con gli sviluppatori

Il processo di design si conclude con il passaggio allo sviluppo. Anche in questo caso, sfruttando appieno le potenzialità di Sketch, si è scelto di utilizzare Zeplin, un plugin nato per esportare schermate e componenti. Inoltre permette di scaricare tutti gli assets grafici di progetto condividendo con gli sviluppatori le specifiche di color palette e gli stili di testo.
Grazie a Zeplin i developers hanno la possibilità di estrapolare informazioni sul codice CSS e HTML (o altri linguaggi) del layout di schermata e dei singoli componenti di design. Tutto ciò facilita il lavoro dello sviluppatore, garantendo la corrispondenza tra i mockup rilasciati dai designer e lo sviluppo della soluzione.
Ne consegue un risultato preciso e curato nei dettagli, che risponde appieno alle esigenze iniziali del cliente.

Conclusioni

I passaggi appena descritti non rappresentano l’unica modalità per lavorare e collaborare a un progetto dentro un team di design. Esistono diverse soluzioni sia a livello di software che di flusso di lavoro. Quelle descritte sono un insieme di best practice che abbiamo elaborato in Antreem, frutto dell’esperienza di più progetti. Da queste esperienze abbiamo capito l’importanza di creare un flusso di lavoro e di condividerlo fra tutti i componenti del team, riuscendo così a garantire una migliore produttività e qualità di progetto.