Il nuovo tool di Adobe è uno strumento semplice ma potente per la creazione di prototipi di interfacce grafiche. Performante e preciso, Adobe XD permette di progettare i layout grafici di siti web e app con supporto al ridimensionamento responsivo, alle animazioni e con molte integrazioni (Slack, Jira, Microsoft Teams, ecc.). A differenza del suo diretto rivale, Sketch, esiste una versione “base” completamente gratuita.

In questa breve recensione scopriremo:

  • Perché utilizzarlo per la realizzazione dei nostri prototipi
  • Quali sono le caratteristiche più interessanti
  • Come muovere i primi passi

Perché usare Adobe XD

Se non hai mai provato uno tool per la progettazione delle interfacce grafiche per siti web o app, questo software è un buon punto di partenza. È abbastanza facile e veloce, soprattutto se si ha familiarità con le applicazioni Adobe, prendere confidenza con l’ambiente grafico. La curva di apprendimento è sufficientemente “ripida”, per cui appena apprese le basi sarete subito produttivi. Come già detto la versione “base” è gratuita, seppur con qualche limitazione. Ciò nonostante, gli strumenti messi a disposizione sono completi e permettono fin da subito di realizzare i vostri layout.

Se, al contrario, sei un utente esperto potresti trovare molto comoda l’integrazione di XD con i programmi della suite Abode (quali Photoshop e illustrator) e il catalogo di risorse ben fornito. Quest’ultimo mette a disposizione, tra l’altro, un kit per integrare il framework front-end di Amazon Alexa, i template per iOS completi di glifi, controlli, ecc. Come vedremo con qualche esempio più avanti, l’integrazione con i programmi Adobe è, ovviamente, molto curata e ben realizzata

Riassumendo, indipendentemente dal livello di conoscenza e di utilizzo di tool dedicati allo sviluppo grafico delle interfacce di app o siti, Adobe XD offre sempre delle soluzioni utili.

Caratteristiche di rilievo per la prototipazione

Modifiche vettoriali

Prima ho accennato all’integrazione con i programmi della suite Adobe CC. Se utilizzate Adobe Illustrator per creare i vostri vettoriali, Adobe XD vi permette, ad esempio, di “ritoccarli” una volta importati.

Adobe XD - modifiche vettoriali
Modifiche vettoriali in Adobe XD

Repeat grid

Presente fin dalla prima versione ufficiale (lanciata il 18 Ottobre 2017), è una delle feature più apprezzate.

Una volta creato un gruppo di oggetti (nel mio esempio un gruppo contenente una immagine di profilo, il nome e cognome e un sottotitolo) possiamo velocemente creare una griglia ripetendo il gruppo. Gli spazi vengono calcolati in automatico e sono modificali a piacimento.

Adobe XD - Repeat grid
La funzione repeat grid di Adobe XD in azione

Prototipazione e anteprima a schermo intero

Per venire incontro alle esigenze di costruire layout responsivi che si adattano a diversi dispositivi, Adobe XD ha uno strumento apposito. È possibile, infatti, prototipare per diversi dispositivi e collegare le varie artboards tra loro stabilendo le interazioni.

Successivamente si può avviare una presentazione a schermo intero che permette di vedere ogni artboard a dimensione reale, interagendo con i contenuti.

Adobe XD - interazione prototipi
Interazione tra prototipi di viewport diverse (desktop a 1920px e iPhone 6)

Ridimensionamento responsivo

Adobe XD - abilitare ridimensionamento responsivo
Tasto per abilitare il ridimensionamento responsivo

Sempre in ambito responsivo, ecco un’altra feature molto interessante di Adobe XD. Inseriti i contenuti di testo, le immagini, i video e tutto ciò che vogliamo mostrare nel nostro layout di pagina, possiamo testare live il comportamento responsivo.

Abilitando la funzione per il ridimensionamento responsivo sull’artboard che ci interessa, possiamo rimensionarla e vedere i contenuti restringersi proprio come accadrebbe in una finestra del browser.

Il vantaggio è presto detto: possiamo prevedere prima ancora della fase di sviluppo a quali risoluzioni i contenuti presenteranno delle criticità, pensando già da subito a come risolverle.

Adobe XD - ridimensionamento responsivo
Ridimensionamento responsivo di Adobe XD in azione

Controllo vocale

Ecco lo strumento ideale per chi vuole integrare il controllo vocale nelle proprie app. Tramite il controllo vocale possiamo associare un comando che ci consentirà di muovere tra i vari layout, simulando quella che diventerà l’interazione reale con gli assistenti vocali.

Adobe XD - controllo vocale
Attraverso l’interfaccia per la prototipazione si possono aggiungere comandi vocali agli assets o alle artboards

Primi passi con Adobe XD

Fino ad ora abbiamo visto per chi Adobe XD può essere utile e quali caratteristiche interessanti, tra le tante altre, offre per aiutare nello sviluppo dei layout grafici per siti, app ecc.

Ti sei convinto a provare Adobe XD? Ecco da dove iniziare! Per prima cosa scarica XD dal sito ufficale: https://www.adobe.com/it/products/xd.html

Una volta installato e avviato diamo uno sguardo alla schermata iniziale. Molto semplice e minimale, ci da’ la possibilità di sceglie al volo su quale viewport iniziare a sviluppare i layout di pagina.

Adobe XD - schermata iniziale
Schermata iniziale di Adobe XD

Scelta la viewport si passa al disegno. L’interfaccia si presenta un po’ scarna all’inizio, ma non deve spaventare. All’occorrenza tutte le funzioni utili si mostreranno nelle barre ai lati, facendoci apprezzare lo stile pulito e minimale.

Tramite lo strumento “Artboard” puoi creare diversi layout su cui iniziare a sviluppare l’interfaccia grafica. Volendo puoi scegliere tra quelli presenti nella raccolta di predefiniti.

Adobe XD - artboards per viewport differenti
In questa immagine, messi insieme, i layout per schermo largo 1920px, iPad e iPhone 6/7/8 e Xr/Xs

Per aiutarti nello sviluppo grafico puoi anche impostare una grid, modificandola a tuo piacimento. Nella barra laterale potrai impostare il numero di colonne, la distanza, la larghezza della singola colonna ecc. Se preferisci, al posto delle colonne, puoi utilizzare la grid a quadri.

Adobe XD - sistema di grid custom
Se lo desideri puoi utilizzare una grid per lo sviluppo grafico, completamente personalizzabile

In conclusione, Adobe XD è uno strumento che sa come dimostrarsi utile per versatibilità e facilità d’uso, con una curva di apprendimento sufficientemente bassa. Il mio consiglio è di scaricare la versione gratuita e provare ad utilizzarlo. Se usato in modo completo è in grado di dare molte soddisfazioni!

Se desideri approfondire gli aspetti di questa breve recensione/guida introduttiva, ecco il link alla guida introduttiva ufficiale di Adobe, con tanto di esercitazioni:

https://helpx.adobe.com/it/xd/get-started.html