Corso di Design delle Interfacce

Lezione 1 • Principi Fondamentali del Visual Design

Tratta contrasto, allineamento, ripetizione e prossimità come regole fondamentali di layout. Gli studenti applicano questi principi per valutare e migliorare layout di schermate di base.

Lezione 2 • Che Cos'è il UI Design

Definisce il UI design, lo distingue dal UX design e dal graphic design e ne mappa il ruolo nello sviluppo del prodotto. Fonda tutti i capitoli successivi su definizioni condivise.

Lezione 3 • Modelli Mentali e Affordance

Spiega come gli utenti formano aspettative dall'esperienza pregressa e come le affordance segnalano l'interattività. Collega la psicologia cognitiva alla progettazione pratica dei controlli.

Lezione 4 • Panoramica del Processo di UI Design

Delinea il flusso di lavoro di progettazione end-to-end, dalla scoperta alla consegna. Stabilisce le aspettative su come ogni capitolo si inserisce in un ciclo di progettazione professionale.

Lezione 1 • Scala Tipografica e Gerarchia

Stabilisce sistemi di scala modulari e strutture di intestazione che organizzano visivamente i contenuti. Gli studenti creano scale tipografiche che comunicano chiaramente la priorità delle informazioni.

Lezione 2 • Costruire Palette Cromatiche Accessibili

Insegna i requisiti di rapporto di contrasto e le considerazioni sul daltonismo per un design inclusivo. Gli studenti verificano e correggono le palette per soddisfare gli standard di accessibilità.

Lezione 3 • Fondamenti di Tipografia

Presenta l'anatomia dei caratteri, la classificazione e i fattori di leggibilità per l'uso su schermo. Gli studenti abbinano i caratteri tipografici e impostano testi leggibili per corpo e visualizzazione.

Lezione 4 • Teoria del Colore per Schermi Digitali

Tratta tonalità, saturazione, luminosità e modelli di colore rilevanti per la resa su schermo. Gli studenti selezionano palette che comunicano accuratamente marca e funzione.

Lezione 1 • Sistemi di Griglie Spiegati

Tratta le griglie a colonne, modulari e di base e i loro ruoli nell'organizzare i contenuti delle schermate. Gli studenti selezionano il tipo di griglia appropriato per un dato contesto di interfaccia.

Lezione 2 • Token e Scala di Spaziatura

Presenta le scale di spaziatura e i sistemi di token che impongono padding e margini coerenti. Gli studenti definiscono e applicano una scala di spaziatura su più componenti dell'interfaccia.

Lezione 3 • Concetti di Flexbox e Auto-Layout

Spiega direzione flex, allineamento e wrapping applicati agli strumenti di layout dell'interfaccia. Gli studenti costruiscono frame dinamici di componenti che si ridimensionano senza regolazioni manuali.

Lezione 4 • Layout Responsivi e Adattivi

Distingue i layout fluidi responsivi dai design adattivi basati su breakpoint. Gli studenti configurano layout che si ridispongono correttamente su mobile, tablet e desktop.

Lezione 1 • Anatomia dei Componenti dell'Interfaccia

Scompone pulsanti, campi di input, card e modali nelle loro parti strutturali. Gli studenti identificano gli stati dei componenti e comprendono come ogni parte svolge una funzione.

Lezione 2 • Schemi di Navigazione

Tratta barre a schede, drawer laterali, breadcrumb e mega-menu come soluzioni di navigazione. Gli studenti abbinano gli schemi di navigazione all'architettura dell'informazione e al contesto utente.

Lezione 3 • Best Practice per il Design dei Form

Insegna il posizionamento delle etichette, la validazione dell'input, la messaggistica di errore e i flussi di form multi-step. Gli studenti riprogettano form mal strutturati per ridurre errori e attriti dell'utente.

Lezione 4 • Componenti per la Visualizzazione dei Dati

Affronta tabelle, elenchi, grafici e stati vuoti come metodi per presentare dati strutturati. Gli studenti scelgono componenti di visualizzazione adatti alla densità dei dati e agli obiettivi dell'utente.

Lezione 1 • Cos'è un Design System

Definisce i design system, distinguendoli dalle guide di stile e dalle librerie di pattern. Gli studenti mappano la relazione tra token, componenti e documentazione.

Lezione 2 • Theming e Flessibilità del Marchio

Dimostra come lo scambio di token abilita il theming multi-marca o in modalità scura. Gli studenti implementano un tema secondario senza ristrutturare i componenti esistenti.

Lezione 3 • Architettura dei Token di Design

Tratta token globali, alias e a livello di componente e le loro convenzioni di denominazione. Gli studenti strutturano una gerarchia di token che supporta il theming e la flessibilità del marchio.

Lezione 4 • Costruire Componenti Riutilizzabili

Insegna la metodologia del design atomico e la composizione dei componenti da atomi a organismi. Gli studenti costruiscono un insieme di componenti di base con props e varianti documentate.

Lezione 1 • Prototipare il Movimento negli Strumenti di Design

Dimostra la costruzione di prototipi interattivi con transizioni temporizzate e attivatori di scorrimento. Gli studenti consegnano un prototipo cliccabile che comunica l'intento di movimento agli stakeholder.

Lezione 2 • Considerazioni sull'Accessibilità del Movimento

Affronta i disturbi vestibolari, le preferenze di movimento ridotto e le soglie di animazione sicure. Gli studenti verificano un prototipo e aggiungono alternative a movimento ridotto per tutte le animazioni chiave.

Lezione 3 • Anatomia della Microinterazione

Scompone le microinterazioni in trigger, regole, feedback e cicli o modalità. Gli studenti mappano ogni elemento di una microinterazione prima di progettarne il comportamento visivo.

Lezione 4 • Principi del Motion Design

Tratta l'easing, la durata e la coreografia come grammatica fondamentale del movimento nell'interfaccia. Gli studenti distinguono l'animazione mirata da quella decorativa usando criteri definiti.

Lezione 1 • Analizzare e Sintetizzare i Risultati

Insegna la mappatura di affinità, la valutazione di gravità e l'identificazione di pattern tra le sessioni. Gli studenti trasformano le osservazioni grezze in un rapporto strutturato dei risultati.

Lezione 2 • Fondamenti dei Test di Usabilità

Definisce i test moderati vs. non moderati, la valutazione basata su compiti e il protocollo think-aloud. Gli studenti scrivono un piano di test allineato a specifiche domande di usabilità.

Lezione 3 • Condurre e Facilitare le Sessioni

Tratta l'allestimento della sessione, la facilitazione neutrale, la presa di appunti e l'evitare domande guidanti. Gli studenti praticano la facilitazione attraverso giochi di ruolo prima di condurre sessioni reali.

Lezione 4 • Iterare Basandosi sulle Prove

Dimostra come prioritizzare le correzioni, riprogettare elementi mirati e ripetere i test in modo efficiente. Gli studenti applicano i risultati per rivedere un prototipo e documentare le decisioni progettuali.

Lezione 1 • Esportazione e Ottimizzazione degli Asset

Affronta i formati di esportazione delle icone, la compressione delle immagini e i requisiti di risoluzione per piattaforme multiple. Gli studenti esportano un set completo di asset con le convenzioni di denominazione e formato corrette.

Lezione 2 • Misurare la Fedeltà Implementativa

Presenta i concetti di regressione visiva e i metodi di confronto affiancato per il QA. Gli studenti identificano e registrano le lacune di fedeltà tra i file di design e le build reali.

Lezione 3 • Preparare i File per la Consegna

Tratta la denominazione dei livelli, l'organizzazione dei componenti e le convenzioni di struttura dei file per la revisione dello sviluppatore. Gli studenti verificano e ristrutturano un file di design per soddisfare gli standard di consegna.

Lezione 4 • Annotare le Specifiche di Design

Insegna come annotare spaziatura, stati, interazioni e casi limite all'interno dei file di design. Gli studenti aggiungono un livello di annotazione completo a un set di schermate esistente.