1 SVENDEPRØVE 2016 GRAFISK DESIGN GRAFISK DESIGN

Transkript

1 1 SVENDEPRØVE 2016 GRAFISK DESIGN GRAFISK DESIGN

2 2 SVENDEPRØVE 2016 GRAFIK & BILLEDER 3 SVENDEPRØVE 2016 GRAFIK & BILLEDER 3 SVENDEPRØVE 2016 GRAFISK DESIGN 01. BRIEFING GRAFISK DESIGN 01. Briefing 02. Målgruppe 03. Moodboard, inspiration & mindmap 04. Responsivt 05. Skitser 06. Layout 07. Flowchart 08. Wireframe 09. Gestaltloven 10. Farver 11. Fonte 12. Optimering af billeder 13. Kodestruktur 14. Godkendelse/validering 15. SEO 16. AIDA 17. Logo 18. Visitkort OPGAVEBESKRIVELSE: PORTFOLIO TIL FRISØRELEV Til denne opgave har jeg designet og kodet en portfolio til en frisørelev SPECIFIKATIONER» Onepage» Portfolio KUNDEKRAV» Lyst» Let overskueligt» Moderne udtryk» Responsivt» Brugervenligt BRUGTE PROGRAMMER ADOBE PHOTOSHOP CC ADOBE DREAMWEAVER ADOBE ILLUSTRATOR CC ADOBE INDESIGN CC PRODUKT PORTFOLIO HJEMMESIDE, LOGO & VISITKORT FORMAT ONEPAGE

3 4 SVENDEPRØVE 2016 GRAFISK DESIGN 5 SVENDEPRØVE 2016 GRAFISK DESIGN 02. MÅLGRUPPE Målgruppe til denne hjemmeside er meget bred, da den er tiltænkt som en portfolio. Jeg har udfra Minervamodellen fundet frem til det segment, som går mest op i frisørfaget, og dyrker deres udseende. De violette ligger vægt på dagligedages praktiske og gøremål og interesserer sig ikke for fællesskaber udover familie og venner. De violette er nationalt indstillede og går ind for traditioner. Uddannelsen er ofte håndværksmæssigt og de violette arbejder inde for det primære erhverv og håndværk. De violette tænker som de blå i materialisme og de knokler for at få råd til tingene for at få råd til at holde fri. Indkomsten ligger i den lave ende af spektret. BLÅ GRÅ GRØN» Materialisme» Praktikere» Nationalt indstillet» Praktisk uddannelse VIOLET ROSA 03. MOODBOARD, INSPIRATION & MINDMAP FRISØR PORTFOLIO: LYST OVERSKUELIGT ENKELT SHOWCASE KONTAKT MODERNE SPÆNDENDE RENT PROFFESIONELT SJOVT

4 6 SVENDEPRØVE 2016 GRAFISK DESIGN 7 SVENDEPRØVE 2016 GRAFISK DESIGN 04. RESPONSIVT Websitet skal være responsivt. Det vil sige at det tilpasser sig efter, hvilken platform man besøger siden fra. Det klares med media queries, som sørger for at skalere de forskelli- ge elementer i forhold til skæmopløsningen. Dette klares med css frameworket Bootstrap. Designet bygges op i 12 kolonner, som skifter ved 4 breakpoints stor skærm, mellem skærm, tablet og mobil. 09. GESTALTLOVEN Mængden af information på internettet er stor, og brugerens opmærksomhed flygtig. Derfor er overskuelighed vigtig, for at brugeren hurtigt kan gennemskue, hvad en hjemmeside kan tilbyde. Derudover er det sværere at læse på skærm end på papir. Det giver også et stort behov for at organisere informationerne på en overskuelig måde. Gestaltloven indeholder bl.a. følgende parametre, som er gode at forholde sig til når man designer hjemmesider: 05. SKITSER Når jeg har lavet min research og idegenereringer begynder jeg på mine skitser til designet. 06. LAYOUT Jeg har brugt gridcalculator.dk til at udregne et grid til hjemmesiden. Jeg har et udgangspunkt med en width på 960px og med 12 kolonner. Gridet bruger jeg til at holde samme margin gennem hele siden. Gridet ligges i photoshop, og derfra designer jeg layoutet.» NÆRHED Noget af det første vi gør, når vi kigger på en hjemmeside, er, at afgøre hvad der hører sammen, og hvad der ikke hører sammen. Det er derfor vigtigt at organisere sine elementer og informationer på siden.» LIGHED Man placerer oftest navigations-menuen i toppen af en hjemmeside. Det giver vores brugere hurtigt overblik og en følelse af at kunne gennemskue navigationen fra første besøg.» LUKKETHED Ved at ramme elementerne ind kan man også placere dem tættere på hinanden, uden at det går ud over overskueligheden.» FORBUNDETHED Det er en god ide at forbinde elementer på siden ved fx brug af farver eller streger. 07. FLOWCHART Ved hjælp af et flowchart finder jeg ud af hvordan man skal navigere på hjemmesiden. 08.WIREFRAME Når skitser og flowchart er på plads laver jeg et mere detaljeret wireframe, som bruges til at kode skabelonen i HTML og CSS. Hjemmesiden er bygget op efter en simpel form, som består af en one page scrool side. Den er bygget op af 7 moduler. Første side er en helsidet billede, hvor de andre sider skifter mellem grå toner. Der er på selve portfolio siden brugt en blå kontrast farve, som skal gøre brugeren opmærksom på at det er her fokus skal ligge. LANDING YDELSER 10. FARVER Jeg har valgt at holde hjemmesiden i grå toner, for at give den et lyst, enkelt og rent udtryk. For at peppe de grå toner lidt op har jeg valgt to kontrast farver. Den blå og den lyserøde. Den lyserøde er med til at fange opmærksomheden, da det er det første man ser på hjemmesiden. Den blå farve har jeg valgt som baggrundsfarve til moddulet med selve portfolien, da jeg gerne vil skabe lidt blikfang og interressse omkring dette element. FLOWCHART OM MIG Den blå farve bruges også til små elementer siden igennem, for at holde den røde tråd, og give det hele en sammenhæng. Den blå farve symbolisere også pålidelighed, loyalitet, produktivitet, stabilitet, inspiration og orden. Dette er egenskaber man gerne vil koble samme med en frisør, inden man vælger at gå til dem. Kontrasten mellem den blå og lyserøde giver liv til den ellers meget neutrale hjemmeside. PORTFOLIO KUNDERNE KONTAKT R:10 G:55 B:160 R:229 G:211 B:213 R:86 G:84 B:84 R:216 G:215 B:214 R:255 G:255 B:255

5 8 SVENDEPRØVE 2016 GRAFISK DESIGN 9 SVENDEPRØVE 2016 GRAFISK DESIGN 11. FONTE Jeg har valgt at bruge en font uden seriffer, da fonte uden seriffer er nemmere og mere behalige at læse på en skærm. Fonten har dog stadig lidt karakter, så det giver lidt liv til siden. De to fonte jeg har valgt er begge fra google fonts, som er en nem og gratis løsning, hvis man gerne vil benytte andet end standard webfonts. Når man downloader fonten, får man genereret en kode, som man bare sætter i sin <head>. Cairo ABCDEFGHIJKLNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !?&@ Shadow into light ABCDEFGHIJKLNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !?&@ 12. OPTIMERING AF BILLEDER Jeg vil gerne sikre mig at hjemmesiden har en hurtig loading, derfor optimere jeg alle billederne til hjemmesiden. Der er flere grunde til, at loadingtiden er vigtig for vores side:» Hurtigere loadingtid optimere brugeroplevelse» Google ser hurtige sider som mere væsentlige» Websitet kan tilgåes selv med dårlige mobilforbindelser Alle billederne bliver gemt som RGB, og med en ppi på 72. Jeg bruger save for web funktionen i photoshop, hvor jeg kan se 4 versioner af billedet, og derudfra vudere hvilket kvalitet der passe bedst. Hvis jeg skal bruge billederne uden baggrund, gemmer jeg dem som en png. 13. KODESTRUKTUR For at gøre koderne mere overskuelige har jeg tilføjet kommentare i både HTML og CSS, for bedre at kunne navigere. 14. GODKENDELSE & VALIDERING Når hjemmesiden er godkendt, og lagt på nettet kører jeg en validering af hjemmesiden via. W3C.org. 15. SEO For at give siden et udgangspunkt for at blive indekseret på Google har jeg lavet den basale og nødvendige SEO.» Title-tags» Meta description + keywords» Alt-tags 16. AIDA MODELLEN» ATTENTION Coverbillede er blikfang for besøgende. Den lyserødefarve og de to skriftertyper i kontrast til hinanden fanger brugerens opmærksomhed» INTEREST Igen er coverbilledet med til at den besøgens interesse» DESIRE Brugeren ønsker mere viden og scroller derfor videre ned af siden» ACTION Brugeren klikker sig ind på den ønskede side, via menuen i toppen. Den klare blå farve på portfolien gøre også at brugerens opmærksomhed bliver trukket hertil, og pga. hoveren på billederne fristes de til at trykke. ARBEJDS PROCES» Brainstorm af hjemmeside krav og ønsker» Skitser + wireframe til et godt overblik» Opsætningen af hjemmesiden» Redigeringen af billedemateriale» Sparing med en kunde» Tilrettelser efter kundemøde» Hjemmesiden er klar til at blive lagt op» Validering af hjemmeside

6 10 SVENDEPRØVE 2016 GRAFISK DESIGN 11 SVENDEPRØVE 2016 GRAFISK DESIGN LOGO & VISITKORT Til at understøtte hjemmesiden, ønskede kunden et logo og tilhørende visitkort. Stilen skulle være den samme som allerede implemeteret på hjemmesiden. 17. LOGO Kunden havde et ønske om et logo, i en enkelt stil og som skal være nemt at afkode. Da logoet skal brande hende var det ideelt at bruge hende initialer til at skabe et rent og simpelt logo. Fonten, jeg har brugt, hedder Avenir. Jeg synes, den har en fin form, som passe fint til hendes stil. Jeg har outlinet teksten, og derefter arbejdet lidt med vektor bogstaverne, for at give det en fin sammenhæng. Efter mit første møde med kunden begyndte jeg at skitse på, hvordan logoet kunne udforme sig. Først skitsede jeg i hånden, derefter i Illustrator hvor jeg til sidst kom frem til den endelige løsning. Da jeg var tilfreds og var kommet frem til det færdige resultat, konverterede jeg det hele til vektorgrafik, så det kan skaleres uden at miste proportionerne. Avenir Book ABCDEFGHIJKLNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå !?&@ 18. VISITKORT Visitkortet skal ligeledes være enkelt, og let overksueligt. På visitkortet har jeg brug samme font, og billede som jeg benytter på hjemmesiden, for at skabe en genkendelighed. Jeg har lagt en grå hårstruktur i baggrunden på visitkortets forside, for at fortælle modtageren at det her omhandler frisørfaget. På bagsiden er logoet placeret i toppen, og herefter navn og erhverv. Sekundært finder man de nødvendig kontakt oplysninger. For at holde stil kører jeg stadig i de grå/lyserøde farver.

7 12 SVENDEPRØVE 2016 GRAFISK DESIGN