Corso di Web Design

Lezione 1 • Panoramica sulle Tecnologie Web Fondamentali

Introduce HTML, CSS e JavaScript come i tre pilastri dell'output web. Chiarisce il ruolo di ciascuna tecnologia affinché i designer comprendano cosa stanno modellando.

Lezione 2 • Impostare uno Spazio di Lavoro di Design

Guida gli studenti nella scelta degli strumenti, nell'organizzazione dei file e nella configurazione dei browser per il lavoro di design. Garantisce un ambiente produttivo prima di iniziare qualsiasi progetto.

Lezione 3 • Come Funziona il Web

Tratta l'architettura client-server, le richieste HTTP e le pipeline di rendering del browser. Stabilisce il contesto tecnico in cui opera ogni decisione di design.

Lezione 1 • Immagini e Iconografia

Tratta la selezione, l'ottimizzazione e lo styling di immagini e icone per contesti web. Gli studenti integrano asset visivi che rafforzano piuttosto che distrarre dal contenuto.

Lezione 2 • Tipografia su Schermo

Tratta la selezione dei caratteri tipografici, la scala, la lunghezza della linea e la spaziatura per la leggibilità digitale. Gli studenti stabiliscono sistemi tipografici che funzionano su diverse dimensioni di dispositivo.

Lezione 3 • Layout, Griglia e Spaziatura

Introduce i sistemi a griglia, lo spazio bianco e l'allineamento come strumenti per l'ordine visivo. Gli studenti progettano layout strutturati che guidano l'occhio in modo prevedibile.

Lezione 4 • Gerarchia Visiva ed Enfasi

Insegna dimensione, peso, colore e posizione come segnali di gerarchia. Gli studenti indirizzano l'attenzione dell'utente verso i contenuti prioritari attraverso scelte visive deliberate.

Lezione 1 • Personas Utente e Mappe del Percorso

Insegna a costruire personas a partire dai dati di ricerca e a mappare i percorsi dell'utente dall'inizio alla fine. Gli studenti usano questi artefatti per allineare i team intorno agli obiettivi degli utenti.

Lezione 2 • Architettura dell'Informazione

Tratta la struttura del sito, i modelli di navigazione e le strategie di categorizzazione dei contenuti. Gli studenti organizzano le informazioni in modo che gli utenti trovino ciò di cui hanno bisogno con il minimo sforzo.

Lezione 3 • Fondamenti di Accessibilità

Introduce i criteri di design percepibile, utilizzabile, comprensibile e robusto. Gli studenti verificano i progetti rispetto alle linee guida sull'accessibilità e correggono i fallimenti comuni.

Lezione 4 • Metodi di Ricerca UX

Introduce interviste, sondaggi e osservazione come strumenti di ricerca primaria. Gli studenti raccolgono dati qualitativi e quantitativi per informare la direzione del design.

Lezione 1 • Prototipazione ad Alta Fedeltà

Applica il visual design ai wireframe e collega le schermate in prototipi cliccabili. Gli studenti producono artefatti abbastanza vicini al prodotto finale per test con gli utenti significativi.

Lezione 2 • Wireframing a Bassa Fedeltà

Costruisce wireframe in scala di grigi che definiscono la struttura senza styling visivo. Gli studenti si concentrano sulla logica del layout e sul posizionamento dei contenuti prima dell'estetica.

Lezione 3 • Test di Usabilità dei Prototipi

Tratta la pianificazione, la moderazione e l'analisi dei test di usabilità sui prototipi. Gli studenti iterano i design basandosi sul comportamento osservato degli utenti piuttosto che su assunzioni.

Lezione 4 • Fondamenti di Interaction Design

Introduce stati, transizioni e micro-interazioni come strumenti di comunicazione. Gli studenti progettano cicli di feedback che rendono le interfacce reattive e intuitive.

Lezione 1 • Griglie Fluide e Layout Flessibili

Insegna griglie basate su percentuali e contenitori flessibili che si ridispongono su diverse larghezze. Gli studenti costruiscono layout che si adattano senza rompersi a dimensioni intermedie.

Lezione 2 • Breakpoint e Media Query

Tratta la selezione dei breakpoint basata sulle esigenze dei contenuti piuttosto che sui nomi dei dispositivi. Gli studenti scrivono media query che attivano modifiche al layout a soglie significative.

Lezione 3 • Tipografia e Spaziatura Responsive

Scala la tipografia e la spaziatura proporzionalmente tra i breakpoint per una leggibilità coerente. Gli studenti usano tecniche di tipografia fluida per eliminare salti di dimensione bruschi.

Lezione 4 • Componenti e Pattern Adattivi

Progetta componenti che cambiano struttura, non solo dimensione, a diversi breakpoint. Gli studenti costruiscono navigazioni, card e tabelle che si adattano in modo intelligente.

Lezione 1 • Design Token e Fondamenti di Stile

Definisce i design token come il livello atomico di un design system per colore, tipografia e spaziatura. Gli studenti strutturano i token in modo che propaghino le modifiche a livello di sistema in modo efficiente.

Lezione 2 • Costruire una Libreria di Componenti

Tratta la costruzione di pulsanti, form, card e componenti di navigazione in uno strumento di design. Gli studenti producono una libreria che i team possono utilizzare senza ricreare elementi.

Lezione 3 • Documentazione del Design System

Insegna a scrivere linee guida per l'uso, esempi di cose da fare/evitare e la logica per ciascun componente. Gli studenti producono documentazione che consente un'adozione coerente tra i team.

Lezione 4 • Architettura dei Componenti

Insegna la metodologia del design atomico per costruire componenti dagli atomi agli organismi. Gli studenti strutturano i componenti per il massimo riutilizzo e la minima ridondanza.

Lezione 1 • Principi di Motion Design

Applica i principi di animazione come easing, anticipazione e follow-through ai contesti UI. Gli studenti distinguono il movimento decorativo dal movimento funzionale che aiuta la comprensione.

Lezione 2 • Interazioni Scroll-Driven e Parallax

Tratta le animazioni attivate dallo scroll e gli effetti parallax come strumenti narrativi e di coinvolgimento. Gli studenti applicano queste tecniche senza danneggiare performance o accessibilità.

Lezione 3 • Design dell'Interazione Gestuale e Touch

Progetta interazioni swipe, pinch, drag e long-press per interfacce touch-first. Gli studenti mappano i gesti sull'intento dell'utente e forniscono un chiaro feedback visivo.

Lezione 4 • Design delle Transizioni e dei Cambi di Stato

Progetta transizioni tra pagine, pannelli e stati dei componenti per mantenere il contesto spaziale. Gli studenti coreografano cambi di stato che risultano logici e continui.

Lezione 1 • Metriche di Performance per i Designer

Introduce i Core Web Vitals e la performance percepita come metriche rilevanti per il design. Gli studenti collegano scelte di design specifiche a risultati misurabili di caricamento e interazione.

Lezione 2 • Performance delle Animazioni e delle Interazioni

Insegna a progettare animazioni che girano sul thread del compositore per evitare scatti. Gli studenti scelgono proprietà CSS e tempistiche che mantengono 60 fps sui dispositivi target.

Lezione 3 • Verifica e Iterazione delle Performance

Utilizza gli strumenti del browser e servizi di verifica online per misurare e diagnosticare le performance. Gli studenti stabiliscono un ciclo ripetibile di verifica-correzione-validazione per l'ottimizzazione continua.

Lezione 4 • Ottimizzazione di Immagini e Asset

Tratta la selezione del formato, la compressione, il lazy loading e le immagini responsive per le performance. Gli studenti riducono il carico degli asset senza un degrado visibile della qualità.