Course Syllabus
Area di apprendimento
1: Studio delle modalità mediante le quali si attua la comunicazione.
Obiettivi formativi
Conoscenza e comprensione
Lo studente verrà guidato, attraverso il corso, all’adozione di un occhio critico nella progettazione di interfacce per la comunicazione sul web. Da un lato saranno offerti strumenti teorici per la lettura della comunicazione via web, dall’altro verranno offerti attraverso esercitazioni pratiche, gli strumenti tecnici per la creazione di siti web secondo i principi della User Centered Design, che pone l’utente finale (e non il sito web stesso) al centro della progettazione comunicativa.
Capacità di applicare conoscenza e comprensione
Saper applicare un giudizio critico sulla composizione delle interfacce nel web.
Saper progettare pagine web e interfacce web.
Sviluppo di codice HTML/CSS base.
Conoscenza di base del software Figma e di altri strumenti di progettazione grafica innovativi o ampiamente adottati per il web.
Contenuti sintetici
Il corso di Informatica e grafica per il web è mirato alla descrizione dell’intero processo di creazione di un sito web fornendo da un lato una conoscenza specifica degli aspetti teorici e progettuali legati allo sviluppo di un ipertesto fruibile via web (concetti di Usabilità, Interaction Design e User Experience) e dall’altro l’acquisizione di strumenti di sviluppo specifici (Figma, Adobe Photoshop, Adobe Dreamweaver, Generative AI tools).
Programma esteso
- Principi base di usabilità web, esperienza e interazione web (UX / UI).
- Programmazione HTML 5/CSS 2 e CSS 3.
- Progettazione e wireframing.
- Figma e altri strumenti di graphic design per il web.
Prerequisiti
Minima conoscenza dell’utilizzo dei sistemi operativi (creazione file, cartelle, estensioni di file) e web based (browser, email).
Metodi didattici
I metodi didattici prevedono lezioni frontali, discussioni in aula ed esercitazioni pratiche.
Illustrazione dettagliata dell'adozione della codifica HTML 5 e CSS 3.
Esercitazioni pratiche con FIGMA.
Tutto il materiale del corso (es. slides, codice HTML e CSS) è reso disponibile sul sito e-learning del corso, in modo che anche gli studenti non frequentanti possano utilizzarlo.
Il corso è erogato interamente in lingua inglese.
Modalità di verifica dell'apprendimento
La verifica dell'apprendimento comprende due revisioni progettuali in itinere che mirano all’impostazione del concept progettuale dell’elaborato. La prima revisione progettuale si colloca a metà del corso, la seconda revisione a fine corso. Le revisioni progettuali sono obbligatorie per i frequentanti e facoltative per gli studenti non frequentanti.
Al termine del corso è prevista una prova scritta (45 minuti; effettuata il giorno dell'appello) e lo sviluppo di un progetto di gruppo (da consegnare solitamente la settimana precedente lo scritto). Sia il progetto che la prova scritta sono obbligatori per tutti gli studenti.
Lo scritto individuale verte sugli argomenti teorici trattati a lezione ed è composto da 12 domande a crocette e 2 domande aperte. Le domande a scelta multipla intendono verificare l’acquisizione delle conoscenze relative ai processi di progettazione, all’utilizzo di FIGMA e alcuni aspetti legati alla programmazione web. Le domande aperte verteranno invece sulle conoscenze acquisite in ambito UX/UI e usabilità delle interfacce web.
Attraverso l’elaborato progettuale di gruppo (gruppi da 2/3 studenti per la creazione di un sito web completo e navigabile in formato HTML/CSS) si intende verificare il livello tecnico di padronanza dei linguaggi di programmazione HTML e CSS e di progettazione grafica con Photoshop raggiunta.
Breve discussione facoltativa dell’elaborato finale in fase di orale.
Gli studenti/le studentesse Erasmus possono contattare il docente per concordare la possibilità di studiare su una bibliografia in lingua inglese e/o la possibilità di sostenere l'esame in inglese
Testi di riferimento
- Beaird J., Persuati C. (2021). Web design per creativi, grafici, sviluppatori. Apogeo.
- Qualsiasi guida di HTML e CSS online.
Informazioni dettagliate circa altro materiale didattico saranno pubblicate sulla relativa pagina del sito e-learning.
Sustainable Development Goals
Learning area
1: Study of the means by which communication takes place.
Learning objectives
Knowledge and understanding
Students will be guided with a critical eye in the design process of web interfaces. On the one hand, theoretical aspects for understanding the main aspects of the communication through the web will be offered, on the other hand technical tools will be presented for developing websites following the main principles of the User Centered Design, which considers the users (and not the website itself) central for the whole design process.
Applying knowledge and understanding
Adopting a critical judgment when evaluating web interfaces.
Knowing how to design web pages and web interfaces.
Development of basic HTML / CSS code.
Basic knowledge of Figma software and other innovative or widely adopted graphic design tools for the web.
Contents
The course Computer and graphics for the web aims at describing the design process of a web interface (i.e., web sites). Students will be provided with both theoretical knowledge (usability, interaction design and user experience elements) and practical skills, such as the use of specific development tools (Adobe Photoshop, Adobe Dreamweaver, Generative AI tools) for designing usable web interfaces.
Detailed program
- Elements of web usability, user interaction and user experience (UX / UI).
- Basic HTML 5 / CSS 2 and CSS 3 programming.
- Wireframing design.
- Figma and other innovative or widely adopted graphic design tools for the web.
Prerequisites
Basic knowledge of computer and use (file creation, folders, file extensions, browser, email).
Teaching methods
Teaching methods include lectures, classroom discussions and practical exercises.
Step by step illustration of HTML 5 and CSS 3 coding adopting.
Practical exercises with FIGMA.
All course material (e.g., slides, HTML and CSS code) is made available on the e-learning website of the course, so that also non-attending students can use it.
The lessons are held in English.
Assessment methods
Two ongoing project reviews are planned during the course (mid-course and at the end of the course) aimed at supporting the students during the design process of their project. The reviews are mandatory for attending students and optional for non-attending students.
The final exam includes a written test (45 minutes) and the development of a project. Both the project and the written test are mandatory for all students.
The written exam is aimed at ascertaining the effective acquisition of theoretical and practical aspects discussed during class. It is composed of 12 multiple choices and 2 open questions.
The multiple-choice questions intend to verify the acquisition of knowledge related to the design processes, the use of Figma for developing web interfaces and aspects related to web programming tecniques. The open questions will instead focus on UX / UI and web usability notions.
Finally, the group project (HTML / CSS basic website developed by max 2-3 students) aims at assessing the achieved level for HTML and CSS programming languages and graphic design with Photoshop.
Optionally, students can also discuss the presented project orally. International students (erasmus) can take the exam in English.
Textbooks and Reading Materials
- Beaird J., Persuati C. (2021). Web design per creativi, grafici, sviluppatori. Apogeo.
- Any HTML & CSS refernce guide.