Lezione introduttiva

Atelier di Web e Interface design

Proff. Federica Dal Falco, Marco Quintavalle, Elena Valentini

Roma, 1 marzo 2009

Atelier di Web e Interface design

Proff. Luca Capitani, Federica Dal Falco, Elena Valentini

Roma, 21 marzo 2011

21 marzo 2011Lezione introduttiva Pagina 2

Articolazione dell’Atelier di Web e Interface design

• Laboratorio di Web e interface – Prof. Luca Capitani: luca@lcwebstudio.com

– 72 ore (6 cfu)

• Laboratorio di Arti visive – Prof. ssa Federica Dal Falco: federica.dalfalco@libero.it

– 36 ore (3 cfu)

• Ideazione e progettazione di prodotti multimediali 1– Prof.ssa Elena Valentini: elena.valentini@uniroma1.it

– 24 ore (3 cfu)

Lezione introduttiva Pagina 3

Obiettivi del corso di laurea in Design, Comunicazione visiva e multimediale

• formare una figura di progettista in grado di operare nei campi della comunicazione multimediale, delle numerose declinazioni della progettazione interattiva e ipermediale, della progettazione e produzione di artefatti comunicativi, della realizzazione d’interfacce iconiche e tridimensionali, e di ideare e controllare nei suoi aspetti estetici e comunicativi gli artefatti virtuali che interagiscono con la vita quotidiana dell’uomo all’interno di una società industriale matura, e di far uso, della massima varietà di circostanze, dei molteplici strumenti necessari: – per confrontarsi con le dinamiche di innovazione riferite al prodotto

comunicativo (negli aspetti tecnico-produttivi, tecnico-funzionali e formali);– per confrontarsi con le innovazioni socio-culturali, di consumo e di mercato

che hanno diretta influenza sulle strategie comunicative, che concorrono alla definizione dell’identità di un’istituzione, di un’impresa o di un qualsivoglia soggetto;

– per confrontarsi infine, con gli interventi progettuali sul “contesto” di produzione e d’uso degli artefatti comunicativi (dagli aspetti qualitativi che contribuiscono a migliorarne la percezione e la fruizione).

21 marzo 2011

Lezione introduttiva Pagina 4

• Il percorso formativo è articolato in modo che lo studente alla fine del primo anno conosca e comprenda: – le caratteristiche sociali che hanno portato alla definizione e all’evoluzione delle

diverse culture visuali; – le dinamiche e le vicende che hanno caratterizzato la storia delle arti visuali, sia in

epoca moderna che contemporanea, nei diversi media quali stampa, cinema, televisione, fino alle più recenti modalità multimediali;

– le tecniche di programmazione e di rappresentazione assistita dal computer fino alla elaborazione di progetti di computer grafica;

– le problematiche, lo sviluppo e l’elaborazione tecnica definitiva, nonché esecutiva, di prodotti visuali nell’ambito della grafica identitaria, editoriale e pubblicitaria, con una forte integrazione analitica e teorica da parte delle discipline della Comunicazione;

– le problematiche, lo sviluppo e l’elaborazione tecnica definitiva, nonché esecutiva, di prodotti visuali nell’ambito della grafica multimediale, con applicazioni nella progettazione di interfacce e del web, con una forte integrazione analitica e teorica da parte delle discipline della Comunicazione

Obiettivi del corso di laurea in Design, comunicazione visiva e multimediale

21 marzo 2011

Lezione introduttiva Pagina 5

Sbocchi professionali previsti per i laureati in Design, comunicazione visiva e multimediale

• Ambiti professionali dell'attività del laureato magistrale sono costituiti, tra gli altri, da tutti i settori della comunicazione, dei servizi e dei nuovi media.

• I laureati potranno svolgere attività come liberi professionisti o collaboratori per

– servizi di progettazione, – imprese, aziende, agenzie che operano nel campo del disegno industriale, delle

comunicazioni visive e multimediali.• Il corso prepara alle professioni di:

– Specialisti nelle pubbliche relazioni, dell'immagine e simili – Direttori artistici– Scenografi– Disegnatori Artistici e Illustratori– Tecnici della Pubblicità– Grafici Pubblicitari ed Editoriali – Web designer – Multimedia Designer– Visual Merchandiser– Tecnici per Allestimenti di Stand

Nota: classificazione ISTAT

21 marzo 2011

Lezione introduttiva Pagina 6

Obiettivi dell’Atelier di Web e Interface Design• Introdurre i concetti base legati all’editoria multimediale• Far acquisire saperi e abilità di analisi di un prodotto ipermediale nelle sue

componenti progettuali, linguistiche e strutturali• Illustrare le principali metodologie di lavoro per la progettazione (con accenni alla

produzione e distribuzione) di un prodotto multimediale off line e i relativi concetti teorici>>> propedeuticità rispetto all’insegnamento di Ideazione e progettazione dei prodotti multimediali

2(secondo anno)

• Conoscere repertori di immagini propri delle arti visive, attraverso l’analisi delle forme e delle tecnologie classificando i materiali di studio in relazione alla loro evoluzione nel tempo

• Saper metter in relazione testi e immagini, per promuovere un’attitudine al progetto trasversale adeguato alla contemporanea complessità delle esigenze di comunicazione e fruizione

• Concepire prodotti immateriali mirati alla valorizzazione di relazioni tra discipline affini• Presentare metodologie per l’analisi dei requisiti e la progettazione di un prodotto

software. Illustrare le linee guida per l’implementazione di interfacce utente per il web.• Fornire le conoscenze e gli strumenti per lo sviluppo tecnico di un sito web secondo i

più recenti standard e criteri di usabilità e accessibilità.• Illustrare la strategia, le tecniche e gli strumenti per il design di interfacce utente per

dispositivi mobili.

21 marzo 2011

Lezione introduttiva Pagina 7

Contenuti e temi

Ideazione e progettazione di prodotti multimediali

• Dall’editoria tradizionale a quella multimediale: i prodotti multimediali

– definizioni di base: l’editoria multimediale e i prodotti multi/ipermediali – processo di convergenza– analisi di un prodotto ipermediale nelle sue componenti progettuali,

linguistiche e strutturali

• Le fasi di ideazione e progettazione di un titolo ipermediale: dal concept alla distribuzione – Concept– SWOT Analysis e studio di fattibilità – Progettazione della struttura e dell’interfaccia – Accenni di produzione editoriale, industriale e produzione

21 marzo 2011

Lezione introduttiva Pagina 8

Laboratorio di Arti Visive

• Storia ed evoluzione dell’arte numerica – Arti e nuove tecnologie. Storia ed evoluzione dell’arte video e

numerica

– La nascita dell’arte video

– Ambienti interattivi e mondi virtuali

• La tecnologia come chiave delle attività artistiche– Rapporti tra antico e contemporaneo: interpretazioni e opere

multimediali

– Le nuove tecnologie nel campo delle differenti arti

Le lezioni saranno integrate da contributi di specialisti ed esperti.

Contenuti e temi

21 marzo 2011

Lezione introduttiva Pagina 9

Contenuti e temi

Laboratorio di Web e interface• Introduzione al web, nozioni di progettazione sw e

analisi dei requisiti. Processo di sviluppo di un sito web.• Fondamenti di web e interface design• Analisi di un sito nelle sue componenti progettuali,

linguistiche e strutturali. • Sviluppo HTML, CSS• Tecniche base di ottimizzazione di un sito web e

posizionamento (SEO)• Approfondimenti su Usabilità e Accessibilità• Fondamenti di Mobile Web e Application Design• Seminari su: principali pacchetti per lo sviluppo ed

impaginazione delle pagine web, software di grafica vettoriale, di fotoritocco e animazione (Suite Adobe)

21 marzo 2011

Lezione introduttiva Pagina 10

Il “tema-guida” dell’Atelier e del project work: restyling del sito di un museo

Attività previste nel modulo di Ideaz. e prog. di prodotti multimedialiPrima parteAnalisi del sito secondo la seguente traccia:• analisi della struttura del prodotto• analisi della forza editoriale del prodotto • analisi del linguaggio ipermediale • analisi dei contenuti multimediali • analisi delle soluzioni tecniche • swot analysis e valutazione sintetica finaleSarà svolto, ai fini del report di analisi del sito che confluirà nel project work, un benchmarking di

siti museali

Seconda parte (l’effettivo approfondimento sulla seconda parte sarà deciso in base all’andamento della prima)

Riflessione sull’opportunità e fattibilità di un prodotto multimediale di supporto al sito del museo

Output: report di analisi del sito + (eventuale) PPT su ideazione e progettazione di un prodotto off line coerente con il sito e relativa fattibilità

21 marzo 2011

Lezione introduttiva Pagina 11

Attività previste nel Laboratorio di Arti visive Le attività del laboratorio, integrate da una serie di lezioni e da contributi esterni sono trasversali ai due corsi paralleli e riguardano la raccolta, la predisposizione e l’elaborazione di pacchetti costituiti da testi+immagini che saranno sistematizzati nelle sezioni del sito ed organizzati nel prodotto off-line. Il Laboratorio offre anche l’opportunità di sperimentare interpretazioni libere, di tipo artistico, in relazione ad opere ed oggetti conservati nel Museo e di immaginare valorizzazioni innovative degli spazi tramite tecnologie multimediali.

Prima parte• Visita al Museo scelto, raccolta di dati e materiali e concept relativo

all’elaborazione del pacchetto testo+immagini.

Seconda parte. Sviluppo ed elaborazione del concept presentato in relazione alle altre attività dei

corsi dell’Atelier. Realizzazione di un prodotto grafico in cui viene restituita la ricerca e l’elaborazione del pacchetto testo+immagini. Potranno essere sviluppati, parallelamente agli obiettivi del corso, concept che interpretano liberamente spazi o oggetti del Museo tramite tecnologie multimediali.

21 marzo 2011

Il “tema-guida” dell’Atelier e del project work: restyling del sito di un museo

Lezione introduttiva Pagina 12

Attività previste nel Laboratorio di Web e Interface

L'obiettivo è quello della costruzione di un sito museale e di un prototipo di applicazione per iPhone.

• Definizione delle linee guida del progetto, raccolta dei requisiti utente, stesura di un documento di specifica e di un Project Plan.

• Definizione dell’architettura dei contenuti e del modello di interazione del sito web e dell’app.

• Sviluppo di un prototipo del sito web e successiva implementazione.

• Sviluppo di un prototipo funzionale dell’app.

21 marzo 2011

Il “tema-guida” dell’Atelier e del project work: restyling del sito di un museo

Lezione introduttiva Pagina 13

www.museomanzu.beniculturali.it

21 marzo 2011

Il “tema-guida” dell’Atelier e del project work: restyling del sito del Museo Manzù

Lezione introduttiva Pagina 14

Calendario didattico

Note organizzative:

• Le lezioni si svolgono

• il lunedì dalle 14 alle 18 in Aula B7, Sede di Piazza Borghese

• il venerdì dalle 8.10 alle 14 in Aula F3, Sede di Via Flaminia

• Il calendario e le date delle revisioni saranno comunicati nei prossimi giorni

21 marzo 2011

Lezione introduttiva Pagina 15

Organizzazione del lavoro per il PW

• Formazione di gruppi di lavoro di 2 al massimo 3 persone

• 2 o più revisioni per ciascun modulo secondo il calendario

• Al termine di alcune lezioni verranno comunicate ai ragazzi le selezioni di libri da studiare utili: – sia per gli studenti frequentanti, al fine di sistematizzare e

approfondire i temi affrontati in aula e le conoscenze da applicare al project work

– sia per gli studenti non frequentanti, al fine di dare un supporto per lo studio degli argomenti del corso per lo svolgimento del project work

21 marzo 2011

Lezione introduttiva Pagina 16

Il primo compito per il project work

• Formare i gruppi di lavoro• Ogni gruppo di lavoro individuerà un sito museale

per il benchmark• Comunicare alla prof. ssa Valentini entro il 30

marzo (elena.valentini@uniroma1.it)– Composizione del proprio gruppo di lavoro (nome,

cognome, mail e telefono dei partecipanti)– Sito museale scelto per il benchmark

21 marzo 2011

Lezione introduttiva Pagina 17

Modalità d’esame• Discussione del Project Work alla presenza dei tre docenti. Il PW sarà costituito da

– Report di analisi del sito (Rif. Prof.ssa Valentini)– Schematic del sito (schema ad albero dell'intera mappatura del sito con in evidenza i link tra le sezioni), Home

page e una pagina interna collegate in modo interattivo (Rif. Prof. Capitani)– Realizzazione di un prodotto grafico in cui viene restituita la ricerca e l’elaborazione del pacchetto testo+immagini.

Concept che interpretano liberamente spazi o oggetti del Museo tramite tecnologie multimediali (Rif. Prof.ssa Dal Falco)

– prototipo di interfaccia utente per dispositivi mobili di ultima generazione (Rif. Prof. Capitani)– (eventuale) power point sullo studio di fattibilità e sull’ideazione e progettazione di un cd-rom collegato al sito del

Museo (Rif. Prof. ssa Valentini)

• Domande di approfondimento sulle slide impiegate dai docenti a lezioni e sugli articoli forniti durante le lezioni + sul seguente libro di testo

– V. Eletti, Manuale di editoria multimediale, Laterza 2003, 2009

• Bibliografia di approfondimento–  P. Morville, L. Rosenfeld, Information Archtecture for the World Wide Web, O'Reilly Publishing, Cambridge, England, 1998.– S. Krug, Don’t Make me think, Feltrinelli, 2006.– P. Lynch, S. Horton, Web Style Guide: Basic design principles for creating Web sites, 3rd Ed. New Haven, Yale University Press,

2008 (disponibile gratuitamente on line all'indirizzo http://webstyleguide.com/wsg3/index.html)

• Voto finale unico verbalizzato su un unico cedolino

21 marzo 2011

Lezione introduttiva Pagina 18

Esempi dei pw realizzati dai corsisti lo scorso anno

• “tema-guida” dell’Atelier e del project work: restyling del sito http://www.museoandersen.beniculturali.it/

21 marzo 2011

Lezione introduttiva Pagina 19

Altre informazioni organizzative

• Bacheca elettronica disponibile all’indirizzo

http://www.comunicazione.uniroma1.it/HomeCattedra.asp?IdCattedra=3935&IdLaurea=0

21 marzo 2011