Grafisk Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016

Transkript

1 Grafisk Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016

2 GRAFISK DESIGN PROCES Opgaven Jeg designer og laver mine egne plakater i min fritid både illustrationer, manuelt grafik og fotografier taget af mig. Jeg har ud fra det lavet en fiktiv opgave, hvor jeg har designet og kodet min egen hjemmeside, som skal fungere som en webshop for mine plakater. Jeg har stræbet efter det enkle udtryk og holdt mig til det moderne og minimalistiske. #2492ca #9ba9c2 rgba(0, 0, 0, 0.95) # Programmer #c84270 #f9fcff Proces 1. Briefing : Hvem er kunden/modtageren og hvad skal produktet kunne? 2. Mindmap og moodboard. 3. Design og layout i Photoshop. Illustrationer blev designet og udført i Illustrator. 4. Billeder blev gjort klar til web (RGB, 72 ppi) og arkiveret (mappestruktur). 5. Valg af fonte, samt tekst til hjemmesiden blev skrevet. 6. HTML5 kodning og tilpasning af design i Dreamweaver. 7. Kodning af responsivt webdesign. 8. Evaluering af resultat og tilpasning herefter. 2

3 GRAFISK DESIGN WEBSITE Website for plakatshop 3

4 GRAFISK DESIGN DE 4 DESIGNPARAMETRE Form Farve Luft Typografi Illustration 4

5 GRAFISK DESIGN BRIEFING Mindmap Wireframe Moodboard 5

6 GRAFISK DESIGN MÅLGRUPPE Brugeren Som målgruppe har jeg fra starten tilset mig alderen cirka 20 til 40 år. Det er den stil- og kunstinteresseret modtager, som også går op i boligindretning og det moderne udtryk. Der er sparet på detaljer og derimod skåret helt ind til benet. Less is more! Min målgruppe rammer primært det blå segment, men også det violette. Modtageren er moderne og værdsætter det gode håndværk i kunst og udførelse. Samtidig har de en indkomst, der tillader dem til at bruge penge på kunst og design. Brugervenlighed Vigtigst af alt er det nemt for brugeren at finde rundt på siden, samt tilgå de relevante oplysninger og produkter. Der er tænkt på brugervenlighed og at brugeren føler sig tryg det er nemt at komme fra A til B. Der er gjort brug af genkendelige links, hver side har sit eget fanenavn og nye faner åbnes i et nyt vindue, så brugeren aldrig kommer væk fra shoppen. For at øge troværdigheden, har jeg en kontaktside med billede, så brugeren kan have direkte kontakt til sælgeren (mig). Jeg stræber ikke efter at være byens bedste, da det jo er hørt før og bruges af mange men derimod om at være personlig og fokusere på det hjemmelavede og unikke håndværk. MATERIALISTISK MATERILISTISK OG MODERNE TRADITIONEL OG MATERILISTISK MODERNE TRADITIONEL GRÅ SEGMENT UAFKLARET IDEALISTISK OG MODERNE IDEALISTISK OG TRADITIONEL IDEALISTISK index SVG index velkommen shop om mig kontakt kurven tak køb formular godkend tak fejl Flowchart fejl 6

7 GRAFISK DESIGN RESPONSIVT WEBDESIGN Tilpasset til alle enheder Plakatshoppen er responsiv, så den tilpasser sig enhver interesseret brugers behov. Den moderne og teknologiske målgruppe har ofte en tablet og/ eller smartphone, hvor meget af internet surfingen foregår. Computer (min-width : 769 px) (max-width : 1000 px) Tablet (min-width : 641 px) (max-width : 768 px) Mobil (min-width : 300 px) (max-width : 640 px) Mit gutter og responsive design, som jeg har bygget min hjemmeside op efter. 7

8 GRAFISK DESIGN DESIGNELEMENTER Designelementer Farverne i mit design er også med til at skabe designfladen og gøre den brugervenlig. Jeg har lavet et visuelt hierarki, som hjælper med at vise den besøgende, hvor de skal fokusere på min hjemmeside. Det er opdelt ved hjælp af størrelses-, form- og farvekontrast. Brugen af typografi, illustrationer både statisk og dynamisk er også med til at understrege designets udtryk og skal gøre det nemt for brugeren at navigere rundt. Stregtegningerne udgør en kontrast til resten af designet, som er med til at formidle min personlige stil. CTA Call-to-action : I stedet for at bruge det meget brugte CTA Køb nu har jeg valgt at bruge Læg plakaten i kurven så brugeren ikke tror, at pengene trækkes fra kortet, så snart der trykkes på knappen. Meta- data tags For at sikre kunder og besøg fra google søgninger, har jeg gjort brug af relevante meta- og datatags. 8

9 GRAFISK DESIGN SVG SVG Index-siden er en SVG fil, som kun vises 1 gang, når man kommer ind på siden (der er ingen genvej tilbage til index-siden, derefter bliver man henvist til velkomst-siden). 9