Schizzo contro Photoshop. Confessioni di un designer dell'interfaccia utente.

L'obiettivo di questo articolo è presentarvi un nuovo strumento di progettazione grafica apparso di recente: Sketch. Prima di tutto, voglio chiarire che non lo faccio non sono azionista della start-up dietro Sketch.

copertina-schizzo-photoshop

Nel 2017, perché i designer dell'interfaccia utente (ancora) usano Creative Cloud?

Uso Creative Suite dalla versione 5.0 di Photoshop. Ho potuto seguire l'evoluzione di questo software e da tempo ho una strana sensazione: Photoshop non ha più soddisfatto pienamente le mie aspettative come designer UX/UI. Avevo sentito parlare di Sketch ma pensavo che non avrebbe "fatto il lavoro" così come il mio fedele amico Photoshop. Ma era prima! Il passaggio è avvenuto nell'ambito di una missione in cui stavo lavorando come "team" con un designer UX. Stavamo affrontando un grosso problema: dovevamo iterare molto rapidamente su un gran numero di schermi.

Utilizzo di uno strumento di progettazione UX/UI comune

All'inizio il designer UX ha prodotto i wireframe sul suo strumento di prototipazione, poi è arrivato il mio intervento sull'interfaccia utente con Photoshop. Solo che prima di poter "creare" il "wireframe" ho passato (troppo) tempo a ricreare gli elementi in Photoshop. L'osservazione è stata semplice e chiara: l'uso di due strumenti ha rallentato la nostra consegna. La soluzione di fondo: l'uso di uno strumento comune, ma persisteva ancora una domanda: quale?

Ci sono state proposte due soluzioni: usare Photoshop o Sketch. La nostra scelta è ricaduta naturalmente sulla seconda per un semplice motivo: l'aumento delle competenze di parte della coppia (in questo caso io l'UI designer) su Sketch sarebbe più rapido (e più naturale) rispetto all'aumento delle competenze dell'UX designer su Photoshop . Questa scelta ha dato i suoi frutti perché il nostro consegna raggiunto una velocità maggiore. Visto che tra me e Sketch sta nascendo una storia d'amore... 

I 10 motivi per cui Sketch è diventato il mio compagno

1/ Sketch opta per Less is more in termini di interfaccia

schizzo-3-4-materiale-design-icona

La mia prima impressione mi ha sconcertato. Abituato alla ricca interfaccia di Photoshop, ho trovato Sketch un po'”economico“. Non lasciarti distrarre dalla purezza della funzionalità, ti ci abituerai molto (molto) rapidamente. Come designer dell'interfaccia utente, siamo abituati a interfacce software con molte tavolozze degli strumenti. LL'interfaccia è ordinata ed è qui che sta la sua forza. Abbiamo solo il "minimo vitale" per progettare le nostre interfacce.

Vedo due vantaggi in questo:

  • Il primoR: più spazio per i designer. Niente più tavolozze degli strumenti che arrivano sui tuoi piani di lavoro.
  • Il secondo : sha reso più facile l'apprendimento: pochi strumenti, quindi molto veloce per iniziare. 

2/ Uno strumento UX/UI comune

sketch_collab

Secondo me, l'interesse principale di Sketch è che offre la possibilità di essere utilizzato nel flusso di lavoro UX/UI. UX designer e UI designer (finalmente) hanno uno strumento comune che consente a tutti di continuare a lavorare sui propri problemi. L'UX lavora sul design: ad esempio produce un V01. L'interfaccia utente parte da questa versione per creare una V02. E così via in base al numero di iterazioni. Ma chi dice lavoro collaborativo dice anche organizzazione.

Insieme, abbiamo implementato una nomenclatura precisa per ottimizzare la condivisione dei file. Un suggerimento per la formulazione: date_filename_versionXX. Ogni nuova iterazione corrisponde a una nuova versione. Efficienza pratica e formidabile!

4/ Sketch utilizza il linguaggio mac in modo nativo

Nativo, hai detto nativo? Vi risparmio anche considerazioni tecniche: ricordatevi che Sketch è nativo di macOS. Pertanto, è di una velocità di esecuzione impressionante.

Un altro vantaggio è che incorpora funzioni iOS gratuite come il controllo delle versioni, il backup automatico e il rendering (iper) preciso dei caratteri. Tutte le operazioni sono non distruttive: le combinazioni e le trasformazioni di forme vettoriali sono reversibili. Pratica !

5/ La ricchezza dei plugin e una community attiva

1-ODXOQLP-NVJW_7EHDOF-HG

La community dietro Sketch è molto ampia e molto attiva. Ad esempio, l'aggiunta di simboli che sono apparsi in V03 è avvenuta grazie al feedback degli utenti.

E in UX Republic, apprezziamo quando i fornitori di software sono incentrati sull'utente, non sul prodotto. Sketch è stato inizialmente un MVP (Minimum Viable Product). Il suo team, ascoltando i suoi utenti, sviluppa futuri aggiornamenti. Un approccio che pratichiamo in UX e che ha molti vantaggi: il software si evolve in base alle esigenze e agli usi degli utenti.

https://www.sketchapp.com/extensions/plugins/

6/ Esportazione di asset

dirigibile

La produzione degli asset diventa facile e veloce grazie al plugin Zeplin. Questo strumento è condiviso tra te e gli sviluppatori. TTutte le tue risorse saranno generate e utilizzabili dal team di sviluppo.

7/ Schizzo + Zeplin e Slack

Zeplin può collegarsi a Slack. Pertanto, l'intero team può seguire le esportazioni di asset in tempo reale. Ti spiego il principio: una volta finalizzato uno schermo, lo esporto su Zeplin. Viene visualizzata una notifica nel #design del canale del team di sviluppo. Pertanto, i rischi di errori relativi al controllo delle versioni sono quasi nulli. Il guadagno: più tempo e meno errori.

8/ Uno strumento a un prezzo interessante

Una licenza da $ 99, sì avete letto bene! È più che interessante come prezzo rispetto a una licenza Adobe.

9/ Vettore completo e CSS

Uno dei punti di forza di Sketch è anche il suo approccio 100% vettoriale: pratico, semplice e veloce. Allo stesso modo, lo schizzo è progettato per creare l'interfaccia utente: tutto ciò che progetti può essere fatto in HTML/CSS. È inoltre disponibile una funzionalità di generatore di codice.

10/ Specchio per schizzi

Mirror-png8

Come il suo rivale, Sketch ha sviluppato un visualizzatore per iPhone: specchio per schizzi. È uno strumento indispensabile per la progettazione mobile.

Un ultimo argomento

Infine, apprezzo particolarmente i simboli. Forse perché me li ricordano filmati in Flash o Oggetti avanzati per Photoshop. Ancora una volta, sono più semplici, più pratici, più leggeri di un prodotto Adobe Suite.

strati@2x

Per finire di convincerti

Nonostante la sua giovane età, Sketch ha tutto un grande (o quasi). Le sue regolari evoluzioni suggeriscono una modalità collaborativa più avanzata in cui UI e UX potrebbero funzionare contemporaneamente sullo stesso file. Se ti è piaciuto questo articolo, ti invito a consultare questo articolo che è un ottimo complemento a questo. e che corrobora questa tendenza che osserviamo nelle nostre varie missioni presso UX Republic. E tu cosa ne pensi? Discutiamo su@ux-repubblica
https://www.invisionapp.com/blog/sketch-vs-photoshop/
Jérôme Fiorese, UX-Activist @girolamo