Adobe XD è un software per la creazione di prototipi di interfacce utenti come App, portali e siti web. Per saperne di più puoi leggere l’articolo introduttivo sul programma.
Strumenti e Interfaccia di Adobe XD
Questo software consente la creazione di prototipi per vari tipi di dispositivi. Come mostrato nell’immagine, puoi selezionare i dispositivi disponibili o inserire le dimensioni preferite.
Sezioni, Interfacce e Modalità di Utilizzo
Il software offre diverse modalità di utilizzo: Progettazione, Prototipo e Condividi.
Iniziamo esaminando la Progettazione: questa è la sezione principale dove vanno impostati tutti le artboard e gli elementi che le compongono. XD fornisce tre interfacce molto utili per una migliore organizzazione: Librerie, Livelli e Plugin.
- Librerie: Questo è un elemento essenziale, a differenza degli altri programmi Adobe, utilizzato per organizzare il lavoro in modo efficace. La libreria è divisa in colori, stili di carattere, componenti e video. In pratica, è possibile salvare nella libreria qualsiasi stile che si utilizza e riutilizzarlo a piacimento.
- Livelli: Funziona esattamente come negli altri software Adobe.
- Plugin: Sono estensioni del programma che aumentano la produttività e, in alcuni casi, aggiungono funzioni molto utili. Per scaricarli, basta andare su Adobe Creative Cloud nella sezione “Plugin”.
Strumenti di Adobe XD
Se conosci Adobe, ti sentirai a tuo agio. XD presenta un numero limitato di strumenti, più adatti alle attività principali del programma.
- Selezione: Utile per evidenziare un elemento ed effettuare modifiche generiche.
- Forme: Sono disponibili tutte le forme essenziali come quadrati, triangoli e ovali.
- Penna: Funziona in modo identico alla penna di Illustrator; tuttavia, è consigliabile non utilizzarla per elementi complicati.
- Testo: Crea caselle di testo personalizzabili.
- Artboard: Forse lo strumento più importante; XD si basa sul passaggio da un’artboard all’altra, creando interazioni.
Sul lato destro dello schermo troverai le proprietà degli strumenti che utilizzi.
Leggi l‘articolo sugli strumenti avanzati per approfondire!
Prototipo
In questa modalità è possibile creare interazioni, animazioni, collegamenti e altro. Per spiegare il suo funzionamento, proviamo con un piccolo esempio. Supponiamo di voler creare una semplice animazione. Prima di tutto, duplica o crea una secondo artboard delle stesse dimensioni della prima.
Ora, inserisci un triangolo in una artboard e uno ruotato di 90 gradi nell’altra. Una volta entrati nella modalità di prototipazione, seleziona un triangolo e noterai comparire l’icona del “+”. Prova a trascinare tenendo premuto fino a portarlo sulla seconda artboard; per impostazione predefinita, XD creerà una transizione da un’artboard all’altra al clic con il triangolo.
Spostati al pannello laterale di destra e seleziona dal menu a tendina “animazione automatica” e il gioco è fatto; avrai una piccola animazione di rotazione del triangolo.
Per visualizzare il risultato, fai clic sull’icona “play” in alto a destra, comparirà una finestra di anteprima; poi fai clic sul triangolo.
Condividi
Adobe XD è un software che consente la creazione di interfacce preliminari, utili per conferire un aspetto grafico e un’identità visiva al progetto. Tuttavia, con XD non è possibile creare una vera e propria app o sito web. Per questo motivo, il designer che ha creato il prototipo deve poter condividere il proprio lavoro con vari manager e sviluppatori che implementeranno il progetto. La modalità “Condividi” crea un link che consente a chiunque di visualizzare il progetto, interagirvi e lasciare commenti. Non richiede registrazioni o abbonamenti. Se selezioni il link per gli sviluppatori, è possibile condividere anche gli stili del progetto e persino il codice CSS generato.
