Benvenuto XD. Arrivederci Photoshop.
Ovvero come mi sono convinto, e cercherò di fare lo stesso con te, ad abbandonare (quasi) definitivamente Photoshop per passare ad XD.
Ho sempre avuto difficoltà a fidarmi di strumenti troppo “giovani”. L’investimento di tempo per riuscire a maneggiarli professionalmente e con la stessa agilità di altri programmi mi ha spesso bloccato in partenza.
Nei miei 15 anni di attività, cioè tra università e lavoro, sono sempre stato accompagnato da due certezze: Photoshop come software principale e Aruba per i servizi web, azienda della quale sono orgogliosamente consulente di UX/UI.
Da diversi mesi ho perso la prima di queste certezze, e non me ne sto pentendo.
Photoshop è negli anni diventato sempre di più uno schiacciasassi, distruggendo concorrenti e appesantendosi continuamente con nuove funzioni.
Tanti professionisti sono nel tempo saliti su questo “mezzo pesante” scansando i legittimi guidatori, i fotografi. Alcuni, soprattutto i web designer, ne hanno addirittura preso la guida per molto tempo. Un guida, quest’ultima, eccitata da un cruscotto incessantemente accessoriato ma allo stesso tempo disturbata da una pesantezza sempre più insostenibile.
Il lavoro dell’ UX/UI designer è però negli ultimi anni diventato così specifico da rendere necessari strumenti più leggeri e ottimizzati alle progettazioni web e app.
Adobe XD ha le caratteristiche per diventare indispensabile. Reso necessario, non si può negare, per Adobe dall’incombenza di Sketch.
L’aspettativa perciò è alta ma con tanta fiducia sulla forza di Adobe di seguire e migliorare sempre i propri prodotti di punta, e XD ad oggi è uno di questi.
Una grande azienda alle spalle però non garantisce da subito tutte le ottimizzazioni che un software dovrebbe avere. XD è nato con ottimi presupposti ma non si possono non notare diverse caratteristiche ancora acerbe.
In questo articolo analizzo le principali funzioni di quello che, spero, diventi il nostro software per il presente mettendole al confronto con il passato Photoshop — qui cercherò di convertirti! — ma annotando anche le possibili migliorie che ci possiamo aspettare in futuro da mamma Adobe.
PROTOTIPO
Passato — Con Photoshop nemmeno prendiamo in considerazione la possibilità di creare un prototipo navigabile, obbligati all’utilizzo di strumenti terzi esterni (InVision, Axure, HTML mappati, ecc..).
Presente — Con XD la prototipazione è interna ed è immediato lo switch tra l’area di progetto e quella per l’interattività. Purtroppo, il tutto è ancora un po’ acerbo: appena meno ridicolmente banale come InVision ma neanche lontanamente completo come Axure.
Futuro — La complessità di Axure permette di creare prototipi molto precisi, senza avere conoscenze di programmazione. La speranza è che XD in futuro si avvicini a quel livello di dettaglio, magari sfruttando i meccanismi che rendevano Flash (nostalgia canaglia) così facile nel fare cose complesse.
SPECIFICHE DESIGN
Passato — Inviare il .PSD agli sviluppatori è una sorta di liberazione che certifica la fine del lavoro. Ma contemporaneamente l’inizio dell’odio nei tuoi confronti da parte del team di sviluppo che è obbligato ad avere Photoshop aggiornato, magari su computer non molto potenti, ed a spulciare file da centinaia di MB. Odio attenuato con plug-in come Zeplin.
Presente — Adobe XD permette la pubblicazione online sia del prototipo navigabile che delle schermate corredate di specifiche di stile (colori, font, spazi, dimensioni, icone scaricabili).
Futuro — La doppia demo, quindi il doppio link con doppia password, non è il massimo dell’ottimizzazione. È vero che premendo Shift si possono rendere navigabili anche le specifiche ma, per esempio, i commenti sulle schermate rimangono separati tra le due demo e la visione d’insieme di tutte le tavole c’è solo nella demo con specifiche. L’ optimum sarebbe avere un unico link, diversificato da variabili, con switch interni per nascondere/mostrare le specifiche stilistiche; per esempio come Axure fa con le opzioni di visualizzazione.
Inoltre sarebbe importante, per evitare di mettere click forzati, che fossero visibili anche quelle tavole non collegate ad altre, per esempio le varianti (OK/KO) di una stessa schermata (sarò ripetitivo ma, vedi la gestione dei Casi di Axure).
RIPETI GRIGLIA
Passato — Gestire in Photoshop le modifiche ad un gruppo di elementi ripetuti, per esempio un listato in un’app, non è certo il massimo dell’immediatezza. Soprattutto se a cambiare sono le altezze e non solo testi e Oggetti avanzati.
Presente — Con XD puoi creare un singolo gruppo di elementi e poi farli ripetere in orizzontale o verticale dal software, decidendo facilmente la spaziatura tra l’uno e l’altro. Le modifiche di testo o immagine, per differenziare ogni item, sono immediate e ovviamente il cambio di stile di un elemento si ripete su tutte le sue copie.
Futuro — Spesso in un listato non basta cambiare immagine o testo ma anche — magari solo in alcuni items — icone, stile o aggiungere altri elementi grafici. Qui si vede il più grosso limite di Adobe XD, che ancora non permette la sostituzione degli elementi interni tramite simboli, come invece fa molto bene Sketch.
SIMBOLI
Passato — Gli Oggetti avanzati in Photoshop sono stati una delle funzioni più attese per i web designer (correva il 2005), certo in Flash c’erano i Simboli dal 1997, ma va beh.
Presente — Adobe XD gestisce i simboli in maniera molto simile a Photoshop, mettendoli inoltre tra gli Assets (li vediamo dopo) per sapere se e quanto sono stati usati nei layout.
Futuro — La gestione è ancora acerba e per la maturazione basterebbe copiare da Photoshop. In XD manca ad esempio un’azione Nuovo simbolo tramite Copia, la possibilità di collegamento a file esterni e soprattutto la modifica del colore dall’esterno del simbolo senza che cambino tutte le copie (vedi Stili di livello o vedi come fa Sketch).
ASSETS
Passato — In Photoshop sono state introdotte le librerie della Creative Cloud nel 2016, con la potenza di fuoco di essere comuni a tutti i software Adobe.
Presente — XD gestisce gli Assets allo stesso modo, ovvero per colori, formattazione testi e simboli.
Futuro — Certo, sarebbe utile se entrassero anche questi nella Cloud, soprattutto per due motivi: il foto ritocco di XD è nullo e quindi Photoshop serve ancora; la gestione delle forme vettoriali, anche a mano libera, è buona ma per cose molto complesse serve sempre Illustrator.
LIVE PREVIEW SUL DEVICE
Passato — Adobe pochi anni fa aveva pubblicato sugli store l’app Adobe Preview, molto utile per vedere l’anteprima sui device durante la progettazione di app. Peccato che a fine 2017 abbia deciso di cancellarla facendo inoltre in modo che dalla CC 2017 non fosse nemmeno più possibile usarla. Un’alternativa può essere Skala Preview, ma è ancora un altro software per la gioia della tua RAM.
Presente — Adobe XD ha un simulatore dove testare le interazioni (il tutto volendo registrabile in un video) e sugli store l’app dedicata che permette una live preview, direttamente sul device, immediata e molto fluida nelle animazioni di interazione.
Futuro — Servirebbe maggiore considerazione del responsive design (magari pure nel Resizing degli elementi come fa Sketch). Ovvero se uso l’app di preview contemporaneamente con iPhone e iPad mi aspetterei di vedere su ogni device la schermata declinata e non la stessa identità (quindi fuori formato in uno dei 2 casi).
DIMENSIONE FILE
Passato — La nota dolente di Photoshop è sempre stato, peggiorando di anno in anno, il peso dei file. Per una quarantina di tavole, per un’app di media grandezza con poche immagini, si arriva facilmente sugli 80/100 MB.
Presente — Adobe XD in questo senso è una meraviglia. Per la stessa quantità di schermate se si arriva a 2 MB è già tanto.
IMPORTAZIONE .PSD
Presente — Niente paura se un progetto l’hai iniziato con Photoshop e vuoi passare a XD. Se in PS hai lavorato con le Tavole da disegno l’importazione in XD sarà immediata e molto precisa (tranne forse per le Maschere di ritaglio).
Futuro — Se XD riuscisse a riconoscere gli Oggetti avanzati e trasformarli in Simboli sarebbe un grande aiuto per convertire più designer.
CONCLUSIONI
Smettere di usare Photoshop per un UX/UI Designer è fattibile, facile e i miglioramenti nella velocità di lavoro e di condivisione sono notevoli.
Vero è che ad oggi Sketch è un po’ più avanti di Adobe XD. C’è poco da fare. Ma infatti sarebbe ìmpari un paragone tra questi due software. Oggi! Ma domani?
A favore di XD c’è da dire che è un po’ più veloce e ha la potenzialità del team di sviluppo Adobe, che rilascia praticamente ogni mese ottimizzazioni consistenti.
Soprattutto se sei un utente Windows (Sketch c’è solo su Mac), o se sei già abbonato ad Adobe Creative Cloud, XD può svoltare notevolmente il tuo lavoro e la velocità con cui ci si prende la mano non è una scusa per non provarlo.
Cosa ne pensi? Ti ho convinto?
Giovanni Ghirardi
Mi occupo di interactive design ed usabilità, attualmente con base a Roma, per diverse agenzie digitali in Italia e all’estero. Le attività che svolgo vanno dalla progettazione di prodotti digitali alla pura consulenza su come ottimizzare l’esperienza utente in un sito web o un’app.
Portfolio e contatti su www.giovannighirardi.it