Adobe XD: un interessante software in beta da tenere d’occhio

Se non avevate mai sentito parlare di Adobe XD prima d’ora, state leggendo l’articolo giusto. In poche righe, vi guiderò alla scoperta di questo innovativo software dedicato alla prototipazione delle pagine web e delle app, che però necessita ancora di alcune migliorie.

Nato nel 2015 da un ambizioso progetto Adobe col nome di Project Comet, è diventato poi Adobe Experience Design CC (abbreviato in Adobe XD come da titolo) ed è pensato per chiunque voglia progettare con facilità interfacce, strumenti per testare i prototipi in versione desktop/mobile visualizzabili via web (tramite browser) e con tool per l’esportazione in formato web, iOS e Android. Può essere usato in due modalità principali: “Design”, con strumenti che permettono di progettare con il drag & drop, e “Prototype”, con funzioni che consentono di legare le varie schermate ed elementi che l’utente utilizzerà di un’applicazione.

Ovviamente il tutto unicamente a livello di design, senza entrare quindi nel dettaglio dello sviluppo vero e proprio, e senza dover necessariamente creare layout affidandosi a strumenti più completi ma complessi da gestire come Illustrator o Photoshop.

Cosa ci piace

Il software è attualmente in beta e completamente in inglese, disponibile per OSX e per Windows (ma pare che giri solo su Windows 10) e, nonostante sia ancora in fase di sviluppo, riceve aggiornamenti costanti e svariate migliorie ad ogni release. L’ultimo aggiornamento ad esempio introduce i livelli di posizionamento degli oggetti, molto comodi e funzionanti grossomodo come in qualsiasi altro software Adobe, oltre a continuare a migliorare gli strumenti base del programma. Grossissima comodità: poter agilmente aggiungere elementi come bottoni, immagini featured, box ecc., partendo dalle librerie esistenti e andando a modificarne gli elementi. All’interno dei preset sono già disponibili i kit completi delle UI con gli elementi di Apple iOs, Google Material e Microsoft Windows, ma nulla vi vieta di crearne di nuove o di andarne a recuperare altre già fatte da dei template free, facilmente reperibili in rete. Altro grossissimo vantaggio del programma è la possibilità di inserire gli oggetti nelle librerie dei simboli per poter utilizzare più istanze degli stessi oggetti andando a variare solo la mastro per apportare le modifiche su tutto l’elaborato. Una volta completato il nostro layout, possiamo poi passare alla fase di prototipazione dove andare ad inserire sostanzialmente una sorta di “mappatura della navigazione” ai nostri elementi: in pratica, se ad esempio nel layout abbiamo inserito un bottone che ci rimanda ad una data pagina, possiamo far sì che nel prototipo navigabile per il cliente il bottone funzioni realmente e ci porti alla pagina in questione, il tutto semplicemente trascinando una sorta di linea dal bottone alla pagina desiderata. Bel vantaggio, no?

Cosa ci piace meno

1. Inserimento immagini

Attualmente, il sistema di gestione delle immagini inserite è piuttosto macchinoso. È permesso inserire una foto all’interno di un riquadro ma, successivamente, la gestione della stessa non è ahimè così semplice. È inoltre molto comodo far sì che la foto venga ripetuta più volte moltiplicandola all’interno dello stesso riquadro come fosse una sorta di texture usando la funzione “repeat grid”, ma il semplice ritaglio e ridimensionamento è gestito in maniera pessima e, spesso, il risultato è affidato al caso e alla pazienza dell’esecutore. Adobe, accetta il consiglio: copia esattamente il metodo che hai implementato su InDesign, che prevede le maniglie per il ridimensionamento della cornice indipendenti dalle maniglie per il ridimensionamento della foto al proprio interno.

2. Gestione del testo

Capisco l’intento di voler creare un software agile e veloce da usare senza far sì che l’utente si perda nei meandri delle palette, ma l’attuale pannello di gestione del testo è una delle cose più minimal che esista. I settaggi possibili si contano sulle dita di una mano: carattere, peso del carattere (bold, light ecc.), dimensione in punti, tracking, interlinea, allineamento paragrafo (centro, bandiera sinistra, bandiera a destra).
Certo, così facendo abbiamo a disposizione le funzioni essenziali per il web, ma sarebbe utile inserire anche un pannello avanzato con gli stili di testo da poter salvare e richiamare in ogni momento. Allo stato attuale delle cose vi ritroverete a creare ogni volta un box di testo nuovo dovendo settare nuovamente colore e font… e purtroppo il vecchio trucco di Illustrator/InDesign di usare il “contagocce” sul box di testo vecchio per portare gli attributi su quello nuovo, qui non funziona.

3. Oggetti

È stato inserito un primordiale strumento “tracciato di Bezier” che, devo dire, fa il suo sporco lavoro nell’economia e nella dinamica del software, e si possono inserire tracciati anche tramite gli strumenti rettangolo e cerchio. Tracciati che purtroppo all’interno di Adobe XD rimarranno sempre oggetti separati che in nessun modo è possibile fondere in un oggetto unico. Funzionalità invece molto comoda soprattutto ai designer meno esperti e a coloro che si ritrovano a dover disegnare forme più o meno complesse partendo da zero. Se lo scopo è quello di velocizzare il flusso di lavoro, l’inserimento di una palette simile a quella presente su Illustrator e InDesign che permetta di fondere/aggiungere/sottrarre le forme base (cerchi, rettangoli) è d’obbligo, anche se la probabilità di inserire forme estremamente complesse nella UI di un app sono ovviamente poche.

Concludendo: Adobe XD è veramente un bel programma, veloce da usare e intuitivo che però ovviamente necessita di miglioramenti (non per niente siamo ancora in fase beta), ma la strada è quella giusta… cara Adobe, avanti così!

Se ancora non lo conoscete e tutto ciò vi ha incuriosito, il mio consiglio è quello di scaricare immediatamente la beta del software dal sito Adobe a questo link e iniziare ad utilizzarlo scatenando la vostra creatività. Poi fatemi sapere cosa ne pensate…

Approfondimenti

Date un’occhiata ad uno dei video di presentazione ufficiale di Adobe XD, che seppur non entri molto nel dettaglio tecnico del software vi darà un’idea se non altro sull’approccio al UI design.