Progetto laboratorio climatico

Transcript

1 Riprogettazione e Restyling sito WEB SSS_AA 2 anno Grafica digitale, orientamento WEB Anno scolastico 2013/2014

2 Indice Introduzione p.1 Analisi -Concept - tema del progetto p.2 -Discovery - sito esistente p.3 -Discovery - competitors p.4 Design -Concetto grafico p.9 -Colori p.10 -Font p.11 -Wireframe p.12 -Discovery - personas p.5 -Mockup p Discovery - risparmio energetico p.6 Calcolatore p. 15 -Contenuti p.7 Programmazione p Conclusione p.8 Conclusioni p.18

3 Introduzione Il progetto in questione consiste nel rielaborare e programmare nuovamente il sito WEB del laboratorio climatico. Per arrivare ad un risultato ottimale sono partita da un analisi abbastanza dettagliata in modo tale da avere un quadro generale della situazione e potermi così concentrare su quelle che sono le problematiche e le varie soluzioni. Grazie all analisi ho potuto quindi capire quali erano gli aspetti migliorabili ed il concetto sul quale puntare. L analisi effettuata è stata realizzata in gruppo, suddividendosi i compiti con la classe, durante la fase successiva, invece i compiti sono stati realizzati singolarmente. 1

4 Analisi Concept - tema del progetto Il Laboratorio climatico è un progetto della fondazione Myclimate ( The Climate Protection Partnership è una fondazione con sede a Zurigo che rende possibile soluzioni innovative per la protezione del clima e promuove lo sviluppo e l impiego di energia rinnovabile e di nuove tecnologie per il rispetto del clima. Mycliamte ha pensato a un progetto per coinvolgere apprendisti, scuole e aziende formatrici, per permettere lo studio di nuove soluzioni atte alla protezione del clima, facendo ciò ha ideato il Laboratorio climatico. Si tratta di un concorso svizzero di progetti per la protezione del clima. Sul sito ufficiale del Laboratorio climatico ( è possibile avere tutte le informazioni riguardo il concorso nazionale, l archivio dei progetti inoltrati e materiale didattico inerente il tema del clima, delle energie e dell impatto ambientale che queste posso avere, questo per accompagnare apprendisti e scuole nella progettazione di proposte. Attualmente l impaginazione dei contenuti del sito permette la fruizione unicamente con dispositivi desktop. La richiesta è di rendere più contemporaneo il template attraverso un restyling grafico, favorendo la lettura dei contenuti con i vari dispositivi di navigazione online e di ripensare lo strumento Calcolatore di CO2 rendendolo più fruibile. 2

5 Analisi Discovery - sito esistente L analisi del sito esistente si è basata su determinati criteri, principalmente essi sono: la struttura (analisi del wireframe), i colori e la navigation. Dall analisi effettuata è emerso principalmente che: - i problemi del sito si concentrano sulla struttura del layout, esso risulta essere vecchio stile, i box dei contenuti sono piccoli rispetto alla potenzialità del browser - i colori adottati non trasmettono quello che è la missione del sito - la navigation verticale funziona, poichè i contenuti del sito sono tanti. 3

6 Analisi Discovery - competitors Per quanto riguarda i competitors, abbiamo analizzato dei siti che trattano i medesimi, o simili, argomenti e dei siti che adottano principi di ecosostenibilità, in modo tale da vedere cosa essi mettono in evidenza sul sito e nel caso dei siti ecosostenibili come è possibile sfruttare questa cosa anche sul WEB. L analisi si è basata sulle seguenti euristiche: Homepage Task orientation Navigation & AI Trust & credibility Writing & content quality Page layout & visual design Oltre ad un analisi dei siti in questione, sono stati esaminati i loro tempi di caricamento. Questo è stato fatto perchè uno degli scopi del restyling è quello di incidere minimamente sull ambiente, questo lo si può fare avendo un sito WEB leggero, in modo tale da limitare i tempi di caricamento e quindi il consumo di energia. 4

7 Analisi Discovery - personas Per essere sicuri di concentrarsi sui punti giusti abbiamo prso in considerazione delle persone di riferimento, essi sono: Docente Azienda Apprendista Promotori Utente tipo I criteri utilizzati per creare queste personas sono stati: Nome e cognome Età Stato civile Località Occupazione Sensibilità verso l ambiente Conoscenza sul tema Hobby Esigenze sul sito 5

8 Analisi Discovery - risparmio energetico È impensabile effettuare un progetto di questo tipo senza conoscere l argomento di cui tratta, per questo motivo abbiamo cercato delle informazioni sul risparmio energetico. In questo modo abbiamo potuto sapere di più su questo argomento assai complesso. Abbiamo quindi cercato informazioni su: cos è il risparmio energetico la riduzione di CO2 energia pulita calcolatore di CO2 6

9 Analisi Contenuti Il sito in questione è ricco di contenuti e la navigazione non concepita al meglio per quanto riguarda l usabilità, per questo motivo ho deciso di rielabolare i contenuti in modo da rendere la navigazione più fruibile ed usabile. Home Chi siamo Concorso Galleria Laboratorio climatico Sostegno Promotori Partners Awards Media Il concorso Termini Iscrizione Materiale didattico Il laboratorio Il team Aziene e scuole Apprendisti Calcolatore Co2 Progetti Energia Innovazine Pianificazione Sensibilizzazione Contatti Contatti News La nostra rete 7

10 Analisi Conclusione Effettuare questo tipo di analisi prima di cominciare la progettazione del sito è molto importante per avere una visione d insieme di quello che è la realtà, delle cose che bisogna migliorare, di qual è lo scopo del sito. Grazie a quest analisi ho potuto avere un idea più chiara di quello che era lo scopo del sito, il concetto grafico da utilizzare ed il layout più congeniale ai contenuti. 8

11 Concetto grafico Per elaborare il mio concetto grafico mi sono basata su quello che era lo scopo del sito e sul target principale di esso. Da una mia analisi personale sono emerse delle parole che mi hanno aiutato a tale scopo. INNOVAZIONE Creare nuove tecnologie, nuovi stratagemmi. Visto che il sito è dedicato ai giovani ed ha come argomento principale un concorso, dove apprendisti si devono ingegnare per fare dei progetti innovativi, questa parola è molto importante! PUREZZA Un mondo senza inquinamento Quando si parla di ecologia la prima cosa che viene in mente è un mondo senza inquinamento, simbolo della purezza sono il giglio e il colore bianco. CHIAREZZA Trasparenza e sensibilità Qualcosa di concreto, semplice e chiaro! 9

12 Colori I colori che ho deciso di utilizzare sono 6: BLU Colore ripreso dal laboratorio climatico. Utilizzato per le voci di menu e il testo VERDE È il colore che tutti associamo all ecologia. Utilizzato per i titoli del testo GRIGIO CHIARO utilizzato come sfondo # #61c4eb #ffffff #7fa23f #ff9000 #f8f8f8 ARANCIONE Utilizzato per i link e i downloads BIANCO Colore della purezza. Utilizzato come sfondo BLU CHIARO Utilizzato come hover e selezione. 10

13 Font Iil font che ho deciso di utilizzare è il Caviar Dreams. Questo è un font particolare, trovato su internet, con licenza free. Il font in questione sebbene abbia delle lettere piuttosto strane, come per esempio la e, risulta comunque essere abbastanza leggibile. Ho deciso di utilizzare questo font piuttosto recente e non commune, poichè il target di questo sito sono i giovani, così come uno degli argomenti del sito è l innovazione. 11

14 WIREFRAME A lato si può vedere il wireframe pensato inizialmente. Possiamo vedere la parte superiore composta dal logo con l header, per poi avere un menu orizzontale ed un sottomenu verticale. Nella sidebar abbaimo anche uno slideshow dedicato a partner e promotori. La parte restante è quello dedicato al contenuto. In fondo troviamo ovviamente il footer. Una volta definito questo wireframe ho proceduto con il mockup. Logo Menu Sottomenu Promotori Header Contenuto Footer 12

15 Mockup Questo è il risultato del wireframe vestito. Possiamo vedere come ho messo in pratica gli elementi grafici descritti in precedenza. L idea iniziale è quella di tenere la parte superiore, menu compreso, fissa, così come la sidebar e fare in modo che il contenuto scorra. Come potete vedere in questa versione sito è contenuto in un box che si posiziona al centro del browser. Si può notare come l utilizzo di immagini è stato ridotto al massimo, così come le animazioni. Gli elementi utilizzati sono quasi esclusivamente codice HTML e CSS. Ho voluto concentrarmi solo su questi due elementi per valorizzare il fatto di utilizzare un sito ecologico. 13

16 Mockup Mobile Uno degli obiettivi del progetto è quello di rendere il sito responsive, adattabile quindi ai diversi device. Ecco come risulta su ipad ed iphone. 14

17 Calcolatore Un elemento da rivisionare all interno del sito WEB è il calcolatore di CO2. Il calcolatore attuale si basa sull emissione CO2, in base alle KWh. Inserendo il valore di KWh ci da il corrispottivo in Co2. Questo risultato purtroppo non ci dice niente, poichè nons appiamo realmente cosa vuol dire. A questo proposito ho deciso di mantenere il calcolatore simile, nel sensoc he utilizza gli stessi elementi per il calcolo, ma in aggiunta abbiamo una frase che ci dice cosa avremmo potuto fare con quel corrispettivo valore. 15

18 Programmazione Iniziata la fase di programmazione, inserendo quindi in un browser il sito programmato, mi sono accorta che c erano degli accorgimenti da fare. Innanzitutto la parte fissa risultava essere troppo imponente e nel caso di utenti con uno schermo più piccolo rispetto al mio, la pagina non sarebbe risultata in modo ottimale. Ho quindi deciso di cambiarela disposizione di alcuni elementi all interno della pagina. Innanzitutto ho deciso di usare tutta la grandezza del browser e non solo la parte centrale. Il menu orizzontale è stato spostato in alto, mantenendolo sempre fisso, invece l header scorrerà insieme al contenuto. La sidebar è rimasta invece invariata. Potendo sfruttare maggiore larghezza ho dedicato una parte sulla destra ai downloads. 16

19 Programmazione Mobile Come per la versione su PC, anche la versione mobile ha subito delle piccole variazioni, anche in questo caso il menu È posizionato in alto ed è fisso; il menu è diventata però un iconcina. L immagine di header scorrerà insieme al contenuto. Nella versione mobile, il sottomenu scompare con tutta la sidebar, per ritrovarlo nel menu a tendina. La parte di contenuto occupa il 100%, mentre l area riservata ai downloads flotta posizionandosi sopra il footer. 17

20 Conclusioni La realizzazione di questo progetto è stato molto interessante e costruttivo. Nel corso della mia esperienza lavorativa e professionale ho avuto molte occasioni per migliorare ed allenare le mie conoscenze nell ambito della progettazione, cosa molto importante in ogni tipo di progetto. Sicuramente la parte di programmazione è quella a cui sono stata meno abituata, perciò oltre ad essere quella più impegnativa è stata quella che mi ha insegnato di più, sia a livello pratico che a livello intellettuale. Infatti sviluppare questo sito mi ha fatto capire ancora di più quanto sia importante fare un analisi prima di cominciare; l analisi non deve perciò limitarsi alla discovery, ma deve andare oltre. Ho capito quanto sia importante informarsi sulle tecniche che si vogliono utilizzare, in modo tale da non progettare un layout che poi non si è in grado di programmare realmente. Inoltre, come si è potuto notare, nel corso della programmazione io ho apportato delle modifiche, in futuro sarà molto importante progettare al meglio fin dall inizio, effettuando delle prove, poichè quello che presenterò ad un cliente sarà quello che lui si aspetterà di vedere programmato, non potrò modificarlo. Posso quindi dire che lo sviluppo di questo sito WEB, mi ha insegnato molto e lo sfrutterò in futuro. 18