La collaborazione tra designer e developer non è sempre facile ma è essenziale per il successo di un progetto, oltre che per quello del team. Vediamo come Zeplin e Sketch ci aiutano a risparmiare tempo e soprattutto a facilitare il passaggio di consegne in questi due step di sviluppo (qui trovi la seconda parte dell'articolo).
A proposito di Sketch
Come molti sapranno Sketch è un
must-have per i designer, questo
software si concentra in particolare sull'interfaccia e sul design di icone; dispone infatti di template artboards con dimensioni preimpostate specifiche per varie risoluzioni dal Web ai dispositivi mobili e icone, alle funzionalità che aiutano a migliorare il processo di progettazione, il tutto con precisione pixel-perfect.
Si tratta quindi di un
sostituto molto capace di Photoshop, anzi è proprio molto meglio in quanto si tratta di un'
app di disegno vettoriale. Questo significa che ogni forma prodotta dal designer può essere ridimensionata senza perdere nitidezza (magari in SVG).
In questo modo il designer non dovrà preoccuparsi delle dimensioni delle proprie produzioni in quanto potranno essere scalate facilmente e visualizzate in maniera perfetta anche su uno schermo retina o anche a Dpi più alti.
La necessità di style guides
Designer, sviluppatori e project manager lavorano spesso con tempi e progetti compressi contemporaneamente. Un team deve essere in grado di rispondere rapidamente al feedback sui propri prodotti da parte di clienti, project manager e sviluppatori. Ogni revisione secondaria nell'interfaccia utente o UX deve essere riflessa nella documentazione, in modo che i progettisti e gli sviluppatori dispongano sempre delle informazioni più recenti e non si crei confusione.
Una
guida di stile garantisce che il progetto non incontri seri problemi quando si passa all’implementazione iniziale. È fondamentale assicurarsi che tutte le specifiche siano accurate per i loro progetti, poiché averne una imprecisa significa che gli sviluppatori dovranno fare affidamento sulle loro intuizioni o ipotesi, quando costruiscono l'app o si rivolgono alla fonte del design per ottenere risposte alle loro domande.
Trasferire tutte queste informazioni manualmente agli sviluppatori può causare vari mal di testa e malumori e di solito richiede molto tempo, a seconda dell'estensione dei progetti.
Una overview in tre step: designer, developer e project manager
Quando ci si trova ad affrontare lo s
viluppo completo di un progetto il team è composto da designer, sviluppatori e project manager e ogni area ha le sue caratteristiche particolari.
Designer
Quando un designer prepara un layout, lo step successivo è il passaggio di consegna allo sviluppatore.
Quello che si fa solitamente è esportare alcuni PNG (o SVG a seconda della piattaforma di destinazione) e se necessario, preparare una specifica con tutte le annotazioni.
Le specifiche, che intenzionalmente dovrebbero essere totalmente esplicative, possono essere stressanti o non sufficienti in un grande progetto e la revisione di un layout dell'interfaccia può molto spesso portare a delle modifiche anche drastiche.
Una guida di stile tradizionale sarà quasi obsoleta e soprattutto lo sarà quasi subito.
Oltretutto questo processo è noioso e eseguirlo manualmente richiede molto tempo, inoltre ogni designer lo fa in modo diverso dagli altri, confondendo ancora di più il developer che magari si trova a ricevere produzioni di interfaccia da vari clienti e fonti esterne.
La maggior parte dei progettisti impiega più tempo a creare specifiche che a progettare effettivamente, dovendo spesso esportare manualmente tutte le loro risorse per gli sviluppatori.
Se volessimo salvare il tempo del progettista, basterebbe dirgli di tralasciare tutte le problematiche di comunicazione in fase di consegna e concentrarsi esclusivamente sul processo di progettazione. Ogni minuto che un progettista dedica alla revisione della documentazione è un minuto perso che potrebbero spendere davvero migliorando e perfezionando la grafica, l'esperienza e le interazioni.
Sviluppatori
L’
ispezione delle specifiche è un processo triste e doloroso.
Gli sviluppatori hanno bisogno, dai progettisti, di ogni piccolo dettaglio contenuto nel design o, nel peggiore dei casi, sono costretti a reperirlo da soli in Photoshop o Sketch.
Solitamente devono convertire manualmente tutte le dimensioni delle risorse in base ai requisiti della piattaforma (ad esempio, convertendo i pixel in pixel indipendenti dalla densità, pixel indipendenti dalla scala, punti, ecc.).
Non avendo abbastanza informazioni dettagliate sul design visivo e dovendo indovinare, creano incongruenze visive, rework inutili e di conseguenza una considerevole perdita di tempo e di focus sul core dello sviluppo.
Anche quando alla fine lo sviluppatore ha implementato con successo il design, c'è ancora la possibilità che il progettista apporti una modifica richiesta dal committente e, a quel punto, lo sviluppatore dovrebbe ispezionare manualmente il progetto di nuovo e capire che cosa è cambiato esattamente. Questo processo sicuramente è una sofferenza e manca totalmente di flessibilità.
Project manager
I project manager sono sempre
alla ricerca di tecniche e tool per migliorare la collaborazione tra designer e sviluppatori, poiché tutti i membri del team dovrebbero trovarsi sulla stessa pagina per ogni modifica del progetto.
Avendo spesso a che fare con team remoto, è chiara la
necessità costante di uno spazio online per collaborare e convogliare un unico canale di comunicazione.
I moderni strumenti di comunicazione come Slack rendono possibile ciò, ma i project manager devono ancora monitorare i progressi e fornire feedback su cosa è cambiato e dove.
Hanno sì familiarità con allegati disordinati e feedback provenienti da più luoghi, ma hanno bisogno di capire molto rapidamente lo stato attuale del prodotto e devono stare al passo con il processo di progettazione esaminando le modifiche, confrontando visivamente le versioni affiancate e discutendone in tempo reale in un unico punto con ambedue le parti in infinite call, condivisioni schermo e misunderstanding.
Sincronizzazione di designer e sviluppatori con collegamenti meno complicati
La creazione di specifiche di progettazione comporta:
- l'identificazione di colori
- valori x e y
- caratteri
- pesi di testo
- distanze
- posizioni
E una serie di altre caratteristiche delle risorse, senza dimenticare che ogni asset ne ha alcune che devono essere registrate.
Si sente dunque la
necessità di uno strumento per colmare il divario tra le fasi di progettazione e codifica dello sviluppo, che semplifichi e acceleri le specifiche e il processo e che fornisca un unico punto di ingresso per tutte le lavorazioni legate al design, in modo che tu (designer, sviluppatore o manager) non debba pensare a dove trovare l'ultima versione dell’elaborato.
Ciò comporterà la realizzazione e la consegna dei prodotti più velocemente.
Per fortuna, gli strumenti esistono già per aiutare con questo, ne esistono vari. Ognuno di essi dati i documenti Photoshop o Sketch produce una specifica per gli sviluppatori, inclusi frammenti di codice e risorse immagine. Questi strumenti tracciano anche i cambiamenti tra le versioni del design.
La prossima settimana entreremo nel dettaglio spiegandovi non solo le
features principali di Zeplin ma come nel concreto possa aiutare a snellire e velocizzare il workflow di sviluppo di un prodotto digital (
qui trovi la seconda parte dell'articolo).