Grafisk Design OVERSIGT. 1 Opgaven A. Opgavebeskrivelse B. Målgruppe C. Brainstorm D. Moodboard

Transkript

1 OVERSIGT 1 Opgaven A. Opgavebeskrivelse B. Målgruppe C. Brainstorm D. Moodboard 2 Logo A. Skitser B. Valg af fonte C. Farver D. S et E. Kvalitetstjek 3 App A. Overvejelser B. Format C. Moodboard D. Skitser E. Flowchart F. Design G. Knapper H. Export til kodning I. Færdige produkt Grafisk Design 4% Ai 55% Xd 5% Ps Henrik Storm Pedersen - Dokumentation

2 1. Opgaven Blå segment Grøn segment Grå segment Violet segment Rosa segment A. Opgavebeskrivelse Opgaven går ud på at lokke nye elever til Idrætshøjskolen i Sønderborg. Jeg vil forsøge at ramme de unge i form af et helt nyt logo, samt design til en App til iphone 6s. Mange unge har idag en Iphone til rådighed, og det er der man kan fange de dem. Opgaven omkring Appen er fiktiv. Den del med logoet er en arbejdsopgave. Logoet skal skabe en visuel identietet for skolen, det skal være et logo der let kan genkendes. De lagde vægt på det skulle være lidt a la Sine Efterskole og Oure. Samtidig skulle det illustrere bevægelse, skov og vand. Til sidst skulle navnet ændres fra Idrætshøjskolen Sønderborg til Sønderborg Idrætshøjskole. B. Målgruppe Hvis vi kigger på Minerva modellen, så er det det grå segment der er fokus på. Det er primært i det grå segment hvor de unge mennesker befinder sig. Det er her, folk som der elsker at være sammen med venner, lave aktiviteter og leve et aktivt liv ligger. Det er personer som er lidt usikker på sig selv, og endnu ikke har skabt en identitet. Derfor vil et højskoleophold kunne hjælpe med det. 34/25

3 1. Opgaven Ekstremsport Skole Skov Natur Unge mennesker Sønderborg Visulet Teknologi Blade Logo / App Identitet Dråber Sport Aktiv Venner Genkendelse S Vand Overskueligt Hygge Oplevelser Ski C. Brainstorm D. Moodboard 35/25

4 2. Logo Den gamle logo-font. Med meget luft i mellem bogstaverne. Ny logo-font. Myriad Pro - Sønderborg i regular og Idræthøjskole i bold. Den valgte skitse jeg vil lave mit logo udfra. A. Skitser Jeg startede arbejdsprocessen med at lave skitser. Det stod hurtig klart for mig at fokuset skulle være på S et, og det skulle kunne stå for sig selv. Jeg ville implementere vand, bevægelse og skov. Efter lidt forsøg kom jeg frem til et spændene resultat, hvori jeg havde alt implementeret. Den skitse jeg tegnede, har et blad og et dråbligende element, der sammen med S et danner en cirkel. Og selve dråben og bladet danner en slags pile der illustrere bevægelsen. B. Valg af fonte Fonten til logoet, blev jeg klar over skulle være en sporty og stærk font. Den skulle stadigvæk ikke afvige sig helt fra den tidligere logo-font. Den nye font, har ikke lige så meget luft i mellem bogstaverne. Den har også et lidt mere moderne udtryk over sig. 36/25

5 2. Logo RGB RGB RGB CMYK 1 CMYK CMYK Grønt forløb Blåt forløb C. Farver Farverne er valgt udfra det gamle logo. Jeg vil gerne beholde farverene som en del af historikken. Farverne repræsentere skov og vand, ligesom på det gamle logo. Jeg har for at skabe, bevægelse og implementere skov og vandelementerne lidt kraftigere, lavet et farveforløb i den grønne og blå farve. Brug af RGB farver er til dit digitale platforme, og CMYK farverne er til brug på tryksager. D. S et S-logo er den vigtigste del af logoet. Det er den der fremover skal skabe genkendelse. Jeg startede med at lave en rund cirkel, ligesom min skitse og lavede et stort S i fonten Myriad Pro. Ved hjælp af kurvefinder, kunne jeg skære s et helt væk, sådan at mit S bliver dannet af den negative luft skabt af bladet og dråben. 37/25

6 2. Logo Standard logo Logo negativt Logo positiv SØNDERBORG IDRÆTSHØJSKOLE SØNDERBORG IDRÆTSHØJSKOLE Logo horizontal 2 linjer Logo horizontal 1 linje E. Kvalitetstjek Det er vigigt af et logo skal kunne fungere alle steder. Og en god tommelfingerregel ved et logodesign, er at den skal kunne fungere i negativ og positiv versioner. 38/25

7 Grafisk Design 2. Logo 39/25

8 667px A. Overvejelser Som skrevet i opgavebeskrivelsen, så vil jeg udarbejde et design til en app, som senere skal kodes. Appen skal vise en masse informationer og beskrivelser omkring skolen. Den skal være brugervenlig og samtidig have et flot design, med en rød tråd til det nye logo. App-designet er lavet i Adobe Experience Design. Det er et program, hvor man kan på artboards lave design for hver enkelt side i appen også sende en preview til kunden. Det gør det nemt for den der skal kode appen. På den her måde kan man let lave evt. rettelser i designet. Når designet er godkendt er det muligt at exportere hver enkelt artboard i 1:1 størrelse. 4/25 375px B. Format App-designet er bygget op efter en Iphone 6 og 7. I størrelsen 375 x 667 px. C. Moodboard

9 D. Skitser 41/25

10 HJEM BILLEDER GALLERI TILMELDING MENU FORÅR- SKOLEN SKI OG SNOWBOARDLINJEN SPECIALE FAG IDRÆTSFAG ALMENE FAG PRAKTISK INFO KALENDER BEACHVOLLEY ADVENTURE AROUND POLITICS JUNI KITE & WAKEBOARD BEACHSPIL KROP & KULTUR MAJ 36 OUTDOOR FITNESS LIVSVÆRDIER APRIL WINDSURF SEJLADS LEDELSE MARTS TRIATLON HÅNDBOLD FEBRUAR FODBOLD JANUAR E. Flowchart 42/25

11 Farver HSB HSB HSB HSB HSB HSB HSB 27º 84% 76% 27º 84% 76% 27º 84% 76% 27º 84% 76% 27º 84% 76% 27º 84% 76% 27º 84% 76% Fonte 1% 9% 8% 7% 6% 5% 4% Helvetica Neu Condensed Black ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ Helvetica Neu Condensed Bold ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ Helvetica Neu Regular ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ Helvetica Neue Condensed Bold 24 pkt. Helvetica Neue Regular 18 pkt. Helvetica Neu Bold ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ F. Design Farverne i mit design er primært blåt. I Experience Design, hvor jeg har lavet App-designet, hedder farverummet HSB (Hue, Saturation og Brightnes). Jeg har fundet frem til den værdi der hedder 27º, 84% og 76 %, ved at suge den blå farve, hvor den er mørkest, op fra logoet med pippette værktøjet. Farven blå symboliserer loyalitet, styrke, visdom og tillid. Og har en beroligende virkning på psyken. Fonten er Helvetica i forskellige vægte. Det er en af de mest populære fonte i verdenen. Fonten giver et moderne look og ser proffessionel ud. Farven er primært hvid på den blå baggrund. Det giver en god kontrast. App-designets punktstørrelser er som overskrift 24 pkt. og som brødtekst 18 pkt. Det giver god læsbarhed og er med til at øge brugervenligheden. Apple anbefaler i øvrigt man ikke går under 13 pkt. 43/25

12 Hjem/ forsiden Retur til galleri Retur til fagmenu Menu Forrige måned Næste måned Forrige billede Næste billede Til toppen G. Knapper Knapperne i min app, skal sikre brugeren aldrig farer vild i mit design. Knapperne er tydelige i deres budskab, så du aldrig er i tvivl om deres funktion. 44/25

13 H. Export til kodning I Experience Design er der en smart måde hvor man kan exporteres alle sine artboards i 1:1 størrelse. Det gør det nemt og overskueligt for den der skal kode appen. Jeg har exporteret hele designet som PNG, derefter kan man evt. lægge det ind i Photoshop og se alle målene. 45/25

14 I. Produktet Her ses eksempler på det færdige produkt. Hele appen kan ses på dette link: 61b5f-87c3-4a2e-b1d-4c1987dfaedc/ 46/25

15 47/25