Ui designer – progettista di interfacce digitali con figma (online) - gratuito

Obiettivo di apprendimento: RA2: Intervenire nella progettazione del prodotto digitale assicurando l’impiego di criteri di Universal Design e di ottimizzazione della User Experience.

Unità1 – PROGETTAZIONE DELLA SOLUZIONE

DEFINIZIONE ARCHITETTURE DELL’INFORMAZIONE

Il ruolo del UI Designer nel processo di progettazione digitale

• Struttura di un’interfaccia digitale e principi di usabilità

• Lettura del brief e individuazione dei requisiti dell’interfaccia

• Destinatari e contesto d’uso

• Ricognizione di prodotti di riferimento

• Organizzazione, raggruppamento ed etichettatura dei contenuti

• Gerarchia dei contenuti

• Progettazione dei flussi di navigazione • Logica mobile-first

• Ambiente di lavoro e impostazione del file: panoramica di Figma — area di progettazione, frame, strumenti principali, pannelli, asset

• Organizzazione e naming del file, pagine e struttura di progetto

• Figma Jam per la raccolta e l’organizzazione delle idee

• Primi flussi operativi e lavoro collaborativo

REALIZZAZIONE WIREFRAME

• Wireframe a bassa fedeltà delle schermate chiave

• Rappresentazione dei meccanismi di interfaccia e delle funzionalità previste

• Verifica della coerenza tra flussi di navigazione e wireframe

• Revisione del wireframe e passaggio all’alta fedeltà

- PROTOTIPAZIONE

• Principi di visual design: palette colore e gerarchia di significato del colore Tipografia e scala tipografica Gerarchia visiva, contrasto, coerenza grafica Ritmo e proporzioni • Ricerca di riferimenti e moodboard

• Elementi grafici e gestione degli asset: strumenti vettoriali — forme, penna, tracciatiMaschere e gestione delle immagini Griglie, colonne e sistemi di spaziatura Esportazione e preparazione degli asset per lo sviluppo

• Design system tipografico: variabili e collezioni, tipi di valore e criteri di denominazioneCollezione tipografica suddivisa per famiglie serif e sans serif Aggancio delle famiglie agli stili di testo Propagazione della modifica dalla variabile agli stili e all’intero progetto

• Layout flessibili e responsive: vincoli e comportamento degli elementi al ridimensionamento Auto layout — spaziature, direzione, riempimentoElementi annidati e adattamento dei contenuti Progettazione per breakpoint e verifica del comportamento responsive

• Design system del colore: token primitivi e costruzione della scala cromatica Token semantici ottenuti per raggruppamento dei primitivi Applicazione ai livelli dei soli token semantici Manutenzione ed evoluzione del sistema cromatico

• Componenti, proprietà e costruzione del sistema: componenti principali e istanze Varianti e stati del componente — default, hover, premuto, focus, disabilitato Proprietà di variante per le versioni primaria e secondaria Proprietà di testo, proprietà di scambio istanza per le icone, proprietà booleana per la variazione di forma Assegnazione delle proprietà mediante rinominazione dei livelli Costruzione di un component set completo di pulsanti

• Realizzazione del prototipo: collegamenti tra schermate e hotspot Interazioni, stati e overlay • Costruzione dei flussi navigabili • Componenti interattivi e transizioni tra gli stati Smart animate e micro-interazioni Simulazione di comportamenti realistici Completezza dei flussi e degli stati previsti Condivisione del prototipo

• Documentazione del sistema e risorse di progetto: documentazione del design system — struttura, criteri d’uso dei token e dei componenti, regole di applicazione, esempi di uso corretto e scorretto Creazione di librerie e UI kit Pubblicazione e aggiornamento delle librerie: funzionamento e ambito d’uso nei piani professionali (dimostrazione) Template, plugin, widget e materiali della community Verifica di licenze e condizioni d’uso

TEST DI USABILITA

• Impostazione di un test di usabilità sui wireframe e sul prototipo: definizione dei task, osservazione, registrazione delle criticità

• Sintesi e gerarchia dei problemi rilevati

• Verifica della funzionalità delle schermate e dei flussi

• Revisione del progetto conseguente alle evidenze raccolte

Unità 2 OTTIMIZZAZIONE USER EXPERIENCE

INTEGRAZIONE DELLA PROGETTAZIONE DEL PRODOTTO IN RELAZIONE AD ERGONOMIA, ACCESSIBILITÀ

• Criteri ergonomici applicati all’interfaccia: dimensioni minime delle aree interattive

• Distanze tra gli elementi attivi e prevenzione degli errori di selezione

• Aree di raggiungibilità nell’uso a una mano

• Criteri di accessibilità: rapporti di contrasto e livello di conformità AA verificati sui token cromatici

• Leggibilità, corpo minimo e lunghezza di riga

• Informazione non affidata al solo colore

• Stati di focus, feedback e riconoscibilità degli elementi attivi

• Navigazione da tastiera e con tecnologie assistive

•Verifica e correzione: verifica strumentale con plugin di controllo del contrasto

• Controllo delle aree interattive e degli stati

• Revisione dei token e degli stili conseguente alle verifiche

INTEGRAZIONE DELLA PROGETTAZIONE DEL PRODOTTO IN RELAZIONE AI PRINCIPI DI UNIVERSAL DESIGN

• Origine e finalità dell’Universal Design

• Progettare per il maggior numero di persone senza soluzioni dedicate

• Barriere percettive, motorie e cognitive nell’uso di un prodotto digitale

• Contesti d’uso limitanti: luminosità, rumore, connettività ridotta

• Interfacce standardizzate: pattern d’interfaccia riconoscibili e convenzioni d’uso

• Coerenza di comportamento tra elementi con la stessa funzione

• Prevedibilità e tolleranza all’errore, reversibilità delle azioni

• Adattabilità del prodotto: adattamento ai diversi dispositivi e formati di schermo

• Rispetto delle preferenze di sistema dell’utilizzatore

• Semplicità e riduzione del carico cognitivo

• Documentazione delle scelte di Universal Design adottate nel progetto

Verifica dell'apprendimento: Il modulo si completa con prove di verifica relative al monitoraggio delle abilità e delle conoscenze acquisite.

Obiettivo di apprendimento: RA3: Curare la comunicazione relativa alle funzionalità e all’utilizzo del prodotto digitale, anche a partire dalla progettazione di mock-up e prototipi interattivi, garantendone la suitability (correttezza, completezza, efficacia, disponibilità, ecc.).

Unità 1 - Comunicazione

PROGETTAZIONE MOCK-UP

• Il mock-up come strumento di presentazione del prodotto

• Selezione delle schermate significative rispetto alle funzionalità da illustrare

• Realizzazione delle viste di presentazione e delle anteprime di contesto

• Sequenza espositiva delle schermate e delle modalità d’uso

• Presentazione del progetto al committente a partire da obiettivi e vincoli

• Conduzione della revisione e gestione del feedback

• Confronto con gli sviluppatori e verifica di fattibilità

•Passaggio dei file: misure, spaziature, stati, comportamenti responsive, asset

• Documentazione delle scelte progettuali

• Verifica di correttezza, completezza e disponibilità del materiale

CREAZIONE DI CONTENUTI DI COMUNICAZIONE DIGITALE

• Contenuti testuali e grafici per illustrare uso, caratteristiche, funzionalità e vantaggi del prodotto

• Organizzazione dei contenuti in funzione del canale e dello strumento di diffusione • Adattamento dei contenuti ai formati richiesti dai diversi canali

• Realizzazione del portfolio site: ricostruzione in Framer di un progetto di portfolio professionale assegnato — struttura dei contenuti, gerarchia visiva, componenti, comportamento responsive

• Trasferimento all’ambiente di pubblicazione delle logiche apprese in Figma: analogie operative e differenze

• Differenze tra prototipo di progettazione e sito pubblicato: comportamento reale, prestazioni, manutenzione, accessibilità in rete

• Pubblicazione del sito e consegna dell’impianto agli allievi per il successivo popolamento con i propri lavori

PROGETTAZIONE STRATEGIA DI COMUNICAZIONE

• Individuazione degli strumenti e dei canali idonei alla presentazione del prodotto: sito web, social media, newsletter, presentazioni

• Criteri di scelta in funzione dei destinatari e degli obiettivi di comunicazione

• Coerenza del sistema visivo tra i diversi canali

• Declinazione del design system nei formati di comunicazione

• Pianificazione della sequenza di presentazione del prodotto all’utenza esterna

• Motivazione delle scelte di strategia e di contenuto

Verifica dell'apprendimento: Il modulo si completa con prove di verifica relative al monitoraggio delle abilità e delle conoscenze acquisite.

Modulo strutturato in conformità al D.Lgs. 81/08 e agli Accordi Stato-Regioni

Verifica dell'apprendimento: Il modulo si completa con prove di verifica relative al monitoraggio delle conoscenze acquisite.

Tratta il principio di parità di trattamento economico e normativo rispetto ai dipendenti dell'azienda utilizzatrice, le regole del contratto con l'Agenzia per il Lavoro (ApL) e gli obblighi di diligenza, obbedienza e sicurezza sul lavoro.