Corso per UI Designer

Lezione 1 • Principi della Gestalt nell'UI

Applica la psicologia della Gestalt — figura-sfondo, chiusura, continuità — alle decisioni di layout dell'interfaccia. Gli studenti imparano a prevedere come gli utenti percepiscono gli elementi raggruppati.

Lezione 2 • Fondamenti di Tipografia

Introduce la classificazione dei caratteri tipografici, la scala tipografica e le regole di leggibilità per gli schermi digitali. Gli studenti applicano queste regole per creare layout testuali leggibili e gerarchici.

Lezione 3 • Principi Fondamentali del Visual Design

Tratta il contrasto, l'allineamento, la ripetizione e la prossimità come regole strutturali della composizione visiva. Questi principi sono alla base di ogni decisione di layout nei capitoli successivi.

Lezione 4 • Teoria del Colore per le Interfacce

Insegna la tonalità, la saturazione, la luminosità e le relazioni cromatiche applicate al design su schermo. Gli studenti costruiscono palette che comunicano significato e supportano l'usabilità.

Lezione 1 • Modifica di Forme e Percorsi Vettoriali

Insegna le curve di Bézier, le operazioni booleane e l'uso dello strumento penna per creare forme UI precise. Queste competenze consentono il lavoro su icone e illustrazioni personalizzate nei capitoli successivi.

Lezione 2 • Auto Layout e Vincoli

Tratta le regole dell'auto layout e i vincoli responsive per costruire elementi UI adattivi. Gli studenti producono frame che si ridimensionano correttamente su diverse dimensioni dello schermo.

Lezione 3 • Basi di Esportazione e Handoff

Spiega i formati di esportazione, le impostazioni di risoluzione e le annotazioni per il passaggio di consegne agli sviluppatori. Un handoff corretto riduce gli errori di comunicazione tra designer e ingegneri.

Lezione 4 • Lavorare con i Componenti

Introduce i componenti riutilizzabili, le istanze e gli override per costruire design system scalabili. La padronanza dei componenti è un prerequisito per il lavoro sul design system nel Capitolo 5.

Lezione 1 • Scale di Spaziatura e Dimensionamento

Introduce i sistemi di spaziatura a 4pt e 8pt e le scale di dimensionamento proporzionale per una densità UI coerente. La spaziatura sistematica riduce il rumore visivo e accelera le decisioni progettuali.

Lezione 2 • Anatomia e Configurazione della Griglia

Definisce colonne, gutter, margini e griglie di base e mostra come configurarli negli strumenti di design. Una solida base di griglia garantisce coerenza visiva su tutti gli schermi.

Lezione 3 • Pattern di Layout per Schermi Comuni

Esamina i pattern di layout per dashboard, elenchi, card e form con esempi di applicazione nel mondo reale. Il riconoscimento dei pattern accelera le decisioni progettuali nei capitoli di progetto applicato.

Lezione 4 • Strategie di Layout Responsive

Tratta le griglie fluide, i breakpoint fissi e i pattern di layout adattivi per mobile, tablet e desktop. Gli studenti progettano una singola UI su tre breakpoint come esercizio pratico.

Lezione 1 • Componenti di Navigazione

Costruisce barre di navigazione superiori, drawer laterali, tab e breadcrumb per l'orientamento tra le schermate. I pattern di navigazione sono applicati direttamente nel progetto multi-schermata nel Capitolo 7.

Lezione 2 • Elementi dei Form e Input

Progetta campi di testo, menu a discesa, caselle di controllo, pulsanti radio e interruttori con una copertura completa degli stati. L'usabilità dei form impatta direttamente i tassi di completamento delle attività nei prodotti reali.

Lezione 3 • Componenti per la Visualizzazione dei Dati

Tratta tabelle, badge, tag, avatar e indicatori di progresso per presentare informazioni strutturate. I componenti di visualizzazione dei dati sono essenziali per il lavoro di UI su dashboard e analytics.

Lezione 4 • Componenti di Feedback e Sovrapposizione

Progetta modali, toast, tooltip e indicatori di caricamento che comunicano lo stato del sistema. I componenti di feedback chiudono il ciclo tra l'azione dell'utente e la risposta del sistema.

Lezione 1 • Architettura del Design System

Spiega il modello di design atomico — atomi, molecole, organismi — e come struttura una libreria di componenti. Comprendere l'architettura previene duplicazioni e incoerenze su larga scala.

Lezione 2 • Governance del Design System

Stabilisce i modelli di contributo, il versionamento e i flussi di lavoro di deprecazione per mantenere un sistema vivo. La governance previene la deriva del design man mano che i team e i prodotti crescono nel tempo.

Lezione 3 • Documentare i Componenti

Tratta le linee guida d'uso, esempi di cose da fare/evitare e la documentazione delle proprietà per ogni componente. Una documentazione chiara guida un'adozione coerente da parte di designer e sviluppatori.

Lezione 4 • Approfondimento sui Design Token

Definisce i token di colore, tipografia, spaziatura ed elevazione e mostra come collegano il design al codice. I token consentono aggiornamenti da un'unica fonte di verità su tutte le piattaforme.

Lezione 1 • Costruire Prototipi Cliccabili

Collega i frame con hotspot, sovrapposizioni e comportamenti di scorrimento per simulare i flussi di navigazione. I prototipi cliccabili sono l'artefatto principale per il test di usabilità nel Capitolo 7.

Lezione 2 • Tecniche Avanzate di Prototipazione

Utilizza variabili, condizioni e interazioni tra componenti per prototipare comportamenti dinamici e stateful. I prototipi avanzati riducono l'ambiguità nel passaggio di consegne agli sviluppatori per funzionalità complesse.

Lezione 3 • Design delle Micro-Interazioni

Progetta cicli di innesco-feedback per stati hover, pressioni di pulsanti, levette e validazione dei form. Le micro-interazioni aumentano la qualità percepita e guidano efficacemente l'attenzione dell'utente.

Lezione 4 • Principi di Motion e Animazione

Applica le curve di easing, le linee guida sulla durata e la coreografia alle transizioni UI e ai cambi di schermata. Il motion comunica gerarchia e continuità tra gli stati dell'interfaccia.

Lezione 1 • Accessibilità del Colore e del Contrasto

Tratta i requisiti del rapporto di contrasto, le palette sicure per il daltonismo e il design dell'informazione non dipendente dal colore. Gli studenti testano e correggono i fallimenti di contrasto nella loro libreria di componenti esistente.

Lezione 2 • Pattern di Componenti Accessibili

Applica ruoli, etichette e regioni live ARIA a modali, form e componenti di contenuto dinamico. Gli studenti aggiornano la loro libreria di componenti con annotazioni di accessibilità per gli sviluppatori.

Lezione 3 • Accesso tramite Focus, Tastiera e Tocco

Progetta indicatori di focus visibili, un ordine di tabulazione logico e dimensioni adeguate dei target touch per tutti i metodi di input. Questi elementi garantiscono l'operabilità per gli utenti con disabilità motorie o che usano la tastiera.

Lezione 4 • Tipografia e Leggibilità

Applica le regole di dimensione minima del carattere, interlinea e ridimensionamento del testo per garantire interfacce leggibili. Una tipografia leggibile riduce il carico cognitivo per gli utenti con differenze visive o cognitive.

Lezione 1 • Design di Schermate ad Alta Fedeltà

Applica il design system, la tipografia, il colore e i componenti per produrre schermate rifinite e pronte per la produzione. Le schermate ad alta fedeltà sono il deliverable principale esaminato dagli stakeholder.

Lezione 2 • Architettura dell'Informazione e Flussi

Crea mappe del sito, flussi utente e flussi di attività per definire la struttura di navigazione prima che inizi il design visivo. Un'IA solida previene costose revisioni strutturali durante la fase di design ad alta fedeltà.

Lezione 3 • Prototipare, Testare e Iterare

Costruisce un prototipo navigabile, conduce un test di usabilità moderato e itera in base ai risultati. Questa sezione chiude il ciclo di progettazione e dimostra un processo decisionale basato sull'evidenza.

Lezione 4 • Brief di Progetto e Discovery

Analizza un brief di prodotto realistico, definisce l'ambito e identifica gli obiettivi utente e i vincoli aziendali. I risultati della discovery modellano direttamente l'architettura dell'informazione e il flusso nella sezione successiva.

Lezione 5 • Handoff e Presentazione del Caso Studio

Prepara le specifiche pronte per lo sviluppatore, un documento redline e una narrazione strutturata del caso studio per il portfolio. Un caso studio convincente è lo strumento principale per ottenere un ruolo nell'UI design.