GRAFISK DESIGN SVENDEPRØVE Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5

Transkript

1 NAVN PÅ OPGAVEN KERNEOMRÅDE SVENDEPRØVE 2013 Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5

2 Beskrivelse af opgaven I min fritid modtog jeg en opgave, som bestod i, at redesigne og kode et nyt website til en virksomhed, kaldet Climtech. Virksomheden som er dansk, sælger laboratorieudstyr, og har specialiseret sig i at udvikle glaskamre kaldet CLIMPAQs. Kamrene gør det muligt, at måle forurenende stoffer og udledninger og bruges også til forsøg, hvor testgrupper skal snuse til forskellige materialer. Min udfordring var at skabe et brugervenligt layout ud fra kundens krav og ønsker og samtidig opstramme deres visuelle identitet. Mine overvejelser Mine tanker var at skabe et site med et mere imødekommende og moderne udtryk. Med en god struktur og en gennemtænkt prioritering af indholdet ønskede jeg, at ligge op til mere interaktivitet, og sætte fokus på Climtechs produkter. Budskab Jeg ville gerne have, at sitet signalerede professionalitet og kvalitet. Derudover fandt jeg det vigtigt, at der var en visuel sammenhæng til Climtechs gamle site, således at det stadig var genkendeligt for de eksisterende brugerne. Målgruppe. Den primære målgruppe er laboratorie-folk med fokus på indeklima og luftkvalitetsforskning. Den sekundære målgruppe er firmaer, som benytter kamrene til at teste hvordan forskellige materialer lugter når de sammensættes. Eksempelvis har virksomheden Peugeot anvendt glaskamrene til at undersøge, hvordan inventaret i deres nye biler skal lugte. Sitet er designet i Photoshop, og kodet i html5 og CSS3 i Dreamweaver 6 / SVENDEPRØVE 2013

3 Climtechs gamle website Nedenfor ses to screenshoots fra Climtechs gamle webdesign. Visuelt stemmer sitet ikke overens med den kvalitet Climtech leverer, og sitet har nogle mangler i forhold til overskuelighed og fuktionalitet. Jeg så dog en styrke i den mørkeblå farve og i bomærket, som jeg valgte at genbruge i mit design. Den gamle udgave af home-siden Den gamle udgave af products-siden SVENDEPRØVE 2013 / 7

4 Inspiration & Brainstorm Baggrund med gradient Infobokse med tekst Videnskab kantet/blød? Fokusfarve Kliniske grå farver Tydelig modulopdeling Slider som blikfang Svævende elementer Glas 8 / SVENDEPRØVE 2013

5 Moodboard Moodboardet hjalp mig til at finde frem til en visuel stil, stemning og følelse, som jeg mente repræsenterede Climtechs identitet. SVENDEPRØVE 2013 / 9

6 Imageboard Imageboardet blev brugt til at præcisere den visuelle retning og stil. 10 / SVENDEPRØVE 2013

7 Komposition Efter at have struktureret sidens indhold ved at tegne et Flowchart, gik jeg igang med at tegne skitser til hvordan jeg kunne inddele siden, så den var mest overskuelig for brugeren. Index Home Products QA Repair References About us Contact Climpaq 50 l Climpaq 225 l Strukturering med flowchart Dilution System Inddeling af site med skitser SVENDEPRØVE 2013 / 11

8 Mock-ups Forneden ses de første udkast til sitets home-page. Kunden var overordnet tilfreds med udtrykket, men ønskede at opbygningen blev finpudset med henblik på at få sin velkomsttekst fremhævet. Første udkast. Forsøg med fritsvævende elementer og sekundær menu. Andet udkast. Elementerne samles i en ramme og adskilles fra baggrunden 12 / SVENDEPRØVE 2013

9 REDESIGN & KODNING AF CLIMTECH.DK Wireframe For at skabe et overblik for brugeren er sitet organiseret med henblik på gestaltlovene. Mængden af information på sitet er stor, og derfor fandt jeg det vigtigt at lave en modulopdeling, hvor design og funktionalitet gik hånd i hånd. Wireframes ene herunder viser hvordan den endelige struktur kom til at se ud. Indholdsstruktur til home-siden, products-siderne og de resterende sider SVENDEPRØVE 2013 / 13

10 Skriftvalg & snit Til rubrikker har jeg valgt at benytte Myriad Pro, som er bedst kendt for sin brug af Apple. Den er let at skelne og skiller sig ud fra andre groteske skrifter på grund af y ets underlængde. Skriften er både moderne og venlig i udtrykket, og har med sine rene former og høje x-højde en god læsbarhed. Til brødtekst har jeg brugt Arial, da den er behagelig at læse, og fordi den betragtes som en websikker skrifttype, da den vises ens på tværs af browsere og platforme. Jeg fandt det nærliggende at benytte Myriad Pro Light til rubrikker, for at lede tankerne hen på noget elegant. Skriftsnittet giver samtidig en fornemmelse af noget skrøbeligt, og da glas er det primære materiale i Climtechs produkter, syntes jeg, at det hang godt sammen. Myriad Pro Regular er brugt til menupunkterne, da man uden vanskeligheder, skal kunne klikke på dem med cursoren. Myriad Pro Light ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Myriad Pro Regular ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Arial Regular ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå Web font implementering Myriad Pro er ikke en web-sikker skrifttype, og det har derfor været nødvendigt, at benytte en anden teknologi for at implementere den på sitet. Cufon.js Cufon er en javascript tekst-udskiftning, der dybest set udskifter og erstatter en skrifttype med en genereret skrifttype. På denne måde får brugeren den samme oplevelse i forskellige browsere, på trods af at denne ikke har skriften installeret på sin computer. Under normale omstændigheder ville jeg benytte mig af fontsquirrel.com til generering af et fontkit, men da Myriad Pro ikke er en free-font, tillader sitet ikke at den uploades. Jeg har af denne årsag benyttet mig af Cufon, hvor det var nemmere at omgå denne problematik. Kunden var begejstret for skriften, Myriad Pro, og har naturligvis godkendt, at den benyttes på sitet. Javascript, der er ansvarlig for genereringen af skriftypen Javascript, som jeg har tilpasset. Fortæller hvad der erstattes. De genererede skrifttyper, Myriad Pro Light og Regular 14 / SVENDEPRØVE 2013

11 Farver Jeg har valgt at begrænse farvepaletten, og bruger tre grundfarver til sitet. Mørkeblå, lysegrå og limegrøn. Den mørkeblå og lysegrå farve står i kontrast til hinanden, med den mørkeblå som den iøjenfaldende, faktuelle og troværdige farve og den lysegrå, som den rolige, pålidelige og kliniske farve. Farven limegrøn er mere sprælsk, frisk og opmærksomhedstiltrækkende farve. Jeg har brugt den blå som baggrundsmarkør i menuen, overskriftskasserne, til knapper og i footer, der på den måde træder frem som kontrastfelter på den hvide og grå baggrund, og skaber dynamik til siden. Den limegrønne har jeg brugt mere sparsomt, da den hurtigt kan blive dominerende, men den viste sig at være god til at skabe fokus på menuen og til links. Iøjenfaldende, faktuel og troværdig Den mørkeblå farve symboliserer viden, styrke, integritet og ekspertise. Den er med til at udstråle den proffesionalisme og seriøsitet, som Climtech står for. Rolig, pålidelig og klinisk Den lysegrå farve har en stabiliserende effekt på de andre farver og udstråler en elegance. Det er en moden og ansvarlig farve, som symboliserer sikkerhed, pålidelighed og funktionalitet. Sprælsk, frisk og fornyende Farven limegrøn symboliserer friskhed og fornyelse, og leder tankerne hen på miljø, som er omdrejningspunktet i Climtechs virksomhed. SVENDEPRØVE 2013 / 15

12 Gradienter For at få nogle af elementerne på sitet til at fremstå mere bløde og give en fornemmelse af rumlighed, har jeg gradieret farverne i CSS3. Da ældre browsere ikke er kompatible med gradient-funktionen, har jeg sørget for at der bliver vist en helfarve, som sikkerhed. Runde hjørner Jeg valgt at lave runde hjørner på næsten alle elementer, for at give det modulopdelte design et mere harmonisk og et, knapt så skarpt, udtryk. Dette kommer dog ikke til udtryk i browseren IE8. Gradient på info-bokse, for at skabe modspil til den hvide baggrund Grafisk styling af knapper i CSS3 Adskillelse af menu-links med border 16 / SVENDEPRØVE 2013

13 Andre grafiske virkemidler Tekstprægning med text-shadow. Skillestreger og runde hjørner på dropdown-menu AIDA (slider) Attention: Stort billede på home-siden fanger opmærksomheden. Interest: Produkt og tekst vækker interesse og skaber nysgerrighed. Desire: Brugeren ønsker at vide mere. Action: Brugeren klikker sig videre, for at læse mere om det givne produkt. Der er lagt skygge på slider og andre elementer ved hjælp af CSS3 SVENDEPRØVE 2013 / 17

14 18 / SVENDEPRØVE 2013