Redesign af visuel identitet & website for Baresso Skriftlig aflevering aresso coffee ITU - DDK Grundlæggende Grafisk Design - efterår 2010 Thinh Duc Tran - thdu@itu.dk - 020583 2971 Vejleder: Ian Wisler-Poulsen
INDHOLDSFORTEGNELSE 1. Indledning 2. Analyse af det eksisterende 2.1 Analyse af den visuelle identitet 2.3 Analyse af website 3. Valg af medier til den visuelle del 3.1 Kampagne 3.2 Forklæde og kop 4. Bomærke, navnetræk og logo 5. Farve 6. Billeder 7. Typografi 8. Designpricipper og komposition 9. Reflektion 10. Bibliografi 11. Bilag (CD-ROM på bagsiden) 1. INDLEDNING Denne rapport vil indeholde mine refleksioner og argumentationer for de forskellige valg der er taget for redesignet af den visuelle identitet, websitet og den traditionel kampagne for Baresso. Skridtene mod udformningen af det færdige redesign dokumenteres gennem min arbejdsproces af håndtegnet skitser og halvfærdige versioner og idéer. 2. ANALYSE AF DET EKSISTERENDE Baressos nuværende website og bomærke har været udgangspunktet for mit redesign af den visuelle identitet. I denne del af rapporten vil jeg fremhæve de aspekter og elementer jeg mener kan forbedres ved Baressos bomærke, navnetræk, farve og website. 2.1 Analyse af visuelle identitet Bomærke Baressos nuværende bomærke består af en hvid kaffebønne der står i røde flammer. De symbolværdier der fremstår af bomærket er varm kaffe, ristning af kaffebønnen, at Baresso brænder for kaffe og den varme kaffe kan giv os mennesker. Jeg synes faktisk at bomærket er ret fint da de symboler det besidder er gode. Problemet for mit vedkomne er når bomærket skal fungere sammen med navnetrækket. Navnetræk Navnetrækket Baresso er en sammentrækning af barista og espresso. Baresso er skrevet i minuskler mens coffee er i majuskler. Typografien er Barmeno og det er en grotesk type. Den komplementere ikke bomærket særligt godt da den er for rund ift. flammernes spidsede kanter, og samtidig for kantet ift. kaffebønnen. Med Barmeno typografien har Baresso gået efter symbolværdien at de levere den gode runde kaffesmag. Som udgangspunkt ville jeg vælge en typografi der går bedre i spænd med bomærket. Farve Navnetrækket er skrevet med sort og som beskrevet er kaffebønnen hvid og flammerne er i rød. Jeg synes meget godt om farvevalget den sorte farve har et professionelt og simpelt look. Kontrasten mellem det hvide og røde er god da bønnen fremstår tydeligt. Den røde farve symbolisere varme og man kommer til at tænke på varm kaffe. Det er et farvevalg jeg har valgt at være inspireret af i mit eget design. 2.2 Analyse af website Set ift. designprincipperne burde der være en mere konsekvent brug af consistency, allignment, skillelinjer, lukkethed, Ockham s Razor, kontrast, brødkrummer/faneblad, flere billeder og Hick s Law. Følgende har jeg listet nogle af Baressos nuværende websites største fejl samt hvilke pricipper der kunne været brugt for at undgå disse. Consistency Det første man ligger mærke til på forsiden, er at der er alt for meget luft på højre side, mens al indeholdet er mast mod venstre side og sådan er det også på resten af websites sider. Forsidens komposition er anderledes ift. resten af websitet hvorfor den halter i consistency (Lidwell, William et al. 2003:46). Hovedmenu (horisontal), 1
undermenu (vertikal), bomærke (undtagen på forsiden), navnetræk og brødtekst står samme sted på hver side. Overskriften hopper tilgengæld lidt op og ned og på en af siderne (undersiden Gavekort under Sortiment) skifter den font størrelse. Forside til Baressos nuværende website Allignment Brødteksten har en fast forkant og den står det samme sted på alle sider, men længden har de ikke taget højde for, og det går ud over princippet om alignment (Lidwell, William et al. 2003:22). Hvis de havde valgt at designe siden efter et specifikt grid ville dette kunne været undgået. Good Continuation & Ockham s Razor Mere konsekvent brug af princippet om Good Continuation i Gestalt reglen kunne have hjulpet med at indikere hvad der høre sammen, og på den måde vise de forskellige elementers samhørighed ved at lade dem flugte på samme linje. Brødteksten og overskrifterne står højere oppe end undermenuens røde bjælke og dette skaber forvirring for øjene desuden er denne bjælke en smule ligegyldig og den kunne sagtens have været skåret væk (Lidwell, William et al. 2003:142), da den kun er der for at separere bomærket fra undermenuens links. Der bliver brugt skillelinjer mellem hovedmenuen og resten af siden og det er en fin detalje. Men de få skillelinjer der ellers er at finde på websitet er brugt på en unødvendig måde f.eks. er der en skillelinje mellem overskriften Sortiment og billedet af sortimentet. Kontrast De har brugt farvekontrast mellem hvad der er aktivt og inaktivt i hovedmenuen og det er en fin metode. Størrelsen af fonten er tilgengæld lige så stor som brødtekstens og den eneste kontrast mellem de to er at hovedmenuens skrift er fed. Her kunne en mere konsekvent brug af kontrast været en fordel (Pedersen, Kim 2002:13). Brødkrummer & faneblad Hvis man klikker på enten Coffee Master kalender eller Cup of Exellence i undermenuen under Links bliver man ført videre til en side hvor at linksne bliver skubbet op i hierarkiet og skifter til en blå farve. I hovedmenuen kan man ikke se om man er inde under en af hovedmenuerne da ingen er af dem er aktive. Denne skiftende af elementers opsætning og tilknytning til resten af siden er meget forvirrende. Dette kunne have været undgået hvis de havde fulgt pricippet om brødkrummer eller faneblade (også kendt som tabs) (Krug, Steve 2000:75-86). Undermenuen er skiftet til en blå farve og ingen af hovedmenuens punkter er aktive. Picture Superiority Siden er meget teksttung og et mere konsekvent brug af flere billeder kunne gøre det lettere for en at huske hvor man befinder sig på siden (Lidwell, William et al. 2003:152). Det virker lidt tilfældigt hvornår der skal være billeder på siderne og det skaber forvirring. Hick s Law I hovedmenuen er der for mange valgmuligheder og i undermenuerne er der endnu flere at vælge imellem. Det er rodet og det tager alt for lang tid at finde ud af, hvor man skal klikke for at finde det man leder efter (Lidwell, William et al. 2003:102). F.eks. er det ikke helt ligetil at finde kontaktinfo først skal man klikke på Om Baresso og derefter klikke på Administration i undermenuen for at finde frem til dette. Desuden kan kontaktinfo på hovedkontoret også findes under Presserum. 2
3. VALG AF MEDIER TIL DEN VISUELLE DEL 3.1 Kampagne Jeg har valgt at lave en traditionel kampagne og kaldt den Du fortjener en gratis kaffe!. Jeg har været inspireret af idéen om at Baresso vil give en julegave til det danske kaffedrikkende folk. Budskabet skal være at Baresso ser danskerne som nogle der fortjener gode ting i livet; såsom gratis kaffe. Webbanner og A3 plakat Webbanneret og plakaten har samme fundament for hvordan folk kan få en gratis kaffe. De skal blot svare rigtigt på spørgsmålet Hvem stiftede Baresso? før de bestiller og de får serveret en gratis kop kaffe. Baressos argument for dette kunne være at stifteren Kenneth Luciani gerne vil slå sit navn fast hos danskerne, som en af Danmarks store iværksættere, gennem en kampagne hvor han giver dem en julegave. Webbanneret har jeg placeret på www.aok.dk hvor segmentet er kulturbevidste københavnere. Som med gratisaviserne har AOK også et bredt segment, og på den måde kan Baresso komme ud med deres budskab til mange mennesker. Webbanneret fungere på den måde at når folk klikker på det, bliver de ført direkte ind på siden Om Baresso hvor at stifterens navn står skrevet som noget af det første. Jeg har valgt at lave to versioner af webbanneret: en statisk samt en dynamisk med en mouse-over-effekt. 4. BOMÆRKE, NAVNETRÆK & LOGO Ved udformningen af den visuelle identitet har jeg brugt 10-punkts modellen (Wisler-Poulsen, Ian 2005:3-4) med specielt vægt på konkretisering og argumentation. Jeg har desuden taget højde for de symbolværdier det nuværende bomærke og navnetræk besidder. Ligesom det nuværende bomærke og navnetræk ville jeg også gerne ramme et visuelt look der afspejler varme og den runde kaffesmag. For at opnå rundheden valgte jeg at tegne et bomærke med runde kanter. Toppen af A3 plakaten A3 plakaten har jeg tænkt mig at skulle hænge inde på forskellige universiteter. Segmentet er kaffedrikkende studerende der er på SU og som ikke vil sige nej til en gratis kaffe. Avisannonce Avisannoncen har jeg valgt at skulle være i gratis aviserne (i dette tilfælde i Metroexpress) da disse bliver læst af et bredt segment. På den måde kommer Baresso ud med deres budskab til mange mennesker. Det eneste folk skal gøre for at få en gratis kop kaffe er at medbringe annoncen, som er en lap man kan pille af, på en af Baressos caféer og aflevere den ved disken. 3.2 Forklæde og kop For at understøtte redesignets visuelle identitet har jeg valgt to medier der kan ses når man træder ind på en af Baressos mange caféer. Det er efter min mening en naturlig del af et redesign at det også er implementeret på Baressos forklæde og kopper. Min idé er at Baressos medarbejdere skal bære forklædet med det nye logo og koppen med bomærket skal bruges til gæsterne - bomærket skal være på alle af Baressos kopper. Første skitser. Overvejelser om brug af espressomaskine som bomærke - idéen blev skrottet da der er for mange detaljer. Førte dog idéen om at bruge maskinen videre som det gennemgående visuelle element. Udover farven (som jeg kommer nærmere ind på i næste kapitel) valgte jeg at placere damp over koppen for at symbolisere varme dette element har spidse ender der matcher underkoppen og runde former der matcher koppen. De organiske bueninger giver den dynamik og fylde. 3
Hanken har jeg valgt at forme som et B i majuskler som i for-bogstavet i Baresso. Idéen om en alternativ hank er stærkt inspireret af et krus hvor hanken er formet som et knojern. Fordi jeg har taget valget om at bruge forbogstavet som hank, var det naturligt at kunne implementere navnetrækket i bomærket, så det blev et logo. Min idé er at den visuelle identitet kan bruges på to måder: som bomærke uden navnetræk men også som et logo hvor navnetrækket er implementeret. bomærket. Udfra denne test mener jeg at jeg har ramt de værdier jeg søgte efter. Desuden fik jeg bekræftet at bomærket kan bruges uden resten af navnetrækket. To af dem syntes endda at det kunne ligne et bomærke for Baresso pga. farven og hankens udformning. 5. FARVE Jeg har valgt en rød bordeaux farve der er gennemgående i alle mine løsninger. Farven minder om den røde farve som Baresso bruger nu. Jeg synes godt om den mørkerøde farve da den symbolisere varme. Den har et brunligt skær der symbolisere jordfarven og ved hjælp af det rammer jeg værdien jordnær (Cooper, J.C. 1999:99). Den gennemgående røde farve i alle mine løsninger. C: 33 M: 100 Y: 70 K: 42 R: 116 G: 14 B: 44 Kaffekoppen Punch er taget fra siden www.karichdesign.com Udover varme og rundhed ville jeg også lave en visuel identitet der sagde noget om Baressos værdier: professionalisme og Time Out. Jeg har argumenterede for dette via værdier som: dagligdag, jordnær, hygge, simplicitet, kvalitet og varme. For at se om jeg havde ramt ovenstående værdier brugte jeg spørgsmålene i punkt 9 i 10-punkts modellen (Wisler- Poulsen, Ian 2005:5) til en mindre test ved 7 testpersoner. Jeg viste dem kun bomærket: de kunne alle se at det var en kop med damp og at hanken var formet som et B i majuskler. Hygge, varme, et sted for alle, duft, kvalitet og moderne med et klassisk udtryk var ord de satte på Testsvar fra testpersonerne Bomærke/logo Jeg har valgt at lave to versioner af bomærket og logoet: en i den mørkerøde farve og en i hvid. Den røde vil primært blive brugt når den skal printes på en hvid baggrund såsom på; kopper, skilte, officielle papirer etc. Den hvide skal bruges i alle sammenhæng hvor at baggrundsfarven er i den mørkerøde farve. Ifølge J.C Cooper betyder brugen af rød og hvid; død men det er noget som jeg ikke kan følge og har derfor ikke ladet dette forstyrre mit valg. 4
Website På websitet er den mørkerøde farve brugt i headeren, footeren, i hovedmenuens aktive punkter, samt på links i brødteksten og i den fast implementeret boks i højre side. Ved at bruge denne farve i headeren tiltrækker den brugerens opmærksomhed og det hvide logo fremstår meget tydeligt og indikere brugeren at han er inde på Baressos website. Jeg har valgt den samme farve til linksne og de aktive punkter i hovedmenuen for at skabe noget samhørighed mellem hvad der er aktivt og hvad der kan aktiveres. Jeg har brugt hvid som baggrundfarve til den store boks. Det er det eneste område på siden der skifter indhold alt efter hvilket menupunkt man trykker på. Der er brugt en lysegrå farve til den lille boks i højre side med en oppacity på 70%. Udover scrollbaren mellem de to bokse, indikere den lysegrå farve at den lille boks ikke høre med til den hvide boks på en facon som ikke forstyrre det samlede billede (Lidwell, William et al. 2003:38). Jeg har brugt sort til al brødtekst samt på de inaktive punkter i hovedmenuen. I headeren har jeg skrevet English Login med hvidt da det står i kontrast med det sorte hjørne af billedet. Footeren lukker siden af forneden med den samme farve som i headeren. Det giver noget similaritet (Lidwell, William et al. 2003:184) og en klarhed mellem hvad der er toppen og hvad der er bunden på siden. For endvidere at bygge på similariteten er der blevet brugt hvid til teksten ligesom at logoet er hvid i headeren. 6. BILLEDER På websitet har jeg brugt billeder efter princippet at når visuelle og verbale virkemidler spiller sammen forstår man ting bedre (Munk, Ole & Ribegård, Maj 1999:17). Ved hver tekst er der et suplerende billede der understøtter det der står skrevet, og dette gør det lettere for brugeren at huske det vigtigste i teksten (Lidwell, William et al. 2003:152). Dette er den grundlæggende tanke med brug af billeder på websitet. Alle brugte billeder er fundet via Google.com. Billedet af espressomaskinen som er et gennemgående element i både kampagnen og på websitet. Header Det første man ser når man åbner websitet er logoet og derefter motivet i headeren. Derfor har jeg brugt et billede af en espressomaskine da denne er i direkte forbindelse til hvordan kaffen bliver lavet på Baresso. Det originale billede er 2048 x 1536 pixels og jeg har beskåret det, så det vigtigteste i billedet er tydeliggjort. Man kan se det er en espressomaskine ved mælkeskummeren, espresso-skeen og de store runde knapper til at styre trykket med. Udover beskæringen har jeg leget med noget gradient og justeret farverne så det passer med den mørkerøde farve i headeren. Dette billede er desuden det visuelle element der er gennemgående i den traditionelle kampagne. Forside På forsiden er der tre synlige billeder. Det første er et fast element på forsiden, og det er lækkert motiv af en ske i en stor bunke af kaffebønner. Valget er faldet på dette for at brugeren ikke er i tvivl om at websitet har med kvalitets kaffe at gøre. De to næste billeder er supplerende ift. nyhederne. Jeg har beskåret det af rundetårn så der er lidt himmel for at give fornemmelsen af at tårnet er højt. I beskæringen fylder tårnet mest, og det er for at vise at det er en stor bygning. På billedet af Fairtrade kan man lige se toppen af deres bomærke samt ordene guarantees a better deal. Sortiment På det første motiv er der en kop fyldt med kaffebønner. Jeg kunne have valgt et motiv med et sortiment af forskellige drikke, men valgte i stedet for dette, da jeg mener at Baressos ekspertise ligger i at lave god kaffe. Jeg har beskåret det så at rundingen på koppen lige over hanken er i centrum på den måde er både bønner og kop i fokus. Det næste billede er af en caffè latte, og beskæringen er lagt så man kun kan fornemme glasset, og fokus ligger på toppen af kaffen og skummen. Dette bevidste valg er taget da denne form for latte-kunst associeres med latten. Desuden er beskæringens vinkel næsten den samme som det øverste motiv og det skaber similaritet. På det tredje billede kan man lige akkurat se den berømte skum på cappuccinoen. 5
Om Baresso Det første billede på denne side er af en Baresso café. Tanken bag er at give brugeren et indtryk af hvordan en af Baressos caféer ser ud med logo og bomærke på facaden og skiltene. På næste billede ser man stifteren Kenneth Luciani siddende på en Baresso café med et Baresso krus i hånden. Jeg har beskåret det så at Kenneth er skubbet ud mod højre, for at skabe fokus på caféen og dens stemning med afslappede kaffedrikkende gæster. Det sidste motiv er en hyggelig café fra Italien, og beskæringen gør at man akkurat lige kan fornemme de flotte grønne blade, der ligger sig som et tæppe over lamperne og bygningen. Baggrund Jeg har valgt at bruge et billede af en hessian sæk som baggrund. Det er et oplagt valg da det er den slags sække der bruges til at transportere kaffebønner med. Valget er desuden faldet på netop dette billede pga. den lysebrune farve som ikke forstyrre resten af sidens elementer. Det har meget tekstur men med subtile detaljer der giver dynamik og liv til websitet. Farven minder lidt om farven på skummen på en latte, og det giver noget samhørighed med at websitet har med en kaffebar at gøre. 7. TYPOGRAFI Navnetræk Til navnetrækket har jeg valgt antikva typografien American Typewriter. Her er jeg gået udenom konventionerne om at display-skrift helst skal være i grotesk (Wisler- Poulsen, Ian 2007:44). Grunden til dette er jeg ville have en type der har runde former og som kan implementeres i bomærket på en naturlig måde. Garnituren er fed og det for at give den mere rundhed. Coffee er derimod i normal og det er for at Baresso får mere fokus. Hanken er som førnævnt et B i majuskler, og jeg har modificeret det ved at trække i det, så det passer til koppens udformning. Ved brug af denne typografi vil jeg signalere en jordnærhed og kvalitet. aresso coffee Det redesignet logo med navnetrækket i American Typewriter Website På websitet har jeg udelukkende brugt Verdana da denne er udviklet til skærmbrug og er derfor en god læsetekst (Wisler-Poulsen, Ian 2007:51). Jeg har brugt den i størrelse 16 i menuen samt i overskrifterne. Ved sidstnævnte har jeg brugt en fed garniture. I underoverskrifterne har jeg brugt en størrelse 12 i fed. I brødteksten har jeg brugt størrelse 10 med en skydning på 14 punkt. Jeg har anset indholdet i den grå boks som værende konsultativ tekst og har derfor givet den en mindre størrelse end brødteksten (Wisler-Poulsen, Ian 2007:40) den er i størrelse 9 med en skydning på 11 punkt. Overskrifterne i den grå boks har jeg gjort fed men har ikke ændret på størrelsen da jeg fandt det unødvendigt. Teksten i footeren er også konsultativ og har derfor også en størrelse på 9. I headeren er Søg og English Login i størrelse 12. Kampagne I kampagnen har jeg brugt American Typewriter i fed som display-skrift i sloganet Du fortjener en gratis kaffe! - i avisannoncen er den i størrelse 24, på A3 plakaten er den i størrelse 50, i den dynamiske webbanner er størrelsen 8 og i den statiske er størrelsen 4.5. Grunden til at jeg har brugt American Typewriter er for at der opstår en samhørighed mellem sloganet og navnetrækket. Da det er en god læseskrift har jeg brugt Arial som læseteksten i avisannoncen i størrelsen 10 med en skydning på 12. Kontaktinfoen er også i Arial og i størrelse 14. Læseteksten på A3 plakaten er i størrelse 28 i Arial med en skydning på 34 og resten er i størrelse 18. Jeg har bøjet Pssst... sætningen så den passer bueningen på koppen. Pssst... sætningen på A3 plakaten 6
8. DESIGNPRINCIPPER & KOMPOSITION Logo I logoet har jeg sørget for at der er en alignment så at Coffee starter lige under det første S i Baresso og slutter under O et. Coffee står under Baresso da det virker mest naturligt. på hver side - men scrollbaren kan også argumenteres for at være en skillelinje, da den adskiller den hvide fra den grå boks. Første forsøg på forside Logo med komposition Første skitse af forsiden Website Svaret på følgende spørgsmål har været fundamentet for mit design: Hvad leder man efter når man er inde på en cafés hjemmeside? Mit svar var: hvad sker der af nye ting, hvad kan man købe og hvad er prisen, hvem står bag caféen, hvilken slags kaffe bruger de og hvor ligger den. Da jeg påbegyndte designprocessen lavede jeg nogle håndtegnet skitser som jeg nogenlunde har forholdt mig til hele vejen til det færdige resultatet. Jeg har baseret websitet på et 960 pixels grid med 12 spalter og har derfor kunne følge grundprincippet om alignment. Jeg har taget højde for lukkethed, tæthed og brugen af luft til at adskille elementer, samt vise hvilke elementer der hører sammen. For at opnå sidsnævnte har jeg desuden gjort brug af farvekontrast. Der er en skillelinje på websitet og det er den efter det øverste billede Andet forsøg på forside Anden skitse af forsiden 7
Min aflevering bærer en smule præg af at det er et skoleprojekt. For hvis det var en virkelig opgave ville jeg have haft et samarbjde med en rigtig kunde, og det have gjort arbejdet mere dynamisk. Udover det ville jeg have gjort brug af flere brugerundersøgelser under udviklingen af designet. 10. BIBLIOGRAFI Cooper, J.C. Symbolleksikon, Poltikens Forlag, 1999 Tredje forsøg på forside Opsætningen af siden er enkel med kun et element (hvide boks) hvor at indeholdet skifter. Dette sker alt efter hvilket menupunkt der trykkes på, og for at læse indeholdet på siden scroller man nedad. Denne idé om færre klik og mere scroll er inspireret af et fokusgruppe interview jeg lavede under fremstillingen af et website til Café Din Nye Ven. Denne ensartethed på siden skaber konsistens og det gør det let for brugeren at navigere rundt. For at gøre det let for brugeren, at se hvor han befinder sig, har jeg gjort brug af faneblade til hovedmenuen. Hovedmenuen har jeg designet efter princippet om Hick s Law og givet den fem punkter det er let og overskueligt og man bruger ingen tid på at finde det hovedpunkt man skal bruge. Avisannonce, webbanner & A3 Plakat Min vigtigteste tanke bag designprincipperne i kampagnen var at der skulle være en konsistens mellem alle tre medier og websitet. Derfor har jeg brugt den samme røde farve og det samme billede af espressomaskinen gennem alle løsninger. Færdige resultat af forside med 960 pixels Grid 9. REFLEKSION Det var vigtigt for mig at gøre den visuelle identitet færdig før at jeg gik i gang med at designe websitet og kampagnen. Bomærket/logoet var nemlig et fundament for resten af designet. Da jeg skulle til i gang med designforløbet tog jeg højde for de fire grundelementer og jeg brugte også 10-punkts modellen, både som en to-do liste og især som en form for guide. Modellen gav mig noget at forholde mig til og det var en stor hjælp. For at give mit webdesign et overskueligt og enkelt look, var det vigtigt for mig at holde mig indenfor konventionerne. Derfor prøvede jeg at følge designprincipperne så godt som jeg kunne. Jeg har arbejdet alene men til tider siddet med andre fra holdet. Det har været både inspirerrende og hjælpsom at have nogle sparringspartnere, der kunne give mig gode råd og se på mit design med andre øjne. Jeg har desuden også vist mine løsninger til folk, som ikke har noget med grafisk design at gøre, og det har også været en stor hjælp. Krug, Steve Don t Make Me Think, New Riders, 2000 Lidwell, William; Holden, Kristina; Butler, Jill Universal Principles of Design, Rockport Publishers, 2003 Munk, Ole; Ribegård, Maj Sæt billeder på, Grafisk Litteratur, 1999 Pedersen, Kim Stram op på dine websider, Grafisk Litteratur, 2002 Wisler-Poulsen, Ian 10-punkts modellen; Noter til udvikling af logo-design, Grafisk Litteratur, 2005 Wisler-Poulsen, Ian Layout i opgaven; Retningslinjer for brugervenligt design i skriftlige opgaver en guide til visuel kommunikation, Forlaget Samfundslitteratur, 2005 11. BILAG (CD-ROM) Findes på indersiden af bagsiden. 8