GRAFISK DESIGN GRÅ ROSA VIOLET. BESKRIVELSE AF OPGAVEN Fiktiv opgave hvor jeg har udarbejdet et logo, et visitkort og en hjemmeside for en fotograf.

Transkript

1 GRAFISK DESIGN BESKRIVELSE AF OPGAVEN Fiktiv opgave hvor jeg har udarbejdet et logo, et visitkort og en hjemmeside for en fotograf. KRAV TIL UDTRYKKET Moderne Enkelt Minimalistisk Responsivt Brugervenligt Fokus på billederne BRUGTE PROGRAMMER Sublime Text Adobe illustrator CC Adobe Photoshop CC Adobe InDesign CC MÅLGRUPPE Målgruppen for fotografen er bred da hun bevæger sig inden for alt fra erhverv til bryllup og mode. Hendes kunder kan derfor ligge inden for flere segmenter. Men, ser vi på den almene dansker, der er hendes A-kunde, som bestiller tid ved fotografen for at forevige barnebarnet, dåben, brylluppet eller en anden vigtig begivenhed i livet ligger vi i det Rosa segment. Det er den traditionsbundne kvinde, oftest. Hun har familien og vennerne i fokus. Hun værdsætter fritiden og interresserer sig for naturen og nærmiljøet. GRØN GRÅ BLÅ Traditioner Nærhed Familie Bæredygtighed Hjemmesysler Helbred og sundhed ROSA VIOLET

2 LOGO OG VISITKORT Kunden havde et ønske om at få et logo der var enkelt. Hun ønskede et logo der kunne bruges i forskellige sammenhænge men stadigvæk have en genkendelighed. Logoet skal symbolisere at hun er fotograf. Ud fra de ønsker gik jeg igang med at brainstorme og skitsere. Mine tanker gik hurtigt i retning af en kameralinse. Efter en masse skitser kom jeg frem til et logo der kunne bruges på forskellige måder. Logoet består af en kameralinse med hendes initialer indeni. Når det skal være småt kan initialerne bruges alene da det ellers kan blive svært at se at det er en linse. F.eks bruger jeg kun initialerne i menulinjen på hjemmesiden men hele logoet på forsiden. VISITKORT Hendes visitkort skulle være enkelt og minimalistisk. Ideen med at gøre det sort med det hvide logo (linsen) i midten er at man får associationerne til et kamera. På bagsuden er der de vigtigste info som telefonnummer, webadresse og mail. Detaljerne fra linsen er taget med om på bagsiden. FONT På visitkortet har jeg brugt open sans i bold og light som jeg også gør på hjemmesiden. Det skaber god genkendelighed til hjemmesiden for forbrugeren. Fonten en en fin og let font der passer til det minimalistiske udtryk og hendes stil. Logoet er lavet vektorgrafik så det kan skaleres op og ned uden at miste kvalitet. Logoet kan både bruges i sort og hvid, den hvide farve er en smule knækket for at gøre den mere blød sammen med den mørke grå fave. ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå ! # %&/()=?+ ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå ! # %&/()=?+

3 MOODBOARD WIREFRAME Efter jeg har lavet et flowchart og fået en idé til hvordan de forskellige sider skal se ud og hvad de skal indeholde laver jeg en wireframe som jeg senere bruger til at opbygge og kode hjemmesidens skabelon i html og css. Siden er bygget op af en navigations bar, 6 sektioner, et billede og en bund. Sektionerne skifter farve for at vise at man er på en ny side når man scroller nedad. RESPONSIVT LAYOUT Et responsivt site øger læsevenligheden og giver en god brugeroplevelse. Jeg bruger både adaptive layout og responsive layout så sitet bliver truly responsive og tilpasser sig til den platform man besøger det fra. Jeg har lavet sitet ved hjælp af media queries hvor værdierne er sat i pixel og ændrer sig ved et fast breakpoint sammen med et fixed layout hvor værdierene er sat i % så indholdet hele tiden følger med. Designet er bygget op med 12 kollonner i procent og 3 breakpoints i pixel, så der er til mobil, tablet og desktop. Responsivt design er en fordel for SEO en. Man skal nemlig kun optimere indholdet til ét link, og url strukturen er den samme for alle enheder. LANDINGPAGE OM MIG JEG TILBYDER PORTEFOLIO KONTAKT Mit flowchart giver overblik over hvordan man navigerer rundt på siden, hvilket er forholdsvist simpelt fordi det er en onepage.

4 FONTVALG På hjemmesiden har jeg brugt google fonten open sans, som på visitkortet. Open sans er en sans serif font med store åbne former og et neutralt udtryk. Jeg har brugt den i vægten 300 til p erne og menuen, og 700 til h erne. Google fonte er gratis. Google generer en kode som man indsætter i sin <head>. GESTALTLOVEN Overskuelighed er meget vigtig på en hjemmeside fordi man har meget få øjeblikke til at fange og fastholde brugeren. Brugeren skal altså hurtigt forstå hvad siden handler om og hvad de kan finde på siden. Jeg har haft nogle af gelstaltlovens parametre in mente da jeg designede hjemmesiden. LIGHED: Min navigation er placeret i toppen af sitet. Her er den fikseret så den følger med når man scroller nedad og hele tiden er i toppen af sitet. Det giver brugeren et hurtigt overblik og følelsen af at kunne gennemskue sitet fra start af, fordi de er vandt til at navigationen oftest sidder i toppen eller er venstrestillet. LUKKETHED: Jeg har rammet de forskellige sektioner ind ved at bruge forskellige farver, så det er tydeligt at man skifter side. På den måde går det ikke ud over brugerens fornemmelse af at skifte side. NÆRHED: Jeg har sørget for at holde elementerne der hører sammen, tæt på hinanden. På den måde er det nemt at forholde sig til. FARVER Websitet er holdt i neutrale farver for at give det er lyst, moderne og minimlistisk udtryk. Jeg har brugt en strøvet grønblå farve og den mørkegrå fra logoet for at give siden noget mere liv. Den grønblå farve er behagelig for øjet og giver harmoni med fotografens billeder som har en dæmpet tone. Den mørkegrå fra logoet bruger jeg også i bunden hvor kontaktinformationerne er for at give en sammenhæng mellem top og bund. R: 59 G: 60 B: 59 R: 238 G: 238 B: 238 R: 255 G: 255 B: 255 R: 124 G: 139 B: 141 FIGUR OG GRUND: Jeg har holdt baggrundsfarverne i neutrale toner fordi det er vigtigt at baggrunden ikke tager magten fra forgrunden, nemlig billederne og teksten. Den støvede grønne farve jeg har brugt er en rolig og afdæmpet farve der ikke gør det vanskeligt at læse teksten.

5 SEO For at gøre siden relevant for googles søgemaskine har jeg optimeret siden ud fra nogle af de faktorer som google kigger på: Title tag på siden Meta descrition og keywords på indholdet Alt tags på alle billeder Desuden gør min billedoptimering også at google ser den som mere relevant. KODESTRUKTUR For at gøre det nemt for mig selv og evt andre der skal ændre i koderne sørger jeg for at have en god kodestruktur, der gør det overskueligt. Jeg bruger også kommentarer til at synliggøre hvor de forskellige sektioner starter eller hvad de forskellige koder hører til. BILLEDOPTIMERING For at sikre at min hjemmeside loader hurtigt optimerer jeg alle billederne til web. Alle billederne gemmes som RGB med 72 ppi. Til det bruger jeg Save For Web funktionen i Photoshop hvor jeg kan vurdere den bedste kvalitet. Billeder uden baggrund er gemt på samme måde, som png og vektorgrafik gemmes som svg filer så de ikke mister kvalitet. VALIDERING For at sikre mig at mine koder er korrekte og siden vises rigtigt på de forskellige platforme og browsere validere jeg min hjemmeside via w3.org. En korrekt valideret kodning har betydning for placeringen i søgemaskiner.