Dossier Laboratorio climatico. Ilario Anzini SSS_AA 2 Web

Transcript

1 Dossier Laboratorio climatico

2 Indice Concept Brief Incarico Discovery Sito esistente Personas Calcolatore di CO2 Design Concetto grafico Contenuti Colori Font Icone Mouckup Web Responsive Conclusioni

3 Concept Brief Martedì 11 marzo inizio progetto su consegna del mandato. Dopo aver incontrato il committente Marcello Martinoni abbiamo saputo orientarci su quello che è uno dei temi più trattati ed attuali. Il sig. Martinoni ha saputo mostrarci del materiale coinvolgente e inerente la materia. Marcello all interno del sito si rivolge hai giovani promuovendo dei concorsi per sensibilizzarli sulla tematica del risparmio energetico e a una maggiore considerazione del nostro ambiente. Incarico Il mandato consiste nel restyling del sito web esistente Il sito deve poter essere visualizzato su dispositivo mobile e quindi costruito in modo responsive, visto che il sito si rivolge soprattutto hai giovani. Un altro obiettivo è quello di ripensare il calcolatore che presenta ora il sito esistente, deve permettere di capire in maniera più coinvolgente quanta massa di CO2 emettiamo. 03

4 Discovery Questa fase di lavoro è stata sviluppata in comune in classe suddividendo in gruppi per incarico le tematiche, dopodiche il lavoro è stato presentato e approvato dalla classe. Sito esistente In realta il sito attuale mostra una struttura sufficente, ma alcune pagine si ripetono e la loro disposizione è inapropriata. Il contenuto potrebbe essere disposto in modo più accattivante, invogliando la navigazione. Lo stile grafico e la scelta dei colori appesantiscono la pagina rendendola stancabile. Competitors Il laboratorio climatico non è l unico a sostenere l ecologia e salvaguardia della natura, è pero l unico in ticino ed in svizzera a parlare di questa tematica. Personas Il sito si rivolge con principale importanza hai giovani, quindi sviluppato soprattutto nei loro confronti senza tralasciare l importanza delle scuole e aziende. 04

5 Discovery Calcolatore di CO2 Se cerchiamo nel web è possibile trovare molti calcolatori che danno la possibilità di convertire kwh in grammi di CO2, il mio calcolatore è pensato per calcolare le tratte fattè con un mezzo di trasporto come la macchina e mostrare la quantità di CO2 emesso durante la tratta, intrattiene l utente con delle frasi di paragone che faranno capire il consumo eccessivo e la possibilità di ridurlo con degli esempi. 05

6 Design Concetto grafico Lo svilippo grafico del mio sito si basa su tre concetti: - La proporzione delgl elementi principali si lega alla natura basandosi sulla proporzione aurea. Questo non ha un impatto visivo ma sostiene comunque un equilibrio nel sito, in oltre questo metodo permette una visuale di maggiori contenuti per pagina riducendone alcune di troppo. - Il secondo sostiene l idea di una grafica monocromatica, o meglio, 4 colori presi dal logo che comporranno le pagine. - Come ultimo, tutta l idea si sviluppa sul concetto minimal, questo è un concetto che unisce tutti e tre i concetti in un unico obiettivo: - Rendere il sito molto leggero a livello visivo, un po come risparmiare sull aspetto grafico ma lasciare importanza al contenuto che esso propone. 06

7 Design Contenuti La revisione del flusso di contenuto è molto importante per cercare di dare all utente immediatezza all interno di un sito. Io non ho riguardato il flusso e la disposizione, tuttavia ho deciso di eliminare delle pagine e riorganizzarne delle altre. Es: Nella homepage ora potremo vedere i contenuti della pagina gia esistente e tutto il contenuto della voce sapere eliminata dal mio flusso. Contenuti tolti e riposizionati 07

8 Design Colori Il colore del logo mi ha permesso di trovare 4 colori chiave per la realizzazione del progetto, senza tralasciare il bianco, che ricopre un ruolo importante dando spazio e aria. Font All interno del progetto ho scelto di utilizzare il font Source sans pro. La scelta di questo carattere rientra nel ragionamento dei concetti. La sua leggerezza lo rende molto leggibile, dato che questo sito web dovrà apparire su mobile l assenza di grazie lo rende efficace. Icone Le icone presenti nelle pagine sono di due tipi: - Squadrate, utilizzate per la navigation e la distinzione dei pdf. - Tonde, visibili solo su responsive, andando a richiamare l attenzione su alcuni contenuti presenti in homepage su dispositivo fisso (computer). 08

9 Mockup Web Il sito definitivo viene visualizzato a computer con un equilibrio tra testo e immagini, la struttura dei contenuti è pensata per valorizzarli e renderli più accessibili. 09

10 Mockup Responsive Su dispositivo mobile questo non viene perso perche gli stessi contenuti principali sono accessibili ad un solo touch. 10

11 Conclusioni Durante la lettura del mandato non ero convinto che avrei potuto dare il meglio e trovare un idea da sostenere, e un po è stato. Con il proseguire il lavoro diventava una sfida, volevo realizzare un progetto unico, uscire dagli schemi ma questo mi è un po mancato. Sono riuscito malgrado questo a trovare un idea convincente e portarla avanti con determinazione. credo di aver ottenuto un buon risultato mettendo a paragone l attuale e il vecchio il vecchio sito. Ho soddisfatto il mio bisogno come web designer, bisogno di creare qualcosa di nuovo e credo di aver trovato un idea vincente per l utente. 11