Teoria e Tecnologia della Comunicazione

Corso di Laurea: Teoria e Tecnologia della Comunicazione

Anno 2010/2011

Corso: Laboratorio di Comunicazione Visiva

Docente: Riccardo Cova

Vitali Deianira

Indice

- Introduzione

- Organizzazione dei contenuti

- Scelte grafiche

- Struttura delle pagine

- Contenuti

- Grafica

Introduzione Il sito realizzato per il progetto del corso si ispira alle interfacce web e allo stile di navigazione di un portfolio fotografico. Il brief prevede le pagine home, curriculum, gallery, una pagina personale e i contatti. Per organizzare i contenuti rispettando il brief proposto, ho scelto una grafica minimal, con pochi colori per far risaltare le immagini e dei box testo piccoli per lasciare i contenuti testuali in secondo piano rispetto allo sfondo. I contenuti riguarderanno le mie attitudini, quindi skill, curriculum e qualcosa che mi racconti. Mentre nella pagina book ho inserito il libro pubblicato tramite Lulu.com, piattaforma americana per l’auto-pubblicazione online. Il brief richiede di creare una pagina che possa raccontarci come persona e che faccia risaltare i nostri interessi. In questo caso la pagina personale sarà “Book”, colori di grafica differente ma che mantenga una certa coerenza con il resto del sito. Più avanti spiegherò in dettaglio la scelta dei colori e dell’impostazione grafica e di interfaccia.

Home

Organizzazione dei contenuti

DEIANIRA ARTPROJECT

- HOME - ABOUT

o CURRICULUM o SKILL

- PORTFOLIO

o PHOTOGRAPHY o ILLUSTRATION o PAINT o ARTPROJECT

- BOOK - CONTACT

Scelte Grafiche

Font: bastoni Carattere: Arial, Verdana Il portfolio nella maggior parte dei siti si presenta con sfondo nero, grigio scuro o bianco. La scelta dovrebbe dipendere in larga misura dal genere di fotografie pubblicate e dall’identità che si vuole trasmettere. Nel mio caso il sito è prevalentemente nero, a sola esclusione della pagina Book. La scelta dipende dal genere di disegni che faccio, molti sono in bianco e nero e anche nelle tele è un colore che uso molto. Le fotografie al contrario sono molto luminose e colorate perciò ho scelto il nero come sfondo del portfolio per accentuare il contrasto e non eccedere nei colori.

La pagina Book riprende i colori della copertina del mio libro infatti l’header è lo stesso viola del retro del libro. L’interazione non cambia mai perché ho scelto lo stesso grigio del disegno e il verde del nome dell’autore. In questo modo ho sfruttato gli stessi colori per tutto il sito evitando stonature nella pagina Book e con la copertina.

Nella pagina portfolio ho realizzato un menu di navigazione verticale che permetta di accedere facilmente alle sezioni Photoraphy, Illustration, Artproject e Paint. Ho scelto quelle foto non tanto perché rappresentative della categoria a livello concettuale ma per l’impatto visivo e l’armonia con i colori dell’interazione. Il mio lavoro in generale, fotografie illustrazioni e patchwork, è il frutto di un’accurata ricerca sui colori, sui contrasti forti e sull’equilibrio visivo delle tonalità. Struttura delle pagine Le pagine lasciano l’intera area del browser allo sfondo. Questo per poter sfruttare l’intero schermo per la visualizzazione di una tela o di un disegno (in questo caso sono disegni in bianco e nero). L’idea di base è una sorta di biglietto da visita grande quanto tutto lo schermo con un box per il testo realizzato con i div.

La pagina portfolio in html è una tabella di due colonne principali. La prima divisa in una griglia con foto e rispettive descrizioni, e la seconda, suddivisa in righe contenitore per le immagini. Per rendere più visibile l’interazione il testo della descrizione cambia colore a rollover e resta attivo quando si è nella sezione di appartenenza. Questa pagina ha questa struttura nel rispetto degli standard di Flickr e per certi versi di Google Images. La navigazione ha una finalità emozionale più che informativa. L’utente dovrebbe riuscire

a crearsi un percorso personale non per forza seguendo il menu verticale (che gli permetterà solo di non perdersi tra le pagine), ma di scoprire fotografie che forse, se avesse rispettato le classiche regole di navigazione, non avrebbe scoperto. L’obiettivo di questa pagina, è far navigare l’utente attraverso le immagini e non il menu, per questo nella pagina portfolio sono raggruppate più categorie.

Per quanto diverso, propongo l’immagine del sito dell’artista Eduardo Bertone, nel quale la navigazione è esclusivamente emozionale e visiva.

www.bertoneeduardo.com

Contenuti La sezione About racconta in poche righe chi sono e cosa faccio. Cliccando in Curriculum e Skill si trovano ulteriori informazioni riguardo alla carriera scolastica, lavorativa e le competenze tecniche di strumenti web. In Portfolio sono raccolte le foto migliori scattate durante viaggi e momenti di quotidianità, seguite da illustrazioni, tele e disegni realizzati nel tempo libero. La pagina Book attualmente contiene ciò che più mi rappresenta. Avrei potuto inserire i miei interessi o altre immagini ma questa pagina per quanto possa sembrare semplice è il primo traguardo raggiunto. Il libro pubblicato grazie a Lulu.com è il primo risultato concreto di un lungo e duro lavoro. Inizialmente pensavo di impostare con i div un box di testo con sfondo trasparente per rendere visibile lo sfondo. Durante la fase di sviluppo mi sono resa conto che nel caso in cui volessi aggiungere ulteriori lavori pubblicati, o creare degli articoli per mostre alle quali ho partecipato, il colore più adatto sarebbe il bianco, molto usato nei blog, nei siti di web design e arte.

Grafica HOME

ABOUT

PORTFOLIO

BOOK CONTACT