Tutorial Adobe XD - Design dell'esperienza e prototipizzazione.

Benvenuti al grande tutorial su Adobe XD. In questa introduzione mi presento come il vostro istruttore.

Qual è la differenza tra User Experience (UX) e User Interface (UI)? Quali tipi di design dei livelli esistono e per cosa viene utilizzato al meglio Adobe XD? La risposta si trova qui!

La prima volta che apro Adobe XD - e già si presentano numerose possibilità che è possibile selezionare. In questo video c'è un breve riscaldamento per Adobe XD, una panoramica del programma e un'introduzione allo Splash Screen di XD e alle sue funzioni.

I "Artboards" (tavole) possono essere creati in un attimo in Adobe XD per diverse risoluzioni e dispositivi. Le peculiarità da considerare in questo tutorial.

Diverse impostazioni della griglia ci aiutano a organizzare pulitamente gli elementi e gli oggetti tra di loro. A tal fine ci sono disponibili una griglia rettangolare e una suddivisione delle colonne per le colonne.

Google, Apple e Microsoft mettono a disposizione pratici kit UI per un avvio rapido. Questi artboard pronti ci aiutano enormemente nella successiva progettazione di prototipi per piattaforme diverse.

I colori giocano un ruolo estremamente importante in quasi ogni design - in questo video impari come lavorare con i colori in Adobe XD, come importarli e quali fonti pratiche ci sono per raccogliere armonie di colori pronte.

Ci sono numerosi metodi per importare asset come immagini, file, documenti di testo, ecc. in Adobe XD. In questo video presento alcuni metodi. Tuttavia, poiché XD fa parte del Creative Cloud di Adobe, è possibile lavorare in modo estremamente comodo e pratico con le librerie.

L'argomento dei caratteri e della tipografia è un grande mattoncino nel nostro viaggio attraverso Adobe XD. In questo video imparerai come gestire i caratteri in modo corretto ed efficiente.

Le forme possono essere facilmente importate in Adobe XD o create anche manualmente con lo strumento per i tracciati. Se un oggetto viene utilizzato più di due volte, è inoltre consigliabile aggiungerlo come simbolo all'elenco degli elementi.

Progettare ha molto a che fare con l'ispirazione e l'input esterno. Ciò include l'ambiente analogico così come il mondo digitale. Qui presento alcuni portali che mi piace visitare.

Iniziamo con un piccolo e raffinato progetto pratico. In questo tutorial e nei due video successivi, creeremo una pagina web one-page.

La griglia di ripetizione è una delle funzionalità più importanti di Adobe XD. Ci aiuta a scalare e riempire singolarmente gruppi di oggetti creati una sola volta.

Nella parte finale della progettazione del Onepager ci occupiamo del footer e di un'area per i riferimenti. Qui utilizziamo pratici file SVG e impariamo altre tecniche di design.

In questa lezione ci occuperemo della questione di come è possibile connettere in modo interattivo singoli artboard. Qui parleremo delle varie possibilità di transizione e di altre modifiche che possiamo apportare al prototipo.

Ogni sito web ha bisogno di un punto di ancoraggio per la navigazione. In questo video ci concentriamo esclusivamente sulla creazione di una navigazione principale nell'intestazione e sulla connessione interattiva tra di loro.

Questo allenamento si basa sul capitolo precedente e mostra come adattare il menu desktop creato per uno smartphone. L'icona dell'hamburger e i punti del menu saranno valorizzati con animazioni interessanti.

Uno degli strumenti più potenti per la migliore visualizzazione possibile è la funzione di auto-animazione di Adobe XD. In questo esempio spiego come potete adattare il principio della funzione di auto-animazione in modo adattivo per qualsiasi scenario immaginabile.

Nei video seguenti impareremo a creare un prototipo per un negozio online. Qui impareremo a creare prototipi High-Fidelity visualmente accattivanti da semplici artboards. Parte 1 di 4.

Nella seconda parte ci occuperemo della presentazione delle descrizioni dettagliate, inseriremo slider per le immagini e collegheremo gli artboard tra loro.

La funzione sovrapposizione per il prototipazione interattiva ci offre interessanti possibilità, come l'opportunità di visualizzare e nascondere le informazioni direttamente.

Un buon design dell'usabilità fornisce costantemente un feedback all'utente sullo stato del sistema. Questo feedback lo integreremo in una bella animazione al termine del progetto.

Adobe XD, nel suo processo di prototipazione, supporta anche l'interazione tramite comando vocale. I comandi verbali portano quindi a azioni di sistema che possiamo definire noi stessi. Mostrerò come questo funziona in questo tutorial.

Nella collaborazione con altri dipartimenti e persone coinvolte, la funzione di commento audio è una caratteristica preziosa per spiegare chiaramente lo stato del progetto.

Testare un prototipo in un ambiente virtuale è una cosa - presentarlo in diretta su un dispositivo finale è un'altra. E proprio questo può essere comodamente risolto tramite Adobe XD, sia tramite USB che tramite l'interfaccia di Creative Cloud. Per questo utilizziamo l'app Adobe XD dall'App Store.

Durante la collaborazione, è indispensabile scambiarsi informazioni sullo stato del progetto con altri dipartimenti. Attraverso la funzione di pubblicazione, il prototipo può essere rilasciato per permettere a revisori, sviluppatori e committenti di ottenere impressioni visive sul progetto. A questo punto inizia anche il ciclo di revisione tra i dipartimenti specializzati per portare il progetto a maturazione.

Adobe XD cambia come un programma ancora molto giovane con ogni aggiornamento: In questo video spiego quali novità sono state introdotte nel passaggio dalla versione 18 alla versione 19, come utilizzare le funzionalità e in quali situazioni sono utili. Questo include: componenti anziché simboli, resize responsive, guide, strumento poligono, ulteriori opzioni di formattazione del testo e molto altro. Buon divertimento!