Scheda insegnamento

Prerequisiti

Alfabetizzazione informatica e disponibilità a seguire un percorso in cui teoria e pratica sono fortemente interconnesse. È inoltre richiesta la comprensione della lingua italiana orale e scritta al livello B2 del QCER. Se necessario, e in particolare se segnalato nei colloqui in ingresso, gli studenti devono avvalersi del servizio di tutorato linguistico alla pari offerto dall’Ateneo.

Obiettivi formativi - Risultati di apprendimento attesi

Conoscenza e comprensione

Gli studenti acquisiranno i fondamenti della comunicazione visiva applicata agli ambienti digitali e al web. Il corso si propone di fornire competenze teoriche e pratiche nell'ambito del visual design, della tipografia digitale, dei design systems e dell'implementazione front-end, seguendo un approccio metodologico che ripercorre l'intero flusso di lavoro progettuale. Gli obiettivi formativi sono:

• Comprendere i principi della percezione visiva e della gerarchia dell'informazione applicati al web
• Acquisire conoscenze sulla progettazione di interfacce user-centered, responsive e accessibili
• Conoscere il workflow progettuale completo: dalla ricerca iniziale e definizione del concept, alla realizzazione di wireframe, prototipi interattivi e implementazione finale in codice
• Comprendere la relazione tra design e codice (HTML/CSS) e il processo di traduzione da artefatto grafico a prodotto funzionante
• Padroneggiare i principi dei design systems e della progettazione modulare per garantire coerenza e scalabilità del progetto

Capacità di applicare conoscenza e comprensione

Attraverso esercitazioni pratiche e l'uso di strumenti professionali (Miro, Figma, Visual Studio Code), gli studenti saranno in grado di:

• Condurre un'analisi visiva di prodotti digitali esistenti
• Progettare artefatti di comunicazione visiva per il web seguendo metodologie strutturate
• Sviluppare prototipi interattivi e implementarli in codice funzionante
• Applicare principi di accessibilità (WCAG) e responsive design

Autonomia di giudizio

Gli studenti svilupperanno capacità critica nell'analisi e valutazione di progetti di comunicazione visiva digitale, sapendo argomentare scelte progettuali consapevoli e metodologicamente fondate.

Abilità comunicative

Gli studenti sapranno presentare e argomentare il proprio progetto di visual design, comunicando efficacemente il processo progettuale, le scelte stilistiche e funzionali adottate, utilizzando linguaggio tecnico appropriato.

Capacità di apprendimento

Il corso fornisce metodi e strumenti per l'apprendimento autonomo e l'aggiornamento continuo nell'ambito del design digitale, preparando gli studenti a utilizzare risorse online, documentazione tecnica e community professionali.

Contenuto del corso

Il corso si articola in quattro moduli progressivi:

MODULO 1 - Fondamenti della Comunicazione Visiva Digitale

• Percezione visiva e principi Gestalt applicati al web
• Griglie, layout e composizione: dal print al digitale
• Tipografia: anatomia del carattere, gerarchia, leggibilità e web fonts
• Teoria del colore, accessibilità e contrasto (introduzione WCAG)

MODULO 2 - Design per il Web

• Wireframing: introduzione ai wireframe low-fidelity con Miro (sketching, structure, information architecture)
• Introduzione a Figma: interfaccia, componenti, auto-layout
• Design Systems e Atomic Design
• UI Patterns: navigazione, call-to-action, form
• Responsive Design: breakpoints, mobile-first approach

MODULO 3 - Dal design al codice

• HTML semantico e struttura accessibile
• CSS: selettori, box model, flexbox e grid
• Implementazione responsive con media queries
• Tipografia e spacing systems in CSS
• Workflow: da Figma al codice funzionante

MODULO 4 - Progetto finale

• Metodologia progettuale: brief, ricerca, concept
• Sviluppo progetto individuale

Metodi didattici

Trattandosi di un modulo con obiettivi professionalizzanti, l’attività didattica sarà di tipo laboratoriale e si svolgerà attraverso lezioni frontali in cui risulterà fondamentale l’interazione continua fra docente e allievi. In particolare, durante l’attività laboratoriale, gli studenti saranno invitati a cimentarsi in esercitazioni di progettazione visiva su tematiche fornite dal docente.

Gli studenti impossibilitati a frequentare dovranno comunque svolgere un’attività che sia assimilabile a quella svolta in aula. Sono perciò tenuti a contattare il docente entro le prime 2 settimane di corso in modo da essere indirizzati verso un analogo lavoro metodologico e progettuale. I progetti potranno essere sottoposti al docente, per le opportune considerazioni durante il ricevimento, tale confronto potrà avvenire anche via mail. Lo studente non frequentante avrà inoltre un carico bibliografico superiore, vedi sezione “Testi di riferimento”. Slide e file di studio saranno predisposti sulla piattaforma e-learning di Ateneo.

Agli studenti che abbiano depositato in Segreteria certificazioni di disabilità o DSA si consiglia di contattare all'inizio del corso il/la docente, anche attraverso la Commissione per le differenze e l'inclusione (differenze-inclusione@unistrapg.it) per concordare misure compensative e/o dispensative di adattamento della didattica.

Metodi di accertamento

Per studenti frequentanti Consegna e presentazione orale di un elaborato di progetto. Viene valutato il lavoro che gli studenti presenteranno in sede d'esame (comprensivo di ricerca, wireframe, design system, prototipo Figma e implementazione HTML/CSS) assieme ad una prova orale che consiste nella spiegazione delle scelte progettuali effettuate con una dissertazione sugli argomenti principali del corso trattati nei testi della bibliografia, rintracciandone l'applicazione sull'elaborato d'esame.

Per studenti non frequentanti Consegna di un elaborato di progetto secondo le specifiche fornite ed esame orale. Si tratterà di un esame orale con domande e risposte toccando tutti i principali argomenti del corso con eventuali approfondimenti di dettaglio riscontrabili nella bibliografia, verificando anche la capacità di applicazione pratica attraverso la discussione dell'elaborato presentato.

Per gli studenti con certificazioni di disabilità o DSA le modalità d’esame saranno concordate in relazione alle specifiche esigenze, sentito il parere della Commissione per le differenze e l’inclusione.

Testi di esame

Per frequentanti

• Lupton, E. (2024). Thinking with type: Tipografia e progettazione grafica: una guida critica (nuova ed.) (C. Di Paolo, Trad.; con la collaborazione di R. Falcinelli). Quinto Quarto.
• Munari, B. (2017). Design e comunicazione visiva: Contributo a una metodologia didattica. Laterza.
• Materiali didattici, dispense e risorse online fornite durante il corso

Per non frequentanti

• Lupton, E. (2024). Thinking with type: Tipografia e progettazione grafica: una guida critica (nuova ed.) (C. Di Paolo, Trad.; con la collaborazione di R. Falcinelli). Quinto Quarto.
• Munari, B. (2017). Design e comunicazione visiva: Contributo a una metodologia didattica. Laterza.
• Materiali didattici, dispense e risorse online fornite durante il corso
• Krug, S. (2014). Don't Make Me Think: Un approccio di buon senso all'usabilità web e mobile. Tecniche Nuove.

Testi di consultazione e approfondimento

Strumenti e implementazione

• Miro Help Center: Guide e tutorial ufficiali Miro URL: https://help.miro.com

• Figma Learn: Tutorial ufficiali Figma URL: https://help.figma.com

• CSS-Tricks: Guide e reference CSS URL: https://css-tricks.com

• MDN Web Docs: Documentazione HTML/CSS URL: https://developer.mozilla.org

Altre informazioni

La partecipazione alla parte laboratoriale in aula non sostituisce l’esame orale in quanto non prevede valutazione da parte del docente, ma è condizione indispensabile per il raggiungimento degli obiettivi formativi. Tenuto conto della didattica laboratoriale è raccomandata una regolare frequenza.

Il ricevimento degli studenti si effettuerà dal lunedì al venerdì, previo appuntamento, concordando col docente tramite mail salvatore.paone@unistrapg.it giorno e orario.