Web design

A.A. 2021/2022

Docente: Daniele Dore

Programma didattico

Il corso presenta concetti teorici e strumenti pratici per mettere in grado lo studente di progettare, realizzare e verificare un sito web seguendo le più moderne e migliori pratiche d'uso nello sviluppo (best practices). In particolare, il corso si sofferma sugli aspetti di progettazione e del design.

L'insegnamento "Web Design" è inserito nei piani di studi degli studenti delle scuole di Nuove Tecnologie dell'Arte e Grafica e ha un carico di lavoro di 8 crediti formativi (CFA). E' possibile inserire l'insegnamento nel piano di studi come esame a scelta anche per gli studenti di altre scuole.
Sono propedeutici al corso gli esami di Fondamenti di Informatica e Elaborazione Digitale dell'Immagine (ovvero è obbligatorio superarli prima di poter frequentare Web Design), mentre è consigliata la frequenza e il superamento dell'esame di Uso dei Software per il Web.
Per gli studenti che non hanno frequentato l'esame di Uso dei Software per il Web, il programma didattico prevede una parte propedeutica necessaria per acquisire competenze di base minime su aspetti tecnico/informatici legati alla progettazione per il web.

Gli argomenti trattati sono i seguenti:

  1. Progettazione di un sito web
  • Principi di base che regolano il design di un "buon" sito web
  • Osservazione, analisi delle informazioni, definizione dei requisiti informativi/funzionali e redazione del documento guida;
  • definizione del concept e design della User eXperience
  • Design dell'interfaccia grafica (Web User Interface): la struttura logica, il layout grafico e lo stile
  • realizzazione di bozze e prototipi
  • problematiche tecniche e soluzioni per la visualizzazione su diversi dispositivi e piattaforme
  • usabilità di un sito web e testing
  • Tecniche di progettazione e best practices
    • progettazione del layout basata sulle griglie
    • design responsivo (responsive web design)
    • Mobile first
  1. Sviluppo
  • Richiami e nozioni tecniche di base
    • Internet e dispositivi
    • Browser e web server
    • HTML, CSS e JavaScript
  • Approfondimenti sui formati e gli standard del web
    1. utilizzo di framework CSS (es. 960 Grid System, W3.CSS, Bootstrap, Foundation)
    2. nozioni generali e pratica di utilizzo di framework JavaScript
    3. uso del framework jQuery e di suoi plugin per estenderne le funzionalità
  • Software
    • Adobe Photoshop CC per la creazione di bozze e prototipi
    • Adobe Dreamweaver CC per la creazione e la gestione delle pagine web
    • Altri tools dedicati alla progettazione e prototipazione rapida (es. Adobe XD, Figma)

Il corso prevede lezioni teoriche di presentazione dei concetti e la successiva applicazione e sperimentazione pratica in laboratorio informatico multimediale.
A tal fine viene incoraggiata la creazione di gruppi di lavoro per lo sviluppo di progetti, anche interdisciplinari, finalizzati allo sviluppo delle necessarie competenze pratiche.Come materiale di studio e di approfondimento, si consiglia la consultazione delle guide al webdesign presenti sul sito HTML.it (www.html.it) e w3shools.com per i linguaggi; durante le lezioni verrà fornita linkografia di materiali di studio e approfondimento, mentre per argomenti specifici su funzioni dei software, è consigliato l'utilizzo della guida in linea e dei tutorial dei programmi maggiormente utilizzati nel settore (Adobe Photoshop, Adobe Dreamweaver, etc). La verifica delle nozioni teoriche e delle relative abilità pratiche sarà effettuata mediante la discussione dei progetti, dei prototipi e dei siti web elaborati durante il corso.

Bibliografia

Libri

  • Web Design per creativi, grafici, sviluppatori, Jason Beaird, versione italiana edita da Apogeo
  • Web Usability, Jacopo Pasquini e Simone Giomi, Hoepli
  • Le leggi della semplicità, John Maeda, Bruno Mondadori
  • Responsive Web Design, Gianluca Troiani, Apogeo
  • Tipografia web, Matteo Balocco, Apogeo

Guide e risorse online

  • Linguaggi e framework
    • w3schools.com
  • Progettazione, strumenti e tendenze
    • HTML.it
    • yourinspirationweb.com