Corso per Web Designer

Lezione 1 • Panoramica degli Strumenti di Design Essenziali

Esamina gli strumenti standard del settore per wireframing, prototipazione e creazione di asset. Gli studenti selezionano gli strumenti appropriati per ogni fase del processo di progettazione.

Lezione 2 • Flusso di Lavoro e Processo di Progettazione

Introduce le fasi di scoperta, ideazione, design e consegna. Stabilisce un processo ripetibile che gli studenti applicano durante tutto il corso.

Lezione 3 • Come Funziona il Web

Tratta browser, server, DNS e HTTP per spiegare come le pagine vengono richieste e recapitate. Fondamenta tutte le future decisioni progettuali nella realtà tecnica.

Lezione 1 • Teoria del Colore per il Web

Insegna i modelli di tonalità, saturazione, contrasto e armonia cromatica. Gli studenti costruiscono palette accessibili che rafforzano l'identità di marca e guidano l'attenzione dell'utente.

Lezione 2 • Fondamenti di Tipografia

Tratta la classificazione dei caratteri tipografici, la gerarchia e la leggibilità su schermo. Gli studenti impostano il testo in modo che comunichi chiaramente su diverse dimensioni di dispositivo.

Lezione 3 • Layout e Composizione

Applica sistemi a griglia, allineamento e spazio bianco per organizzare il contenuto della pagina. Gli studenti producono layout equilibrati e facilmente scansionabili utilizzando regole compositive comprovate.

Lezione 4 • Immagini e Iconografia

Guida la selezione, il ritaglio e lo styling di foto, illustrazioni e icone. Gli studenti abbinano gli asset visivi al tono del brand e al contesto funzionale.

Lezione 1 • Testo, Link ed Elenchi

Tratta paragrafi, elementi inline, tag di ancoraggio e tipi di elenco. Gli studenti marcano correttamente il contenuto di testo formattato sia per la visualizzazione che per le tecnologie assistive.

Lezione 2 • Anatomia del Documento HTML

Spiega il doctype, gli elementi head e body e i loro ruoli. Gli studenti scrivono documenti HTML validi da zero utilizzando l'annidamento e la sintassi corretti.

Lezione 3 • Immagini, Media ed Embed

Insegna gli elementi img, figure, video, audio e iframe con gli attributi corretti. Gli studenti incorporano i media in modo accessibile utilizzando testo alternativo e didascalie.

Lezione 4 • Form ed Elementi di Input

Costruisce form accessibili utilizzando label, fieldset e tipi di input. Gli studenti creano form di contatto e inserimento dati con una struttura semantica corretta.

Lezione 1 • Sintassi CSS e Cascade

Spiega selettori, proprietà, specificità ed ereditarietà. Gli studenti eseguono il debug dei conflitti di stile comprendendo come il cascade risolve le regole in competizione.

Lezione 2 • Box Model e Spaziatura

Tratta margine, bordo, padding e dimensioni del contenuto. Gli studenti controllano la spaziatura con precisione ed evitano i comuni bug di layout causati da incomprensioni del box model.

Lezione 3 • CSS Grid per Layout Bidimensionali

Introduce tracce, aree e posizionamento nella griglia per layout di pagina complessi. Gli studenti ricreano design a più colonne usando Grid senza fare affidamento sui float.

Lezione 4 • Flexbox per Layout Unidimensionali

Insegna le proprietà del contenitore e degli elementi flex per disposizioni in riga e colonna. Gli studenti costruiscono barre di navigazione, righe di card e layout centrati con Flexbox.

Lezione 1 • Test e Debug della Responsività

Utilizza gli strumenti di sviluppo del browser e dispositivi reali per trovare e correggere problemi di layout. Gli studenti costruiscono una checklist di test applicata a ogni progetto successivo.

Lezione 2 • Griglie Fluide e Immagini Flessibili

Converte layout a pixel fissi in unità percentuali e fluide. Gli studenti usano unità relative e max-width per prevenire l'overflow su qualsiasi schermo.

Lezione 3 • Media Query e Breakpoint

Insegna le query min-width e max-width e come scegliere i breakpoint. Gli studenti scrivono media query che rispondono alle esigenze del contenuto piuttosto che ai nomi dei dispositivi.

Lezione 4 • Strategia di Design Mobile-First

Stabilisce la filosofia mobile-first e i suoi benefici in termini di performance. Gli studenti ristrutturano i design esistenti per partire dal viewport più piccolo e scalare verso l'alto.

Lezione 1 • Architettura dell'Informazione

Tratta mappe del sito, card sorting ed etichettatura della navigazione per organizzare i contenuti in modo logico. Gli studenti creano un'architettura informativa che riduce il carico cognitivo e supporta la reperibilità.

Lezione 2 • Wireframing e Prototipazione a Bassa Fedeltà

Produce schizzi e wireframe digitali per esplorare il layout prima del design visivo. Gli studenti iterano rapidamente sulla base del feedback di colleghi e stakeholder.

Lezione 3 • Persona Utente e Mappe del Percorso

Costruisce persona basate su evidenze e mappa i percorsi dell'utente per identificare i punti critici. Gli studenti utilizzano questi artefatti per giustificare le decisioni progettuali durante un progetto.

Lezione 4 • Fondamenti di Test di Usabilità

Pianifica e conduce test di usabilità moderati per convalidare le decisioni progettuali. Gli studenti analizzano i risultati e definiscono le priorità delle correzioni usando valutazioni di gravità.

Lezione 1 • Mantenere e Scalare il Sistema

Tratta il versionamento, i flussi di lavoro per i contributi e la governance per i design system in crescita. Gli studenti stabiliscono processi che mantengono il sistema coerente man mano che i team si espandono.

Lezione 2 • Documentazione dei Componenti e Consegna

Scrive linee guida per l'uso, esempi di buone e cattive pratiche e annotazioni di codice per ogni componente. Gli studenti preparano file di consegna che gli sviluppatori possono implementare senza ambiguità.

Lezione 3 • Pattern Fondamentali dei Componenti UI

Progetta pulsanti, card, modali, avvisi e controlli dei form secondo standard coerenti. Gli studenti documentano gli stati dei componenti, inclusi default, hover, focus e disabilitato.

Lezione 4 • Design Token e Guide di Stile

Crea token denominati per colore, spaziatura e tipografia che guidano l'intero sistema. Gli studenti producono una guida di stile che funge da unica fonte di verità.

Lezione 1 • Misurazione delle Performance e Core Web Vitals

Utilizza strumenti di audit delle performance per misurare caricamento, interattività e stabilità visiva. Gli studenti interpretano i punteggi e definiscono le priorità delle correzioni che incidono maggiormente sull'esperienza utente.

Lezione 2 • Ottimizzazione di Immagini e Asset

Comprime le immagini, sceglie formati moderni e carica in modo differito gli asset fuori schermo. Gli studenti riducono il peso della pagina senza una perdita visibile di qualità.

Lezione 3 • Audit di Accessibilità e Bonifica

Esegue audit automatici e manuali rispetto alle linee guida per l'accessibilità dei contenuti web. Gli studenti correggono i problemi di contrasto, navigazione da tastiera e ARIA trovati nei loro progetti.

Lezione 4 • Checklist di Deployment e Pubblicazione

Tratta le opzioni di hosting, la configurazione del dominio, SSL e i controlli di qualità pre-lancio. Gli studenti completano una checklist pre-lancio prima di pubblicare il loro progetto finale.