Portfolio finale del Master IED in Web Media Design - 2008/09

1. Master in
Web Media Design
a.a. 2008/09
coordinatori:
Franco Zeri e Cristina Chiappini
studenti:
Valentina De Vecchis
Julie Grajeda
Massimiliano Lupo
Matteo Mirrione
Ilaria Moriconi
Matteo Sgambato
Daniela Verona
Luca Visone

2. Master in
Web Media Design
a.a. 2008/09

3. FONDAZIONE
MARISA
BELLISARIO
Fondazione Marisa Bellisario
architettura dei contenuti e layout grafico del nuovo sito
coordinatore:
prof. Franco Zeri
CSS e PHP
prof. Antonio Giannasca
prof. Giovanni Giannasca

4. Proposta di restyling
Prima di procedere al restyling grafico del sito, è bene riorganizzare i contenuti già presenti.
Le nuove esigenze emerse hanno reso necessaria una gestione dell’accesso alle informazioni differenziata
per categorie di utenti.
Architettura dei contenuti
Fondazione Come associarsi
Presidente
Home page
Obiettivi
Uffici e contatti
Marisa Bellisario
login Premio Edizioni
area riservata Premiate
− Adesioni/Accrediti
news della
Segnalazione candidate
fondazione
− Area download
news dal mondo
Rassegna stampa
Galleria
Servizi
Sedi Regionali
Contatti

5. Layout di
Valentina De Vecchis
home page

6. Layout di
Julie Grajeda
home page

7. Layout di
Massimiliano Lupo
home page

8. Layout di
Matteo Mirrione
home page

9. Layout di
Matteo Sgambato
home page

10. Layout di
Daniela Verona
home page

11. Layout di
Luca Visone
home page
con personalizzazione del colore
da parte dell’utente

12. Rustichelli & Mangione
architettura dei contenuti e layout grafico del sito vetrina
coordinatore:
prof. Franco Zeri
Content Design
prof. Federico Badaloni
CSS, FLASH e PHP
prof. Antonio Giannasca
prof. Giovanni Giannasca

13. Progetto di un sito vetrina
Rustichelli & Mangione è un brand che unisce ai piaceri del cibo la bellezza del design: ecco perché è
importante che la propria vetrina sul web abbia aspetto e funzionalità innovative.
Navigare fra le varie linee di prodotti, ascoltare la web radio, scaricare i podcast: tutto deve essere
un’esperienza di navigazione piacevole ai sensi.
Architettura dei contenuti
Corporate Chi siamo
Food Design Lab
Formazione
Punti vendita
Home page Contatti
Prodotti R&M Le Natà
R&M Pasqua a mano
intro in flash R&M Il cornetto di Sergio
− R&M Nonna Moderna
immagini R&M Chocolux
dei prodotti
di punta
−
web radio Eventi archivio delle performance
−
podcast
Wall blog corporate tipo bacheca
Portfolio clienti e relativi progetti

14. Progetto di Modello: Ambiente
Valentina De Vecchis
Integrazione tra ambiente di vendita e vetrina virtuale: navigare sul sito sarà come trovarsi in un ristorante
sito web flash Rustichelli & Mangione.
pagina chi siamo e prodotti

15. Progetto di Modello: Classico
Julie Grajeda
Durante il caricamento dei file la barra di progressione si riempe, rivelando una striscia arancione che
Intro in flash riprende la grafica del logo.
ed home page

16. Progetto di Modello: Video
Massimiliano Lupo
La comunicazione di questo sito sarà incentrata sull’uso delle immagini, dei video e dell’interattività,
home page offrendo un prodotto nuovo e fresco, come se fosse un gioco gestito dall’utente a 360°. Questo nuovo
modo di comunicare rappresenta la voglia di non portare l’utente ad un sovraccarico di testi da leggere,
ma un vero e proprio tour guidato.

17. Progetto di Modello: Trasparenza
Matteo Mirrione
Sfruttando le trasparenze, menu e prodotti sono sempre protagonisti nella pagina.
home page
e pagina di 1° livello

18. Progetto di Modello: Orario
Matteo Sgambato
Il sito mira ad un’esperienza di navigazione più stimolante, grazie ad un uso particolare della dimensione
pagine prodotto temporale: si naviga fra i prodotti Rustichelli & Mangione spostando le lancette di un orologio.
legate all’ora del giorno
in cui l’utente visita il sito

19. Progetto di Modello: Quadrato
Daniela Verona
Durante il caricamento del sito una composizione di quadrati appare e scompare lasciando intravedere
intro in flash il marchio dell’azienda. La stessa ambientazione viene poi ripresa nel sito, sfruttando la modularità
e pagina prodotti
dell’elemento base.

20. Progetto di Modello: Packaging
Luca Visone
Rustichelli & Mangione è sinonimo di eccellenza. Food design, ambient design, packaging si fondono con
intro in flash la migliore tradizione artigianale alimentare. La scatola Rustichelli & Mangione contiene tutto questo: non
e pagina prodotti
un semplice prodotto, ma un filosofia.

21. Smart identity
progetti di immagine coordinata legati ad una giornata di
rinverdimento di un ambiente (azione sul territorio)
coordinatore:
prof.ssa Cristina Chiappini

22. Progetto di smart identity per una giornata di rinverdimento
Cos’è una giornata di rinverdimento?
Un’incursione non violenta, volta a migliorare le aree più degradate e abbandonate delle città facendo
pulizia e piantando fiori e piante.
Cosa dovevamo realizzare?
Ogni progetto doveva creare un’immagine coordinata mutevole, ma sempre riconoscibile, legata all’evento
e al quartiere romano in cui svolgerlo.
Brainstorming

23. Progetto di Progetto 1 | Pigneto FoReSt - azionecopignola
Valentina De Vecchis
Daniela Verona Il nome deriva dal quartiere di Roma scelto per il progetto: il Pigneto.
L’azione di rinverdimento si sviluppa nella via pedonale totalmente cementificata, promuovendo un
pigneto forest
percorso di vasi in cui piantare e curare delle piante, fornite insieme ad altri accessori personalizzati per
azionecopignola
l’occasione.
Pigneto forest: Logo
Lo stile grafico sfrutta la modularità della forma a foglia e la leggibilità di un carattere moderno per
comunicare in modo efficace sia ad un pubblico giovane che meno giovane.

24. Progetto di Pigneto forest: Manifesto modulare
Valentina De Vecchis
Daniela Verona Grazie alla modularità del segno abbiamo creato un set di quattro manifesti utilizzabili sia singolarmente
sia affiancati, in modo da dare l’effetto visivo di un percorso.
pigneto forest
azionecopignola
Pigneto forest: Promozione
Per promuovere l’evento si è scelto di utilizzare un appendiporta curioso, da lasciare all’entrata delle case
della zona, come in un’azione di guerrilla marketing.
fronte retro applicazione
azionecopignola
porta
þþerde.al.pigneto
il
þ
v
Il 13 settembre 2008 alle ore 9.00 vieni in via del Pigneto,
troverai semi, terra e vasi per dare nuova vita al tuo quartiere.
La giornata di reinverdimento è promossa
dal Comune di Roma che ti chiede solamente
di portare buona volontà ed
i tuoin vicini di casa!

25. Progetto di Pigneto forest: Personalizzazioni
Valentina De Vecchis
Daniela Verona Ad accompagnare l’evento ci saranno degli accessori personalizzati, utilissimi per veicolare un’identità
visiva così veloce e dinamica.
pigneto forest
azionecopignola

26. Progetto di Progetto 2 | Re veRDe - mi ami o non mi ami?
Julie Grajeda
Matteo Sgambato Il progetto “Re Verde” è la proposta grafica per una giornata di rinverdimento del quartiere romano:
Luca Visone Re di Roma.
re verde
Re verde: Identità
Siamo partiti dalla visione della piazza centrale del quartiere, che somiglia molto alla corolla di un fiore con
i suoi petali.
L’idea della mutevolezza è data quindi dallo sfogliare di questi petali e il messaggio “Mi ami o non mi ami?”,
che immediatamente suscita l’immagine dell’innamorato che sospira davanti a un fiore, è una domanda
che il quartiere stesso pone ai suoi inquilini.
slogan e marchio

27. Progetto di Re verde: Promozione
Julie Grajeda
Matteo Sgambato Il logotipo è stato disegnato in modo da poter essere invertito verticalmente: in questo modo, i manifesti
Luca Visone possono essere appesi in due versi.
I flyer, invece, sono a forma di petalo, ognuno diverso dall’altro per colore e forma.
re verde

28. Progetto di Re verde: Layout sito web
Julie Grajeda
Matteo Sgambato
Luca Visone
re verde

29. Progetto di Progetto 3 | Be gReen - l’erba del vicino è tua
Massimiliano Lupo
Matteo Mirrione Questo progetto si sviluppa nel quartiere romano chiamato Corviale.
be green
Be Green: Logo e manifesto
Il logo e le altre immagini sono disegnati con lo stile stencil, per integrarsi meglio nella segnaletica urbana.

30. Progetto di Be Green: Applicazione sul territorio
Massimiliano Lupo
Matteo Mirrione Ipotizzando un’azione di guerrilla gardening di grande impatto visivo, abbiamo pensato di sfruttare le
strisce pedonali per comunicare questo messaggio.
be green

31. Pigneto on air
progettazione di un videoblog del quartiere Pigneto di Roma
coordinatore:
prof. Andrea Del Signore

32. Progetto di Videoblog
Massimiliano Lupo
Matteo Mirrione Il progetto prevede la realizzazione di un blog di quartiere, dove creare una community di persone che
Matteo Sgambato vivono o frequentano il Pigneto a Roma, puntando soprattutto sui contenuti video generati dall’utente.
Daniela Verona
Luca Visone
layout

33. Progetto di Video: storyboard di Massimiliano Lupo
Massimiliano Lupo
Matteo Mirrione Musica: ”Ganja man” di Aphrodite
Matteo Sgambato
Daniela Verona
Luca Visone
storyboard

34. Progetto di Video: storyboard di Luca Visone
Massimiliano Lupo
Matteo Mirrione Musica: ”Urban Loop n°1” di Matteo Sgambato
Matteo Sgambato
Daniela Verona
Luca Visone
storyboard

35. eventi Creative Commons
due progetti legati alla promozione delle licenze Creative Commons
coordinatore:
prof. Lorenzo De Tomasi

36. Progetto di Progetto 1 | FAPPeR 3
Valentina De Vecchis
Massimiliano Lupo Nell’ottica delle licenze Creative Commons abbiamo realizzato un progetto creativo per la distribuzione dei
Ilaria Moriconi CD “Liberalarte!3”, contenente musica libera da diritti SIAE.
Daniela Verona Il progetto cerca quindi di dare un volto e un’organizzazione ad un metodo di distribuzione delle opere
fapper 3 a basso costo, che non debba passare dalla normale filiera commerciale e che stimoli esercizi, come
botteghe equosolidali e discount, ad appoggiare l’idea.
Fapper3: Logo
Considerando che questo marchio deve essere sempre associato al logo già esistente del Fronte Popolare
della Musica Libera, stile e colori cercano di armonizzarsi.
logo scelto
e prove di colore

37. Progetto di Fapper3: Packaging
Valentina De Vecchis
Massimiliano Lupo Sempre per abbattere i costi, anche il packaging deve essere funzionale, ma senza perdere la sua bellezza.
Ilaria Moriconi Abbiamo quindi progettato un’involucro da realizzare con cartoncino riciclato, che, riprendendo la grafica
Daniela Verona del logo Fapper3, lascia intravedere da una finestra la reale copertina del CD.
fapper 3 In questo modo non c’è bisogno di personalizzare il packaging ogni volta che si deve cambiare il
contenuto.
fronte retro
con la finestra con i loghi ed una scheda
per il CD contenuto come nei prodotti equosolidali
struttura
con fustella e cordonatura

38. Progetto di Progetto 2 | JAMenDo live
Julie Grajeda
Matteo Mirrione Per la promozione di Jamendo, sito interamente dedicato alla distribuzione di musica sotto licenze Creative
Matteo Sgambato Commons, abbiamo pensato ad una performance che alla bellezza della musica d’autore unisse l’uso
Luca Visone intensivo delle nuove tecnologie.
jamendo live
Jamendo live: Preview della performance
pannelli led per
i titoli delle canzoni
retropalco con la
grafica jamendo live
notebook con la
playlist delle canzoni
da poter inviare
via bluetooth
il pubblico tramite
un cellulare dotato
di bluetooth può
ricevere la traccia
audio delle canzoni
che ascolta

39. Progetto di Jamendo live: Merchandising
Julie Grajeda
Matteo Mirrione
Matteo Sgambato
Luca Visone
jamendo live

40. Progetto di Jamendo live: Promozione
Julie Grajeda
Matteo Mirrione Oltre ad una più convenzionale campagna stampa con volantini e poster, vogliamo sperimentare la più
Matteo Sgambato curiosa tecnica dei QR code, diffusi tramite sticker o stencil.
Luca Visone I QR code sono l’evoluzione dei codici a barre e permettono di memorizzare informazioni, in questo caso le
jamendo live URL delle playlist di Jamendo, che si possono consultare tramite la fotocamera di un cellulare abilitato.

41. exibart
analisi e sviluppo della strategia di comunicazione del portale web
coordinatore:
prof. Paolo Subioli

42. Progetto di Analisi: Exibart.com
Valentina De Vecchis
Julie Grajeda Exibart è una testata giornalistica, sia cartacea che online, riguardante il mondo dell’arte.
Massimiliano Lupo In particolare si occupa di eventi, mostre, musei, artisti ed opere d’arte, ma nonostante l’alta qualità dei suoi
Matteo Mirrione contenuti, il suo portale web è ancora sviluppato seconda un’ottica ormai superata, dove chi naviga può
Ilaria Moriconi solo consultare e non interagire.
Matteo Sgambato
Daniela Verona
Luca Visone Quattro livelli di interazione utente - web2.0
analisi e strategia
Nei siti del cosiddetto “web 2.0” - caratterizzati da un ruolo più attivo dell’utente - il coinvolgimento degli
stessi nella produzione di contenuti può avvenire a livelli diversi, secondo una scala di intensità che fa
assumere loro ruoli differenti.
Il segreto dei siti attualmente di maggior successo sta, infatti, nell’aver saputo sfruttare tutti e quattro i
livelli, affinché “nulla vada sprecato” nell’attenzione e nelle attività degli utenti.
1. produzione contenuti Attuale home page - web 1.0
2. produzione giudizi e commenti
3. fruizione contenuti
generati dagli utenti
4. sola lettura

43. Progetto di Analisi della nuova strategia di comunicazione
Valentina De Vecchis
Julie Grajeda
Massimiliano Lupo Target Addetti ai lavori
Matteo Mirrione
Generalista Fruitori locali di distribuzione “artistici”
Ilaria Moriconi
Matteo Sgambato (gallerie, accademie, ...)
Daniela Verona Fruitori locali di distribuzione “commerciali”
Luca Visone (ristoranti, parrucchieri,... selezionati)
analisi e strategia Particolare Artisti emergenti
Studenti materie artistiche (inserimento)
Studenti materie di comunicazione
(partecipazione)
Possibilità di scrivere articoli
Utenti con interessi geolocalizzati
Utenti TV satellitare (canale specifico)
Obiettivi Aumento bacino d’utenza
Aumento inserzionisti (soprattutto area moda)
Fidelizzazione utenti (registrazione web e abbonamento .onpaper)
Percezione dei Sottovalutazione dei competitor che al momento stanno crescendo
competitor (vedi www.teknemedia.net)
MARKETING STRATEGICO: MARKETING OPERATIVO:
non esplicita il contenuto ma quindi solo mezzo di distribuzione
soddisfa un bisogno di informazioni
cura per la comunicazione dei è autoreferenziale
servizi (titoli più accattivanti)

44. Progetto di Sintesi della nuova strategia di comunicazione
Valentina De Vecchis
Julie Grajeda • Concretizzazione degli obiettivi
Massimiliano Lupo • Ottimizzazione delle parole chiave relative al mondo dell’arte
Matteo Mirrione • Maggior cura del design
Ilaria Moriconi • Puntare sulla nuova versione del giornale per la moda che ha bisogna ancora di “piazzarsi”
Matteo Sgambato
Daniela Verona Tutto questo si può tradurre anche in un’azione di viral marketing utilizzando video da diffondere nel
Luca Visone web che, attraverso il passaparola, comunichino l’attenzione di questa testata non solo per l’arte, ma anche
per i contenuti e le opinioni degli utenti.
analisi e strategia
Ipotesi di virale sull’arte: Achille Bonito Oliva, Totò e Duchamp
Storyboard di Massimiliano Lupo
“frase iniziale sull’arte”
convergenza
nuovi media ALB
ALB
BLA
BLA
BLA..
esempio: ..ALB
L’arte non morirà
mai ...
Voce fuori campo Scheda tecnica giocosa Incontro tra Duchamp Entrambi cercano di Inizia il gioco.
di Achille Bonito Oliva. sui tre personaggi. e Totò. Dibattito vivo far prevalere la propria Zoomata sugli scacchi.
sull’amore per l’arte e la versione della
Musica tecnologica
Gioconda. Scritte DADA Gioconda e decidono di
(stile pubblicità Mito).
appaiono sullo schermo. giocarsela a scacchi.
FINE ...
? ? FRASE FINALE
convergenza
interazione
condivisione
cooperazione
La Gioconda deride Convergenza La Gioconda si collega I due pretendenti Voce fuori campo
i due che giocano a Arte - Scienza. su Google e trova si accorgono della di Achille Bonito Oliva.
scacchi ed esce dal La Gioconda si siede al tutte le immagini su Gioconda al computer,
Avvento del social
quadro. computer e si collega sé stessa. ma ormai è troppo
network.
alla rete. Zoomata sul monitor. tardi: si è innamorata...

45. Partito Democratico
strategia di comunicazione per i candidati alle Elezioni Europee 2009

46. Progetto di il tuo sogno in europa
Daniela Verona
Luca Visone La strategia di comunicazione parte da due bisogni importanti per l’uomo: sognare e condividere.
concept
Si chiede quindi agli elettori un messaggio, che rappresenti il proprio sogno, invitandoli a partecipare
attivamente alla costruzione di un Europa basata realmente sui loro ideali.
Il progetto si sviluppa attraverso diverse forme di comunicazione:
Gadget Evento 1. Tour itinerante
2. Interaction design
Web 2.0 galleria di foto Flickr blog collegato al sito ufficiale
Gadget: cartolina - mattoncino
La cartolina è il mezzo attraverso cui si invitano tutti gli elettori a partecipare al “Sogno d’Europa”.
Mattone dopo mattone, sogno dopo sogno, si costruirà l’Europa ideale, fatta di tanti messaggi e speranze,
raccolte durante gli eventi organizzati e l’invio della foto su una galleria online (es. Flickr)
Questo semplice supporto può essere distribuito facilmente e sfruttare l’idea virale del passaparola per
diffondersi.

47. Progetto di Evento: tour itinerante
Daniela Verona
Luca Visone Nelle varie circoscrizioni si organizzeranno gli eventi promossi tramite la cartolina-mattoncino che si
svilupperanno in due modi:
concept
1. Another brick in the wall
Attraverso l’utilizzo del velcro (già in parte applicato sulla cartolina) si da la possibilità di posizionare i
mattoncini su un pannello, dove i messaggi costruiranno fisicamente la sagoma dell’Europa.
2. Interaction design
Ad accompagnare l’azione ci sarà un intervento di interaction design, che si svolge parallelamente sia
su internet che nelle circoscrizioni. I partecipanti potranno esprimere il loro desiderio tramite i computer
messi a disposizione nella location o collegandosi al sito web di riferimento.
Tutti questi dati verranno immagazzinati in un database e rielaborati in tempo reale in una “tag cloud”,
che sarà visualizzata sugli schermi installati.
Prendendo spunto da un progetto realmente realizzato da Xtend3d Lab *, si può pensare ad una sfera
appesa all’interno di questa struttura, che permetta all’utente di navigare interattivamente in questo
“universo dei desideri”.
* progetto “Hyperwish” di Xtend3d Lab Associazione Culturale (http://www.vimeo.com/3340990)

48. Progetto di La tag cloud con i colori del Partito Democratico e le foto raccolte durante l’evento “Another Brick in the
Daniela Verona wall” potranno essere diffusi anche attraverso gadget, come la stampa su tshirt.
Luca Visone
concept Web 2.0: Flickr e blog
Parallelamente agli eventi, si sviluppa un’altra strategia completamente web 2.0, dove gli elettori vengono
invitati a fotografare il proprio messaggio per inviarlo nella galleria fotografica creata su Flickr.
Un blog collegato al sito del Partito Democratico conterrà il widget per visualizzare la gallery
costantemente aggiornata e permettere la nascita di una community di persone informate sulle iniziative
che possono loro stessi promuovere ed organizzare.
L’obiettivo finale della strategia di comunicazione è far percepire l’attenzione che i candidati hanno per le
reali esigenze dei singoli elettori.
Il Partito Democratico ha un nuovo progetto per l’Europa ... il tuo!

49. Master in
Web Media Design
a.a. 2008/09
coordinatori:
Franco Zeri e Cristina Chiappini
studenti:
Valentina De Vecchis
Julie Grajeda
Massimiliano Lupo
Matteo Mirrione
Ilaria Moriconi
Matteo Sgambato
Daniela Verona
Luca Visone