Portfolio Master IED in Web Media Design

4,035 views

Published on

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

Published in: Education, Design, Business

Portfolio Master IED in Web Media Design

  1. 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. 2. Master in Web Media Design a.a. 2008/09
  3. 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. 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. 5. Layout di Valentina De Vecchis home page
  6. 6. Layout di Julie Grajeda home page
  7. 7. Layout di Massimiliano Lupo home page
  8. 8. Layout di Matteo Mirrione home page
  9. 9. Layout di Matteo Sgambato home page
  10. 10. Layout di Daniela Verona home page
  11. 11. Layout di Luca Visone home page con personalizzazione del colore da parte dell’utente
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 28. Progetto di Re verde: Layout sito web Julie Grajeda Matteo Sgambato Luca Visone re verde
  29. 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. 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. 31. Pigneto on air progettazione di un videoblog del quartiere Pigneto di Roma coordinatore: prof. Andrea Del Signore
  32. 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. 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. 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. 35. eventi Creative Commons due progetti legati alla promozione delle licenze Creative Commons coordinatore: prof. Lorenzo De Tomasi
  36. 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. 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. 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. 39. Progetto di Jamendo live: Merchandising Julie Grajeda Matteo Mirrione Matteo Sgambato Luca Visone jamendo live
  40. 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. 41. exibart analisi e sviluppo della strategia di comunicazione del portale web coordinatore: prof. Paolo Subioli
  42. 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. 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. 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. 45. Partito Democratico strategia di comunicazione per i candidati alle Elezioni Europee 2009
  46. 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. 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. 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. 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

×