17 grafisk design September 2015 Birgitte Bremholm Persson
18
19 Kommende tøjbutik mangler identitet i form at logo, visitkort, paper bags, stickersmærker, folie til vinduer, Facebook-forretningsprofil og et web-visitkort. Teksten er centreret, det vil sige der er omtrent lige meget luft (padding på websiden) oppe som nede, og i hver side. Det giver ro og balance og det kan vi mennesker godt lide at se på. 20 23 Typografi (Gill sans) samt sort og hvid er de retningslinjer jeg på forhånd var blevet stillet. Det er en ukompliceret eksklusiv butik med priser i den højere ende af skalaen. Indretningen er simpel, spartansk og moderne. Introduktion Gestalt-loven med nærhedsprincip og forbundethed giver et roligt flow i læseforståelsen af teksten. Man er klar over der afsluttes en information, før en ny begyndes. Der er fx god luft mellem tekstblokkene og elementerne på web-visitkortet, så det tekst der omhandle det samme, står sammen [figur 22]. Jeg startede med at holde et møde med kunden for at danne mig et billede af kundes forventninger, stil, målgruppe, beliggenhed og så småt lave skitseforslag til logo og de grafiske virkemidler [figur 20] der skal kendetegne butikken. Jeg planlagde en strategi for hvad vi skulle nå at have designet inden butikkens åbning. Der var en lille udfordring i at nå at få paper bags hjem inden åbning, da kundens poseleverandør for produceret i Kina ergo en leveringstid på mindst 5 uger fra de modtager trykklar fil. Målgruppe Butikkens målgruppe er kvinder, modne og mellem ca. 25 og 65 år. Hvis man skal bruge Minerva-modellen kan vi sætte tre segmenter på denne målgruppe. Det blå, det grønne og det rosa segment. Hovedparten er i det grønne segment, de er moderne, engagerede og er fællesskabsorienterede. De handler lokalt og vil gerne have god service. De er tro mod sine egne. 21 24 Vi snakkede også om at tænke former og farver der egner sig på de forskellige digitale platforme som fx Face book og når logoet skulle bruges til trykt materiale. Grafiske virkemidler generelt Der er brugt sort baggrund med hvid typografi på alle layouts. Det er i sig selv en stor kontrast, som er et genialt grafisk virkemiddel. Den hvide farve er opløftende og optimistisk, hvor den sorte er skarp og lidt alvorlig. Sort og hvid er moderne og klassisk. Der er brugt mere luft/afstand mellem bogstaver og linjer end normalt (som fx 10/13 pt som linjeskydning). Det giver plads til at trække vejret og man føler ingen pres. Det ser professionelt ud og giver et rent udtryk [figur 21]. Logo Med farver og Gill sans MT som retningslinjer manglede jeg formgivningen af logoet. Butikkens inventar taget i betragtning skulle logoet være kantet og maskulint. Jeg lavede nogle få håndskitser og blev hurtig klar over jeg ville få bedre resultater i Illustrator [figur 23]. For at skabe identitet og genkendelighed for logoet har jeg spatieret mellem bogstaverne i logoet. Det giver lige meget luft imellem hvert bogstav. Det ser eksklusivt og moderne ud og drager paralleller til butikkens identitet. Logoet er printet i småt og stort og vendt på hovedet for bedre at kunne se regelmæssighed i spatieringen og er derefter finjusteret (alt+piletaster). Det endelige logo rentegnet i Illustrator [figur 24]. Logo fungere i lille og stort [figur 25]. 22 25
20
Dato: Navn: KUBACH Type: Papirpose Størrelse: 320x120x400 mm My: Farve: Sort/hvid Pedersholmparken 6 DK 3600 Frederikssund Tlf.: +45 27 57 7164 www.contecpackaging.com Bank reg. 3543 Kontonr. 11039375 Cvr. nr. 3389997 21 Luften er vigtig omkring typografien er super vigtig, man føler sig velkommen og afkoder nemt budskabet. Budskabet er moderne, troværdigt og indbydende. Paper bag Ud fra skabelonen (pdf-fil) fra poseleverandøren lavede jeg det nye posedesign [figur 26] i Illustrator, med farveprofil Coated FOGRA39 (ISO12647-2:2004). I farverummet CMYK og ingen grafikstreger under 0,25 pt. Al tekst skulle Outlines (fra tekst til grafik), for at sikre valgte korrekte typografi og placering. Jeg har kørt en PreFlight-profil i Acrobat for at sikre pdf-filen levede op til disse krav. Sticker og visitkort Stickersfilen [figur 27] krævede en CutContour, en skærelinje. Jeg oprettede en ny Spotcolour og navngav den præcis CutContour ellers kan computeren der skal læse filen ikke vide hvor den skal skære. Den visuelle farve (pink stroke) er lige gyldig, den kommer ikke med på printet. Jeg lavede en 1 pt stroke rundt om stickersmærket og gemte som pdf-fil. Jeg har på både stickersmærkerne og visitkortene lavet en bleed på 2 mm, for at sikre den sorte farve helt ud til kanterne. Visitkortet [figur 28] er lavet i Illustrator og gemt i to pdf-filer, en forside og en bagside med farveprofil Coated FOGRA39 (ISO12647-2:2004) i CMYK. Der er ingen PreFlightprofil eller lignende fra vistaprint.dk, jeg kan tjekke mine filer efter. Så det er vigtigt jeg laver en profil selv med de gængse standarder/regler som korrekt farveprofil, Outlinet tekst og ingen linjer under 0,25 pt. Jeg har brugt følgende breakpoints i html-filen, som er lavet i DreamWeaver [figur 29+30]. /* Mobile Layout: 480px and below. */ courier /* Tablet Layout: 481px to 768px. */ /* Desktop Layout: 769px to a max of 1600px. */ På den måde kan du style (på dit linkede stylesheet/css eller direkte øverst i html-filen) og placere elementer hvor du ønsker, alt efter hvilken enhed websiden ses fra. Jeg har valgt at skrive navnet som tekst i stedet for at sætte et billede ind, det giver bedre søgeoptimering (SEO). For at efterligne logoets spatiering og fonttype har jeg valgt sans (uden seriffer) og stylet med letter-spacing:15px; for at give samme luft. Ligeledes med line-height:1.9em;har jeg givet mere luft til skydningen mellem linjerne. I Headeren (meta data) har jeg skrevet unikke Keywords til siden for at optimere browsersøgningen. I Description (meta data) har jeg også skrevet en unik tekst, så Google ikke selv snupper tekst fra websiden og fylder ud med. Jeg har i html-filen stylet baggrundsbilledet så det dækker hele det åbne vindue. html { background-color:#000; background: url(photo/bg_kubach.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Baggrundsbilledet er et jeg selv har taget og senere redigeret i Photoshop. Psd-filen har adskillige lagmasker med Hue and Saturation, Brush skygger, Brush lysne og Invert. 26 27 28 Specifikationer: Bemærk! Venligst gennemlæs korrekturen for eventuelle tastefejl - om mål og logo er korrekte. Farver på skærm og farver på tryk kan ikke sammenlignes 100%, så tjek venligst, om det er de rigtige pantonefarver, der er defineret på skrift! Når korrekturen er godkendt, hæfter Contec Packaging Scandinavia IKKE for fejl! 29 30 Programmer Adobe DreamWeaver Adobe PhotoShop Web-visitkort (webside) Jeg har lavet websiden responsive med de forskellige mediers breakpoints. Det er vigtigt når vi i dag bruger både desktops, laptops, tablets og smartphones i mange forskellige størrelser. Adobe Illustrator