Grundforløbsprojekt Mediegrafiker Erik David Ahler

Transkript

1 Grundforløbsprojekt Mediegrafiker

2 Indhold Tidsplan Synopsis Interview Grafisk Design Grafisk Workflow Typografi og ombrydning Grafik og billeder Konklusion

3 Tidsplan Tidsplan DAG DATO OPGAVER Fredag Virksomhed kontakt - OJ Reklame Tidsplan Udarbejdes Synopsis startes UGE 43 Mandag Tidsplan og Synopsis udarbejdes Tirsdag Onsdag Torsdag Aflevering af tidsplan og synopsis kl Interview udføres, materiale indsamling og artikel skrives. Inspiration søgning, brainstorming og skitse tegning. Farvevalg og udarbejdelse af logo. Hjemmeside startes - Idé generering, Wireframing & Flowchart udarbejdes. Fredag Hjemmeside - Kodning startes - Kodning af frontpage og css. UGE 44 Mandag Inspiration søgning og brainstorming, farver & font. Profilbrochure / Dokumentation Tirsdag Profilbrochure opsætning, paragraph mm. / Dokumenation Onsdag Profilbrochure / Dokumentation Torsdag Plakat / Dokumenation UGE 45 Fredag Plakat / Dokumentation Mandag Eftertjek produkter - Korrektur læsning mm. Tirsdag Output / Pdf - Dobbelttjek produkter. Onsdag Aflevering af produkter kl Forberedelse til eksamen. Torsdag Eksamen - Forsvar produkt. UGE 46 - Grundforløbsprojekt

4 Synopsis Opgaven Der skal i opgaven fremstilles marketingsmateriale til brug ved profilering af virksomheden. Der skal produceres en plakat, en profilbrochure, en hjemmeside og et logo. Distribution af materialet Virksomheden benytter sig af directmails og direkte kontakt til kunden via telefon eller mails, ydermere benytter virksomheden sig af hjemmeside og webshop til deres produkter inden for udstillingsmesser. Afsender Oj reklame blev grundlagt tilbage i 1990, i dag er OJ reklame et multi funktionelt reklamebureau, og de dækker en bred vifte af forskellige grafiske funktioner. Lige fra trykt kommunikation og web til markedsføring og planlægning. Virksomheden er med dens 3 medarbejdere et lille bureaue men med kapicitet til at lave store opgaver. Succeskriterier Hos OJ reklame bliver succeskritierne bygget på at give kunden det bedst mulige, og på at holde en ren designlinje i det materiale de leverer, til en konkurrence stærk pris. OJ reklame vil gerne være kendt for deres faglige omhu og for at give det rigtige budskab. Målgruppe Oj reklame har primært en bred målgruppe, geografisk placering for virksomhedens målgruppe er i denne sammenhæng et ikke gældende parameter, da virksomheden har kunder på landsplan, og distribuere også deres løsninger derefter. Kommunikationsstrategi Oj reklame bruger en informativ/fakta baseret kommunikationsstrategi. Virksomheden ønsker ikke at manipulere med deres budskaber, men derimod fremme dem via en kreativ vinkel. 4

5 Interview I forbindelse med opgaven, i en profilering af virksomheden OJ reklame, og for at få information til synopsis og materiale til selve opgaven, skulle der udarbejdes en række spørgsmål og interviewe virksomheden. Interviewet er i første omgang foregået hos virksomheden, og efterfølgende er der blevet fulgt op med korrekt information og billedmateriale via mail. Jeg har valgt følgende spørgsmål ud fra at få nok information til at målrettet kunne sammensætte platkat, brochure ud fra den korrekte målgruppe. Afsender Hvem er I? Historien bag virksomheden Hvordan blev i stiftet? Målgruppen Hvem er jeres målgruppe? Primære og sekundære? Hvilke løsninger tilbyder i? Hvilke opgaver arbejder i primært med? Logo, Web, Tryk Distribution af materialet Hvordan får i jeres budskab ud? Informativt, manipulativt eller begge? Sponsoring Hvem samarbejder i med? Hvorfor og hvad får i ud af det som virksomhed? 5

6 Grafisk Design Fremstilling af #logo

7 Grafisk Design Opgavebeskrivelse Under Grafisk Design har jeg valgt at tage udgangspunkt i re-designet af logoet for OJ reklame, jeg har arbejdet selvstændigt med opgaven, og da dette er en fiktiv opgave, har jeg ikke haft løbende kontakt med virksomheden omkring processen. Programmer Layout Da det har været en fiktiv skoleopgave, har jeg selv godkendt mine idéer og design undervejs. Igennem arbejdsprocessen har jeg udarbejdet forskellige skitser og udkast, som jeg har fået igennem min brainstorm og inspirationssøgning. Jeg fandt tilsidst et passende design som jeg følte var det der både passende på målgruppen og udtrykket. Procressbeskrivelse Der er blevet taget udgangspunkt i det gamle logo fra OJ reklame, og er altså blevet re-designet, valget blev truffet for at kunne bibeholde noget genkendlighed ved virksomheden. Målet var at designe et logo som er mere moderne og up-to date, hvor logoet også træder mere i karakter og synlig. Min arbejdsproces har været: Inspirationssøning på nettet Brainstorm Skitsetegning i hånden Farve og font valg Udarbejdelse af forskellige logo designs i illustrator Udarbejdelse af endelig valg Kvalitetsvurdering Ideen var at holde logoet enkelt og minimalistisk. Det synes jeg er lykkedes, samtidig er logoet holdt genkendelig med det orginale logo, pakket ind i en ny og moderne layout. Alt i alt er jeg godt tilfreds med resultatet af logoet, jeg synes at det fungerer rigtigt godt på de forskellige produkter. 7

8 Grafisk Design Inspirationssøgning Sammenhængende bogstaver som flyder sammen, kreativt og fleksibel Den gode luft opdeling imellem bogstaverne skaber en god harmoni Flowet som den runde cirkel giver er gået med videre over til mit O, hvor jeg har prøvet at skabe den samme dynamik 8

9 Grafisk Design Brainstorm Der er blevet valgt følgende nøgleord for logoet til OJ reklame. Dynamisk Flow Rene linjer Minimalistisk Genkendelighed Fleksibel Moderne Kreativitet Skitser Forskellige skitse layouts, tegnet i hånden. 9

10 Grafisk Design Typografi Der er blevet valgt to forskellige varianter af den samme font. De har begge to en god harmoni med hinanden, Den er let læselig og giver en god kontrast. Avenir LT Std 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 æ ø å Farver De primære farver er holdt i rød og sort. Farverne er neutrale og seriøse, og der er en god kontrast imellem dem. Ydermere har farverne en god kontrast på både sort og hvidt underlag. Så logoet passer til forskellige miljøer. Farvesymbolik Den røde farve er blevet valgt på grundlag at den er varm og samtidig udsender et seriøst signal. Det flow og energi som den røde farve udstråler går let genkendeligt igen i virksomheden % & ( ),. : ;!? - Avenir Next LT Pro Rød Sort 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 æ ø å % & ( ),. : ;!? - 100% 75% 50% 25% C=25 M=100 Y=100 K=15 C=0 M=0 Y=0 K=100 R=144 G=32 B=30 R=34 G=34 B=32 Hvid 100% 75% 50% 25% 100% 75% 50% 25% C=0 M=0 Y=0 K=0 R=255 G=255 B=255 10

11 Grafisk Design Præsentation logo 200% 150% 100% 75% 11

12 Grafisk Workflow Fremstilling af #hjemmeside

13 Grafisk Workflow Opgavebeskrivelse Oj Reklame skulle have re-designet og programmeret en ny hjemmeside, siden er valgt at blive bygget op som en præsentations side, hvor man har mulighed for at se de løsninger og ydelser der tilbydes fra virksomheden, og man har mulighed for at se nogle af de aktuelle cases som OJ Reklame står med lige nu og her. Programmer Layout Siden er responsive, så den tilpasser sig mobil og tablets. Menu linien ændre sig til mobilmenu når siden kommer under et max antal pixels i bredden. Links med en hover effekt, hvori den røde tema farve indgår. Fonten Yanone Kaffeesatz er blevet benyttet som gennemløbende font på siden, da den er let læselig på skærm og har nogle gode runde former. Stringent opsætning med bokse. Usability Siden er enkelt, overskuelig og nem at navigere rundt på, der er benyttet korte afsnit af tekst. Så den ikke bliver tekst tung. Siden er nedtonet, så der er en god kontrast til den røde farve på siden. Bunden med bl.a. kontakt går igen på de forskellige sider, så det er nemt at finde kontakt oplysningerne. Procressbeskrivelse Der er blevet taget udgangspunkt i at lave en overskuelig præstationsside for virksomheden OJ Reklame, hvor de forskellige ydelser og løsninger bliver fremhævet. Min arbejdsproces har været: Inspirationssøning på nettet Skitse tegning i hånden Udarbejdelse af flowchart og wireframe Programmering af siden med brug af HTML5, CSS3 & jquary Tilpasning til mobilenheder og tablets Søgeoptimering(SEO) - Meta tags Browserkompatibilitet Browserkompatibilitet Sitet er testet i Chrome, Firefox, Safari og Internet Explorer, og her fungerer siden som den skal, der kan være lidt problemer med internet explorer 8 og 9, da disse er ældre versioner. Kvalitetsvurdering Jeg er blevet rigtig tilfreds med det færdige resultat, sitet er blevet overskueligt og nemt at navigere rundt på. Det responsive design er blevet både enkelt og indbydende, og det lever op til forventningerne. 13

14 Grafisk Workflow Brainstorm Minimalistisk Enkle farver Overskuelighed Erik David Ahler Inspiriationssøgning De brede kasser og opdelingen, god brug af luft, giver et rent design og neutralt udtryk. Det giver et flot visuelt udtryk at bruge forskellige størrelser illustrationer. 14

15 Grafisk Workflow Skitser Flowchart index.html ydelser.html cases.html kontakt.html profil brochure Plakat Dette er det layout jeg vil bygge videre på, det har et godt og overskuelig design og der er mulighed for at fremvise virksomhedens cases. 15

16 Grafisk Workflow Typografi Yanone Kaffeesatz er blevet valgt på baggrund af dens runde former, Yanone Kaffeesatz er en font designet til web og grafisk design. Fonten er desuden en google webfont. Yanone Kaffeesatz Farver Designlinjen er blevet holdt, og siden er blevet holdt i nogle neutrale farver, kombineret med den mørkerøde farve fra logoet, som går igen henover de forskellige produkter. Enkelt farvevalg Hvor illustrationer og billeder er grayscale(sort/hvid) eller med en nedtonet farve. For at kunne fremhæve den røde farve. 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 æ ø å & ( ),. : ;!? - Yanone kaffeesatz er let læselig på skærm, og den står i god kontrast til de forskellige elementer på hjemmesiden, og OJ Reklame logoet. Rød Sort 100% 75% 50% 25% C=25 M=100 Y=100 K=15 C=0 M=0 Y=0 K=100 R=144 G=32 B=30 R=34 G=34 B=32 Hvid 100% 75% 50% 25% 100% 75% 50% 25% C=0 M=0 Y=0 K=0 R=255 G=255 B=255 16

17 Grafisk Workflow Erik David Ahler Gestaltlovene Igennem hjemmesiden er gestaltlovene blevet tænkt ind i designet, dette kan tydeligt ses på eksemplet til højre. Loven om nærhed, teksten her er anbragt tæt sammen - Men man er ikke i tvivl om hvilken tekst der hører til hvad. Loven om lighed, navigations menuen er ens på alle sidern. Det giver siden noget genkendlighed, og gør den mere overskuelig. Loven om lukkethed i praksis, siden er opdelt i forskellige rammer som gør at der bliver en opdeling, hvor man stadigvæk kan se hvad der hører sammen. 17

18 Erik David Ahler Grafisk Workflow Html og CSS Skærmdumps Der er blevet lavet en overskuelig opstilling af koden på alle siderne. Ligesom kommentarerne, som gør det nemmere for en andenpart at overtage koderne og danne sig et overblik. Æ, Ø og Å er blevet erstattet af html koden. For at sikre at browseren viser korrekt, selvom tegnkodning er sat til UTF-8 Søgeoptimering På siden har jeg tilføjet en søgeoptimering ved at tilføje title, description og keywords i headeren på alle sider. Kommentarer i koden Der er blevet tilføjet forskellige kommentarer i HTML-koden og CSSen for at give overskuelighed, det gør det nemmere for en mulig andenpart at overtage og gennemskue koden. Kommentarene er desuden skrevet på engelsk, så koderne også kan sendes til en udenlandsk person og arbejdes videre på. Der er blevet sat noscript på html koden på alle sider, så der ikke er mulighed for at gå ind på css koden fra browseren. 18

19 Grafisk Workflow Præsentation 19 Erik David Ahler

20 Typografi og ombrydning Fremstilling af #profilbrochure

21 Typografi og ombrydning Opgavebeskrivelse Der skulle udarbejds en profilbrochure for OJ Reklame, brochuren har til formål at informere målgruppen og eventuelle nye kunder omkring virksomhedens værdier. I opgaven har jeg arbejdet selvstændigt med ombrydningen, jeg har haft kontakt til OJ Reklame omkring artiklen, og er blevet godkendt af dem. Programmer Dokumentet 200x200 mm, antal sider: 16 2 spalter som udgangspunkt med 8 mm spalteafstand Margin: Top 24 mm, bund 30 mm, inderside 16 mm, yderside 35 mm Baseline Grid Sat til brødtekstens skydning på 15 pt Topmargin flugter brødtekstens X-højde Brødtekst Dax light 10 pt/15 pt, venstrestillet Låst til grundlinienettet Rubrikker Yanone Kaffeesatz bold 120 pt / 123 pt, venstrestillet Tracking på 40 Spam columns Optiske tilretninger Overskrifter er justeret til optisk forkant Første bogstav i overskrifter er justeret til forkant Kvalitetsvurdering Jeg er blevet rigtig tilfreds med det færdige resultat, brochuren er blevet overskuelig, jeg har arbejdet meget med tekst ombrydningen herunder knibning og spærring af overskrifter, og fået det til at se godt ud optisk, hvilket har fået teksten til at harmonere. 21

22 Typografi og ombrydning Opslag side 2-3 Alt brødtekst er venstrestillet så det holder kant Automatisk genereret indholdsfortegnelse Indhold Hos OJ reklame tilbyder vi en komplet løsning, alt sammen foretaget under samme tag. Kom forbi og besøg os på: Buskvej Herning I er også altid velkomne til at kontakte os på mail eller telefon. Mail: [email protected] Telefon: Da reklamebureauet OJ reklame så dagens lys i 1990, var mulighederne ikke de samme som i dag. Dengang var opgaverne typisk annoncer, brev linjer og brochurer. Og det blev lavet med håndskitsering og mørkerum. Ikke på computer som i dag. Ideen til virksomheden sprang frem da der indenfor det grafiske skulle tilbydes noget nyt, hvor kvalitet og priser kunne gå hånd i hånd. Digitalprint og tryk Webløsninger til dit behov Kompetencer º Hartmann racing lokal samfundet Udstillingsmaterialer Der er benyttet tab funktion for at forlænge afstanden fra det sidste punktum 22

23 Erik David Ahler Typografi og ombrydning Opslag side 4-5 Manuel knibning af flere overskrifter for bedre harmoni Digitalprint og tryk Digitalprint Vi tilbyder bl.a.: Vi printer dine opgaver hurtigt og i høj kvalitet på papir op til 350 gr. Det er alt fra visitkort til salgsmateriale og større kataloger. Flere og flere opgaver kan i dag med fordel digitalprintes. Labels og klæb til udstillinger, gulv eller vinduer. Efterbehandling: Falsning, hæftning, hulning og laminering samt pakning og distribution. 4 Der er benyttet object style på kasserne, for at give luft til teksten Papirlinie (brevpapir, visitkort osv.) Flyers Profilbrochurer Magasiner Hæfter Foldere Annoncer Distribution Roll-Up bannere Dekoration Salgsmaterialer Messe- og udstillingsmaterialer Stofformat 5 Pagina der automatisk opdateres ved siderne 23

24 Typografi og ombrydning Opslag side 6-7 Manuel knibning af overskriften for bedre harmoni Webløsninger Til dit behov Hos OJ reklame tilbyder vi skræddersyede løsninger inden for webløsninger, vi udvikler hjemmesiden sådan at design linjen holdes. Vi tilbyder dig Flot design Menu struktur Brugervenlighed Informativ Søgeoptimering Vi kan tilbyde dig en basis HTML side, eller den store løsning med integreret CMS system. Alt er muligt, bare idéen er rigtig. En basis hjemmeside lavet i html er en billig løsning, hvor vi bl.a ß Opdaterer siden for dig løbende ß Fremmer hjemmesiden med søgemaskineoptimering(seo) En CMS baseret hjemmeside er den store løsning, hvor vi kan tilbyde dig. En simpel og overskuelig hjemmeside ß Søgemaskineoptimering ß Modul- og funktionsbaseret ß Online teksteditor ß Online Shop 7 Streg under er brugt for at lave opdeling 24

25 Typografi og ombrydning Erik David Ahler Opslag side 8-9 Kompetencer I dag tilbyder OJ reklame et bredt sortiment af produkter inden for området. Vi er en gruppe engagerede og kreative mennesker, der brænder for faget og vil det bedste for vore kunder. Derfor udvikler vi også hele tiden vores kompetencer, da man aldrig bliver helt udlært i denne branche. Siden 1990 har OJ reklame været et firma som vægter fleksibilitet og kvalitet som det højeste, vi brænder for det vi laver og vi sørger for at fleksibelt og kvalitet går hånd i hånd, hvad enten det drejer sig om rådgivning, web og designudvikling eller trykte løsninger. Skal du på messe, udstilling eller udsende POS materiale, så kom med dine opgaver. Vi printer på så godt som alle materialer fra papir til tyndt plast, klæb, banner, mesh, backlit, stof m.m. 8 9 Figursats er benyttet for at give den rigtige afstand til teksten 25

26 Typografi og ombrydning Opslag side Der er benyttet object styles på bokserne, hvor teksten er blevet centeret Opsætning Storformatprint Digitalprint og tryk 360 º Webløsninger Hos OJ Reklame dækker vi dine behov hele vejen rundt Præsentationer Udstillingsmaterialer Direct marketing 26

27 Typografi og ombrydning Typografi Der var ingen krav til valget af font, så jeg har haft frie hænder til selv at vælge. Valget faldt på en Dax til brødtekst, og Yanone Kaffeesatz til overskrifter, sidstnævne er også blevet valgt på hjemmesiden. Dette er også med til at give en rød trød fra brochuren til hjemmesiden, udover farverne. Brødtekst Dax light 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 æ ø å & ( ),. : ;!? - Overlinie Hovedlinie Grundlinie Overlængde Typografi X-Højde Majuskelhøjde Underlinie Overskrift Yanone Kaffeesatz 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 æ ø å & ( ),. : ;!? - Hårstreg Underlængde 27

28 Grafik og billeder Fremstilling af #plakat

29 Grafik og billeder Opgavebeskrivelse Til opgaven skulle der udarbejdes en plakat til virksomheden, igennem opgaven har jeg arbejdet selvstændigt og har ikke været i kontakt med OJ Reklame under processen. Plakaten har haft til formål at skulle vise hvem OJ Reklame var og fremme dem som virksomhed. Programmer Formater, profiler og farverum Billedet der er blevet benyttet er af JPG format, og konveteret til profilen Adobe RGB(1998). Til slut er det blevet konveteret til CMYK Coated FOGRA39. Billedet som er blevet benyttet er ligeledes blevet ændret til en PPI på 150 for at give det bedst mulige resultat på udprint, for at imødekomme printeren på skolen er det kun ændret til 150 PPI, og ikke 300. Logoet som er blevet benytet er vektor. Processbeskrivelse Anvendt farveprofil: Adobe RBG(1998) Oprettet korrekt dokument format, A3 med en bleed på 3 mm Sat opløsning til 150 PPI PPI blev ikke valgt på baggrund af printer Justeret lys og skygge, samt farvestik Justeret kontraster på billedet Tilføjet Blur - Og justeret top og bund Justeringer Konveteret til CMYK profil inden tryk: Fogra39 (ISO ) Samlet elementer i Indesign Prøveprint - Justeringer Kvalitetsvurdering Jeg er blevet meget tilfreds med resultatet, opgaven blev løst tilfredstillende og jeg har synes jeg har ramt budskabet med plakaten godt, i form af den kreative vinkel og brugt farverne på en god måde. Der er en god sammenhæng imellem tekst og billede. Værktøjer benyttet i Photoshop Levels Curves Color Balance Hue/Saturation Gaussian Blur Skabe et neutralt billede og justere lys/skygge Justere kontraster Fjerne farvestik Farve justering Sløre områderne top og bund 29

30 Grafik og billeder Anvendt billedmateriale 30

31 Erik David Ahler Grafik og billeder Levels Det orginale billede var mørkt og der var en smule grøn farvestik, dette justerede jeg ved hjælp af levels, ved at finde det lyseste punkt og det mørkeste punkt. Dette er for at gøre lys og skygge neutrale. 1 Efter justering af levels er billedet kommet til at se sådan ud. 2 31

32 Grafik og billeder Curves og Color Balance Med curves er billedet blevet lysnet en smule mere, og med brug af color balance er farverne rettet til, så den grønne og blå farve er mere fremtræden, samtidigt er der tilføjet en smule mindre rød, for at give lidt mindre varme i billedet. 3 32

33 Erik David Ahler Grafik og billeder Afslutning Alle elementer bliver samlet i Photoshop, og filen bliver konveteret til CMYK. Det hele bliver samlet i Indesign på A3 højformat med 3 mm bleed. Afslutningsvis bliver det eksporteret som PDF med High Quality Print som profil. Test print og justeringer bliver gjort efter. 1 Farver på dit budskab 2 3 Buskvej Herning 33 Tlf.:

34 Konklusion Jeg er meget tilfreds med mit endelig resultat. Igennem projektet har jeg lært en masse af de forskellige processer, og er endt ud med et resultat som jeg igennem de 4 produkter ser en vellykket sammenhæng imellem. Jeg har bevaret design linjen igennem de forskellige produkter, og den røde tråd er holdt igennem farver og skrifttyperne. Jeg har prøvet at holde det minimalistisk og overskueligt hele vejen igennem, simpelt og undgået for mange detajler, for også at kunne gå ud og ramme målgruppen. Projektet har overall været rigtig godt, og jeg er blevet udfordret igennem alle 4 produkter, jeg har været god til at holde mig til min tidsplan og fandt den tid vi havde til at være passende. 34