GRAFISK DESIGN. Hjemmeside

Transkript

1 GRAFISK DESIGN Hjemmeside

2

3 AFSENDER Dansk design ANSVAR FOR OPGAVELØSNING Jeg har haft ansvaret for at opgaven er blevet løst, og at den har overholdt de krav som jeg selv har stillet til den skal opfylde, da det er en fiktiv opgave. OPGAVEBESKRIVELSE Denne opgave er gået ud på at fremstille en enkel og stilren hjemmeside, som sælger posters med dansk designer møbler. KUNDEKONTAKT Der har ingen kundekontakt været, da jeg selv er kunden til opgaven. PROGRAMVALG Adobe Muse til at fremstille hjemmesiden Illustrator til at lave plakaterne Photoshop til mock up af plakaterne Stephanie Hammer 7

4 MÅLGRUPPE Alder: 18-50år. Målgruppen er bred, da man til møbel posterne ikke behøver den helt stor indkomst. Det er folk med interesse inden for danske møbler, dog behøver de her ikke den store viden inden for det. Hvis man kigger på minerva modellen kan man se en procent fordeling i de forskellige segmenter, som vil købe møbel posterne, til forskellige formål. Det blå segment Forbruger Karriere Høj indkomst 20% Moderne Miljøbevist Kultur Middel indkomst 20% Det grønne segment Pragmatisk Det grå segment Uafklaret 5% Idealistisk Det violette segment Selvtillid Status Høj indkomst 35% Familie Tradition Lav indkomst 20% Det rosa segment Traditionel 8 Svendeprøve

5 RESEARCH Stephanie Hammer 9

6 SKITSER Forside Plakat visninger Om siden og priser Nyhed om slag af kommende bog Kontakt Side med enkelt plakat visning 10 Svendeprøve

7 SIDERNE UDFØRT Stephanie Hammer 11

8 DESIGNPARAMETER Grafisk design

9 960px 1024px FORM Hjemmesiden er bygget op efter en simpel form, som består af at det er en one page scrool side. Helside billede som tilpasser sig de forskellige størrelser, derfor har den et kæmpe mål på 1024x4284px Den er bygget op af 5 moduler. Første side er en helsidet billede, hvor de andre 4 skifter farve mellem hvid og mint grøn, for at give et lille spil på siden og gør en lille forskel. Inde i billede kasserne, er billedet centreret til midten af den, så selv billedet fylder ikke hele kassen ud. Det ses f.eks. ved at teksen under plakaterne holder kant i venstre side, men teksten inde i min opsætning holder min kasse kant i højre side. 1024x1225px 231x264px billederne 181x41px tekst 1024x847px 582x64px tekst 582x234px tekst 1024x709px 619x513px billed 215x64px tekst 357x115px tekst 1024x719px 340x446px kontakt 215x32px tekst 357x115px tekst 357x32px tekst Stephanie Hammer 13

10 ILLUSTRATIONER På forsiden ser vi en stor illustration i form af et helsidet billede, hvor der er en illustration af en af plakaterne. Inde på plakat siden, er hver plakat illustreret i en ramme, som giver en helhed af hvordan plakaterne former sig, når de kommer hjem i ens egne omgivelser at hænge. 14 Svendeprøve

11 FARVER Der er kun blevet brugt én farve udover sort og hvid. Det er den grønne farve, som er brugt som baggrund. Den grønne farve er taget fra en af plakaterne, for at skabe noget genkendelighed. Den primær identitetsfarve er den grønne, det er den farve som er mest dominerende på siden. Primær identitetsfarve Farvesymbolik RGB 204, 208, 174 CMYK 17, 8, 28, 0 Kommunikation Fornyelse Balance Friskhed Håb Stephanie Hammer 15

12 FONTE Helvetica er en grotesk font, som er uden seriffer. Den er god til web, da den er let at læse og gør det rart for øjet at kigge på skærmen. Brim Narrow Face er en nyklassicistisk antikva font, da den har stor kontrast mellem hår- og grundstreg. Den er blevet brugt til overskrifter samt nyhed. Det er en font med lidt spil i, da den både har tynde og tykke streger i hvert bogstav. Det er en font med seriffer, og den er kun i versaler. Helvetica A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å !? Billedtekst 12pt A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å Brødtekst 15pt !? Menu 14pt Brim narrow face A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å !? Overskrifter 25pt Nyhed 36pt Brim narrow face 16 Svendeprøve

13 Stephanie Hammer 17

14 BILLEDKOMPOSITIONER Diagonalakser og midterakser Plakaten som er placeret centralt omkring midteraksen vil fange øjet hurtigt. Derfor placeres plakaten her. Plakaten placeret på diagonalakserne giver liv og bevægelse i billedet. Specielt ved at plakaten er placeret i diagonalaksen som går fra øverste venstre hjørne til nederste højre hjørne virker stærkt som en ledetråd for øjet, da vi i den vestlige kultur er vant til at læse fra venstre mod højre. Indramning En anden måde at skabe fokus omkring motivet og samtidig skabe ro, er ved at lade et element indramme resten af billedets motiv. Diagonalakser og midterakser Indramning 18 Svendeprøve

15 ANIMATIONER Der er lavet en animation på min menu. Der er lavet en mouse over effekt på skriften. Teksten går fra at være sort til en mellem grå farve. Det er en lille animation som ikke larmer for meget, men den giver en lille hjælp med at se hvilken af menu punkterne din mus er over. Stephanie Hammer 19

16 ÆSTETIK OG FUNKTION Der er en god balance mellem æstetik og funktion. Menuen og kontaktformularen er to gode funktioner, som er let at handle på. Æstetik er det forside billedet som fanger øje, da det er det første brugerne ser. Det er vigtigt at de to ting hænger sammen for at brugeren finder den funktionel og lige til, mens de synes de ser på noget æstetisk smukt og behageligt. ØKONOMISKE BEGRÆNSNINGER Hjemmesiden er opbygget i Adobe Muse, som er gratis at anvende, når man har Adobe pakken. Det har derfor ikke givet nogle begræsninger. Funktion, menu Æstetik, billedet 20 Svendeprøve

17 AIDA MODELLEN Attention Plakaten som er blik fanget som det første Interest Plakaten fanger også interessen Desire Brugerne ønsker mere viden og scroller derfor videre ned af siden Action Brugerne klikker sig ind på den ønskede side, via menuen i toppen Stephanie Hammer 21

18 ARBEJDS PROCES Brainstorm af hjemmeside krav og ønsker Tegne skitser + tegne wireframe til et godt overblik Opsætningen af hjemmesiden Redigeringen af billedemateriale Sparing med en kollega Tilrettelser efter sparingsmøde Hjemmesiden er klar til at blive lagt op PROCESBESKRIVELSE Processen har været spændende og udforderne. Da jeg havde fået de bersale ting på plads med skitser, hvilke plakater jeg ønskede at putte ind på siden, kunne jeg begynde og opbygge siden som ønsket. Processen er helt klart gjort nemmere for mig selv da jeg havde et godt overblik inden jeg påbegyndte opsætningen i Adobe Muse. KVALITETSVURDERING Hjemmesiden har jeg formået at holde på den enkelte og simple måde. Give et godt overblik over de plakater man kan købe, samt fået den gjort funktionel og æstetisk. Jeg er tilfreds med resultatet, eftersom der har været nogle bumb på vejen, med at få det til at fungere ordentligt i alle skærmstørrelser, som tablet og telefon, det er dog blevet løst på en god måde hvor det virker. 22 Svendeprøve

19