Malene Møller (070585-2480) malm@itu.dk Grundlæggende grafisk design E2010 V. Ian Wisler-Poulsen IT-Universitetet

Relaterede dokumenter
Malene Møller ( ) Grundlæggende grafisk design E2010 V. Ian Wisler-Poulsen IT-Universitetet

(Første del af rapporten til og med afsnittet markedet er lavet som en gruppeproces. Denne del er udviklet i samarbejde med Jacob Using)

Grundforløbsprøve Projektbeskrivelse

aresso coffee Redesign af visuel identitet & website for Baresso Skriftlig aflevering

Portfolioudvikling. Line la Fontaine. Multimediedesigner

COPENHAGEN. Opgaven. Kunden. Målgruppe. Layout 1. GRAFISK DESIGN // METTE-MARIE RANDSKOV

GRAFISK DESIGN Logo - inderst inde

Produkt. Index side GRAFISK DESIGN

Selv om websites er yderst forskellige i deres fremtræden, så kan de stort set alle sammen passes ind i den skabelon som er illustreret herunder:

Designmanual. Romalt Idrætsforening 1981

CHAMP. Emballage lavet til det fiktive undertøjsfirma Inderst Inde. Maria Jacobsen, 12gf32med8b, Aarhus TECH

Gruppe 9 Visuel Interface Design, 27/09/2011

DANMARKS DOMSTOLE DESIGNGUIDE

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

Grafisk design. sundfertilitet.dk

8. Webdesign. Grundlæggende Grafisk design Stefan Grage & Klaus Bjerager Tirsdag 5. april

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen.

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

Portfolie Redesign. Forord. Det tekniske. Tema ide. Css. opløsning.

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, Der refereres fra nu af blot

Grafisk design. Ide. Designprocess. Målgruppe

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

GRAFISK DESIGN G H1 H2 H3 HOVEDFORLØB 1 AARHUS TECH 2013 H1 SIDE 1 / 11

WorkFlow. Svendeprøve Emil Momsen. BeskrivelseN ****** BeskrivelseN ******

NY IDENTITET TIL SCHWARZ

UDFORDRINGEN. modul 4 - udfordringen. Opgaven I vores sidste modul lød opgaven for vores gruppe på at lave en ja-kampagne

Manual for Synkron hjemmesider

grafisk design grafisk sign Jeppe Nedergaard

Projekt 1 Re-design af Odense Bunkermuseum

Grafisk workflow. bl.udbudsnet.dk

Portfolio redesign. Kia Dahlen! 1. semester eksamen! MUL-A 2013! !!!

GRAFISK DESIGN GRAFISK PRODUKTION & WORKFLOW

Grafisk Design. Dansk Center For Organdonation

GRUPPE 5 Line - Nanna - Thea - Sarah

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.

3. semester F&A, 2014 Jump Rope Production

Case:

Grafisk design AnnA SkAk Mediegr Afiker

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

Udover denne simple tidsplan har jeg også lavet et GANTT-kort for at vise den reelle tid jeg har brugt på hver opgave.

ErhvervsAkademi Sjælland. Visuel identitet og designretningslinjer

Grafisk design. Filmblad til tablet

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S.

Analyse af website: cinnobershop.dk

DESIGNMANUAL AARHUS STUDENTERNES SVØMMEKLUB

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation

Grafisk design 5 STK. ØL / DRINKS / VAND. Opgaven. Farver. Målgruppe. Logo. Stil og stemning Familie, hygge og samvær.

Niks Frost & Line Søs Hold 32B

Portfolio Redesign Kamilla Klein 1. Semester eksamen

MONIQUE BOOTS-NIELSEN / GRAFIKER

Giv tid Alle former for volontør arbejde penge indsamling, rejser mm. Søg Søg felt.

DEL 2: DET SKRIFTLIGE

Grafisk design. Webdesign til barbershop

de fire grundelementer - samlet mærke baresso c offee

1 Robbins, Jennifer N.: Learning Web Design, s. 41

1. Semester afsluttende Projekt Charlotte Bruhn MUL A December Januar 2015

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

DesignGuide. Gruppe B13. Olga Batrakova Nadezda Christersen Svetlana Koshman.

10-trins raket til logo-design

Lagkagehuset VISUEL AFLEVERING. - af Christian Olin

Vi glæder os til at arbejde sammen med jer! De bedste hilsner. Sebastian Hansen og Bjarke Nielsen HeltSimpelt.dk

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Rapport for Redesign af virksomheden Feelgood Bakery

Grafik Design...2 Opgave Kunden Min opgave Nuværende Design...4 Overvejelser Målgruppe...6 Købskriterier Design Parametre...8 Tekst Illustrationer

Grafisk Design 70% Skitser

DESIGN MANUAL. Designmanualen beskriver grundelementerne i Who Brands profil, og den giver eksempler og retningslinjer for deres anvendelse.

Michella+Serritzlew+Jacobsen+

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner.

Redaktørvejledning for Skriv en artikel

E-zine Online magazine

M.OE. Designmanual December udgave

Præsentationsportfolio for Hovedforløb 1. BEST WESTERN - BEST MEETING folder

KT OR LOW PRODUKTION // WORKFLOW

FIBREWATER DESIGN MANUAL NOVEMBER FIBREWATER Designmanual

Analyse af Sloggi. Reklamen er masseproduceret, og det vil sige, at reklamen er fremstillet mange gange, samt solgt mange gange.

GRA DESIGN. HEARTS & MINDS

GRAFISK DESIGN. webdesign af pl.dk

REDESIGN AF PORTFOLIO 16. jan. 2015

kollegiekokkenet.tmpdesign.dk Side 1

Opgaven. Væsentlighed. Problemstillinger. Browserkompabilitet. Layout. Kvalitetsvurdering. Format. Processer. Komposition og modulopbygning

Portfolie Redesign. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar Jens Jákup E.

Grafisk Design. fra idé til visuelt udtryk Benett

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

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

GRAFISK DESIGN Emballagedesign. Færdige produkt

Reklame af Air Fresher.

Opgaven. Brugervenlighed. Designparametre. Følgende krav var : Research. Målgruppe. Konklusion. sitet ikke bliver for mørkt.

Oliver Marco van Komen Afsluttende opgave Kost ved slidgigt. Case 2. Personlig fysisk hjælp

Forstå brugbarheden af Google Analytics på 10 minutter

det færdige resultat

GRAFISK DESIGN CAMILLA VINTER

GRAFIK & BILLEDBEHANDLING

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

Dreamtours. Projekt 3 Visuel identitet og kommuikation

Transkript:

Malene Møller (070585-2480) malm@itu.dk Grundlæggende grafisk design E2010 V. Ian Wisler-Poulsen IT-Universitetet

Denne rapport tager udgangspunkt i mine refleksioner over udviklingen af en ny identitet, et website samt en traditionel kampagne til Baresso Coffee. I denne rapport vil I derfor kunne følge med i min proces fra de første skitser til det færdige produkt. Baresso har et meget stærkt logo. Man genkender det hurtigt, og elementer fra logoet går igen på alle tryksager, på Baressos to gokopper og ikke mindst i Baressos mange kaffebarer. Baresso- flammen er tilnærmelsesvis blevet et 5. element i den visuelle identitet, fordi den har en stor grad af genkendelighed også selvom det kun er et lille udsnit af den, der bliver brugt. Flammen skal symbolisere ristningen af kaffebønnen og kaffebrygningen, men samtidig symboliserer den også varmen og energien, man får fra kaffen. Den røde farve symboliserer de modne kaffebær. Baresso bruger typografien Barmeno på grund af dens runde og bløde kanter, der skal symbolisere den afrundede kaffe smag. Figur 1. Baressos nuværende logo. Vi holdt et møde med Anita Grubbe Nørgaard, der er marketingchef for Baresso, da vi lige havde fået stillet opgaven. Ved dette møde lagde hun især vægt på de værdier, Baresso skal kommunikere over for kunderne: God kaffe, dygtige baristaer, hyggelig stemning og effektivitet. Jeg synes godt, man kan anfægte Baressos nuværende logos evne til at fortælle noget om god kaffe. Flammerne kan nemlig også symbolisere brændte kaffebønner, hvilket nærmere er noget, man for binder med dårlig kaffe. Flammerne kan yderligere virke lidt hårde og maskuline, hvilket står i kontrast til Baressos målgruppe, som består af kvinder mellem 20-45 år og Baressos vision om, at Baresso skal være et brand, folk forbinder med hygge og et dygtigt personale. Jeg bestemte mig derfor i udformningen af mit Baresso-logo, at lægge vægt på værdiordet kvalitet som garant for den gode kaffe. En måde, man kan kommunikere kvalitet på er bl.a. ved at vise processen, som kaffen har været i gennem fra høst til kaffekop i logoet. Baresso gør meget ud af, at fortælle denne historie på de mange billeder og plakater, der hænger rundt omkring i kaffebarerne. Jeg vil i stedet inkorporere historien om den gode kaffe i Baressos logo, så kunderne, hver gang de ser Baressos logo, vil blive mindet om denne. De værdiord jeg har valgt at arbejde med er, udover kvalitet, dygtighed, hygge, effektivitet og omsorg. Omsorg valgte jeg, fordi Baresso støtter de steder, hvor deres kaffe kommer fra bl.a. gennem organisationen Coffee Kids. Figur 2. Flammen i Baressos logo har visse ligheder med Flameboy, der er et af World Industries skatemærker. Denne lighed er med til, at man kan associere Baressoflammen med noget lidt hårdere og knapt så feminint. Baressos website er, i modsætning til Baressos nuværende visuelle identitet, ikke særligt stærkt. Det er slet ikke den samme følelse, man får, når man kommer ind på Baressos hjemmeside, som når man træder ind på en af kaffebarerne. Websitet har et old school og uopdateret look og bærer præg af, at det er noget, der er blevet nedprioriteret fra Baressos side. Dette afspejles bl.a. i billedbrugen på websitet, hvor det ofte er tryksager, der bliver genbrugt og ofte i dårlig opløsning. Den dårlige opløsning og billedernes størrelser gør, at det ofte er helt umuligt at læse, hvad der står på billederne. Derudover bryder websitet Figur 3. Baresso har mange informationer om deres kaffe hængende i kaffebarene. 1

især med design principper som consistency og alignment, der handler om ensartethed samt, at placeringen af elementer bør følge nogle fælles retnings linjer. Det er placeringen af billederne på websitet især et bevis på. Der synes nemlig ikke at være nogen fælles retningslinjer for billedernes placering og størrelse. På alle sider, undtagen forsiden, er flammen i Baressos logo placeret under headeren, hvilket bevirker, at indholdet hopper. Dertil begynder teksten på websitets centrale felt ikke det samme sted på alle siderne. Det gør, at indholdet hopper rundt, hvilket er et brud på alignment og consistency og er med til at give sitet et usammen hængende og uprofessionelt udtryk. Der synes heller ikke at være nogle fælles retnings linjer for brugen af typografi på websitet. Dette hænger sammen med, at der i høj grad bruges tryksager som billeder. De mange forskellige typografier, der er brugt på websitet er også et brud på consistency. Farvemæssigt er der consitency mellem Baressos visuelle identitet og websitet, da det er Baressos velkendte mørkerøde farve, der går igen på websitet. De andre farver, der er brugt på Baresso. dk er illustreret i figur 4. Baressos website er venstrestillet og ikke centreret, som de fleste andre hjemmesider, og det gør, at sitet kompositionsmæssigt vælter. Der er anvendt to forskellige grid på websitet et til forsiden og et til alle undersider. Griddet, der er anvendt på undersiderne er for simpelt, da der ikke er taget højde for, hvor ting er placeret centralt på siden. Hvilket er en af de væsentlige årsager til den manglende ensartede placering af bl.a. billeder. I mit arbejde med websitet vil jeg først og fremmest fokusere på at videreføre Baressos visuelle identitet til websitet, så oplevelsen af Baresso i gadebilledet bliver forenet med oplevelsen af Baresso på nettet. Dernæst vil jeg skabe et mere ensartet udtryk bl.a. via billedbrugen, typografien og griddet. Figur 4. Brugen af farver på Baressos website. Figur 5. På Baressos website er kompositionen skæv, fordi sitet ikke er centreret. Grid, fortsat I forbindelse med redesignet af Baressos identitet har jeg også kigget på andre aktører i kaffekæde-branchen og på, hvordan de præsenterer sig selv. De andre aktører, jeg har kigget på er; Kong Kaffe, Amokka, Caffé Ritazza, Wayne s Coffee, Riccos, Starbucks Coffee, Robert s Coffee, 7/11 og McDonnal s. Fælles for kaffekæder som dem er, at farvebrugen er meget simpel, og en del af dem bruger mørkebrune-, røde- eller grønne farvenuancer. Alle farver, der er varme og går fint i tråd med varm og god kaffe. På baggrund af dette, besluttede jeg mig for, at jeg i Baressos nye identitet også ville bruge varme brune farver (café latte og espressofarver). Men med en stærk kontrastfarve, som er med til at skabe blikfang. Figur 6. Her ses det, hvordan der ikke er noget grid for sidens centrale felt. Jeg har valgt at lave en traditionel kampagne for Baresso, bestående af: Annonce til avis (240 spalte-millimeter) i formatet 2 spalter i bredden og 120 mm i højden. Statisk webbanner (300 x 250 px). Figur 7. Starbucks logo og website er holdt i nogle meget enkle farver; grøn, sort, hvid og lysegrå. Derudover har jeg valgt at lave en s-togsstreamer. S-togsstreameren understøtter nemlig budskabet i reklamen at man kan bestille sin 2

coffee to go, mens man er på farten. Mange henter kaffe på vej på arbejde om morgnen og ved netop at lave en s-togsstreamer, er det sandsynligt, at man vil komme i kontakt med rigtig mange af de potentielle kunder de travle morgenmennesker, der tager s-toget på arbejde. Samme i ntention er gældende for avisannoncen, der skal bringes i gratis aviser, som folk læser i toget. Det statiske webbanner linker direkte til gratis download af Baressos applikation det er nemmere end at skulle klikke sig ind på hjemmesiden eller sende en sms, og derfor kunne der være mange potentielle kunder her. Websitet er optimeret til at blive vist på skærme med opløsning på 1280 x 800, men da selve sitet er 990 pixels bredt kan det også vises på skærme med opløsning på 1024 x 768. Websitet skal desuden være optimeret til de mest brugte browsere; Internet Explorer, Firefox, Chrome, Safari og Opera. Jeg har valgt at holde Baressos logo i to farver en mørk brun og en lidt lysere brun de to midterste farver i min farvepalette illustreret i figur 8. Men logoet fungerer også godt i sort på farvet baggrund eller i negativ på en mørk baggrund. Som beskrevet tidligere er de brune farver inspireret af kaffens farver. Den mørkebrune farve skal symbolisere espresso, der er essensen i alle Baressos kaffer, mens den lysere brune skal symbolisere caffé latten, som er den mest solgte kaffe-drik hos Baresso. Farverne er varme og symboliserer derfor også den varme og gode kaffe. Men brun symboliserer, ifølge Politikens symbolleksikon, også jord. Dette passer godt ind i den måde, jeg fra starten har arbejdet med udformningen af logoet, hvor jeg har taget udgangspunkt i værdiordet kvalitet og den proces, kaffen har været igennem fra høst til kop. De brune farver kan i denne henseende også symbolisere kaffeplantagen og jorden, hvor kaffe bønnerne bliver dyrket. Den stærke grønne farve i min farvepalette bliver ikke brugt i Baressos logo, men som kontrast til de brune farver på bl.a. to go-kopperne, som vist i figur 9. Grøn symboliserer ifølge Politikens symbolleksikon forår, gendannelse, glæde, tillid, natur, velstand og fred. Den grønne farve under støtter dermed den brune farve og associationerne til kaffetræets blade og den natur, hvor kaffen bliver dyrket. Figur 8. Den anvendte farvepalette i den visuelle identitet. Samtidig fungerer den grønne godt som kontrast til de mørke og varme, brune nuancer og er med til at skabe blikfang. Baresso- kopperne er gratis reklame, når folk tager dem med sig rundt i byen. Derfor er det vigtigt, at kopperne er noget, man lægger mærke til. I min analyse af markedet, fandt jeg ud af, at når de andre aktører bruger grøn, er det i en mørk nuance og derfor vil disse pang -grønne kopper skille sig ud, når folk går rundt med dem. Den sidste farve i farvepalletten er ikke en egentlig farve, men noget pap-tekstur, som er brugt i topnavigationen på websitet. Her refererer det til den varmebeskyttende holder, der sidder på to go-koppen. Jeg har valgt at bruge pap-tekstur på mange ting i den visuelle identitet, fordi det symboliserer noget med genbrug og omtanke for naturen (og dermed også for kaffen). Man kan sige, at brugen af pap-teksturen er en sidste understregning af den proces, kaffen har været igennem. Figur 9. Baresso to go-kop. 3

Billederne er et vigtigt element i webdesignet og i de traditionelle kampagner. På websitet er de fleste billeder informative, da de bliver brugt til at kategorisere en vare eller vise et specifikt produkt. Størstedelen af disse billeder er holdt i samme stil med grå baggrund, mens de billeder, der ikke har grå baggrund er holdt i en farvekombination, der matcher farverne i identiteten. Det er vigtigt, at der er en baggrund på alle billeder, så de ikke flyder ud i den hvide baggrund. På denne måde sikres det, at lukketheden opretholdes, så overskrift og billede tydeligt fremstår som hørende sammen. Det store billede på forsiden er modsat de andre mindre billeder på websitet er stemningsbillede. Jeg har valgt at placere et stemningsbilledet der, for at give brugerne et indtryk af, hvor hyggeligt det kan være på Baresso. Samtidig er det et billede, hvor der er tekst indover, og derfor er det vigtigt, at der ikke er for mange informationer på billedet. Billederne i den traditionelle kampagne er beskåret, så man kan se, hvad der sker i interfacet. Jeg har valgt først og fremmest at fokusere på at vise applikationen, da det jo er den vare, jeg prøver at sælge i kampagnen. Webbanneret er kun 300 x 250 pixels, og derfor var det en stor udfordring af beskære billedet. Hvis hele hånden skulle vises kunne man ikke se interfacet og omvendt. Derfor var jeg nødt til at vælge, og jeg valgte at fokusere på skærmen. Figur 10. Mange af billederne på websitet er informative og viser en specifik vare i Baressos online shop. BESTIL KAFFE FIND I navnetrækket har jeg valgt at bruge fonten Fago, som illustreret i figur 12. Fago er en forholdsvis ny skrift designet af tyskeren Ole Shäfer. Fonten var nem at arbejde med, fordi den er forholdsvis smal. Dertil har den et karakteristisk og moderne udtryk, der fungerer godt i kontrast til de bløde former og detaljer i bomærket. Men fonten er frem for alt meget tydelig samtidig med, at den ikke er for kantet og dermed i for stor kontrast til bomærket. Fago anvendes til overskrifter, underrubrikker og underoverskrifter på alle Baressos tryksager. Den anden typografi, jeg har brugt i bomærket, er fonten DIN en tysk font, der er blevet brugt af Deutsches Institut für Normung siden 1936. Jeg har anvendt fonten til det mindre prominente Coffe i Baressos navne træk. Fonten fungerer godt her på grund af dens gode læsbarhed og tynde streger. DIN skal derfor også anvendes til brødtekst på alle tryksager. DIN har også en god læsbarhed på skærmen, og derfor er den brugt til større overskrifter på websitet. På websitet har jeg anvendt den websikrede font Helvetica til brødtekst, eftersom Helvetica understøttes i mange browsere. www.baresso.dk Figur 11. Billedet på webbanneret er beskåret, så man kan se interfacet på telefonen. Figur 12. Fago er en af de anvendte fonte i navne trækket. DIN-Regular Figur 13. DIN er utrolig læsbar og egner sig godt til tekst i mindre størrelser. 4

I udformningen af det samlede mærke for Baresso har jeg, som tidligere beskrevet, fokuseret på, hvordan man kan tilføre Baresso-brandet kvalitet ved at vise, hvordan kaffen er blevet til. I starten af min skitseproces var jeg meget inspireret af kaffekværnen som udtryk for bearbejdningen af kaffebønnerne. Derefter valgte jeg at kigge på barista-blade som udtryk for Baressos dygtige baristaer, der tegner latte art i kaffen. Figur 14. Skitser af forskellige forslag til logo, opstillet i den rækkefølge, de er tegnet. Jeg valgte til sidst at droppe forslaget til det samlede mærke, illustreret i figur 15, da de værdiord, jeg havde valgt afspejlede sig bedre i det endelige mærke. Som beskrevet indledende er mine værdiord for Baressos nye identitet, udover kvalitet, dygtighed, hygge, effektivitet og omsorg. Dygtighed kommer til udtryk i barista-bladene i bomærket. Samtidig symboliserer disse blade kaffeplantagen. Bladene og kaffebønnen er sammen med de brune jordfarver med til at udtrykke kvalitet, fordi de tilsammen fortæller historien om, hvor kaffen kommer fra. Hyggen er underbygget af de varme brune farver i logoet og de bløde former, mens navnetrækket med den markante og kraftfulde fago-font udtrykker effektivitet. Omsorg kommer til udtryk i mærkets referencer til naturen som noget Baresso værner om, fordi de værner om den gode kaffe. Stregen i kaffebønnen, som kan ses i figur 17, har et lille svaj. Dette svaj har jeg valgt at overdrive i det endelige bomærke for at komme så langt væk fra burgerbolle-associationerne som muligt. Samtidig understøtter svajet i bønnen de øvrige bløde former i bomærket. Jeg har valgt at lade stregen gå hele vejen gennem kaffebønnen, i modsætning til bønnen i Baressos rigtige logo, for at understøtte symmetrien og balancen i det samlede mærke. Desuden giver kaffebønnen med svajet associationer til yin og yang. Navnetrækket er skrevet på en rund form, der rammer bomærket ind. Navnetrækkets runding er også med til at understøtte de runde former i bomærket, så bomæke og navnetræk fremstår Figur 17. Kaffebønner. som en helhed. COFFEE Figur 15 Forslag til logo med piktograminspirede tegninger. COFFEE COFFEE COFFEE Figur 16. Udviklingen af kompositionen i det samlede mærke. Bemærk også udviklingen i udformningen af bønnen. 5

I figur 18 har jeg valgt at vise, hvordan logoet kan skilles ad, uden man mister fornemmelsen af, hvem afsenderen er. Det gør det let at tilpasse loget til et bestemt format eller medie. Figur 18. Loget kan skilles ad, så man kan tilpasse det til mediet, det skal bruges i. I figur 19 er det illustreret, hvordan de dynamiske barista-blade i bomærket kan anvendes i et baresso-tapet. Det er dette tapet, to go-kopperne er beklædt med. Når den varmebeskyttende holder ikke er rundt om koppen er Baressos samlede mærke ikke illustreret på koppen. Derfor er tapetet et vigtigt element i den visuelle identitet. Det er også hensigten, at tapetet skal bruges i Baressos kaffebarerer, ligesom det er brugt i baggrunden på websitet. Figur 19. Bladene i bomærket danner et mønster i et tapet. Nyheder Om Baresso Presse Job i Baresso SERVERER ONLINE SHOP FIND DIN KAFFEBAR KAFFEKLUB Kaffe Spise Te & varm chokolade Kolde drikke Baresso kaffer Gaveæsker Gavekort Kaffekopper Sjælland Jylland Fyn Færøerne Baresso klubkort Medlemstilbud Administrér dit kort SØG Nyheder fra Baresso Ny kaffebar med udsigt til Rundetårn (18/11-2010) Websitet er bygget op om et firespaltet grid og alle sidetyper på sitet følger dette grid. Det er med til at skabe en høj grad af consistency hele vejen gennem sitet, så sitet fremstår som en helstøbt størrelse. Jeg har valgt at understøtte griddet gennem tekstens alignment og brugen af bokse. Hele sitet følger denne struktur meget stringent, dog har jeg prøvet at bløde det lidt op, ved at lade den brede bjælke med topnavigationen bryde med firespalte-griddet. Derudover er det brugt princippet om proximity, når tekst og bokse med billeder er placeret i nærheden af hinanden, så man forstår teksten og boksen som hørende sammen. Jeg har benyttet den skrappe grønne farve i min identitet udvalgte steder på sitet, fordi den står i kontrast til de varme brune nuancer og derved er den med til at skabe blikfang. Jeg har brugt farven i forbindelse med overskrifterne i boksene og på knapper som tilmeld og læg i indkøbs kurv. Kompositionen af elementerne på de forskellige sidetyper afspejler mit arbejde med strukturen på sitet (se sitemap illustreret i figur 22). Fairtradekaffen Honduras er månedens kaffe (27/10-2010) Rundvisning i Aalborgs nye kaffebar (20/10-2010) Baresso nyhedsbrev [ Indtast din e-mail ] tilmeld > Afmeld nyhedsbrevet Baresso applikation Baresso gavekort Baresso julekaffe Bestil kaffen på farten, og så har vi den stående klar til dig, når du kommer. Coffee to go er blevet endu hurtigere med Baressos nye smartphone applikation. Glæd en, du holder af med et gavekort til Baresso. Den perfekte julegave-idé til ham eller hende, der elsker god kaffe. En meget fyldig, mild og aromarig kaffe med en valnøddeagtig eftersmag. Til 39,95 for 250 g. hele kaffebønner. > Køb gavekort til Baresso > Køb julekaffen i online shoppen Baressos åbningstider Kontakt Telefon, fax & mail Marketingchef Man-fre 07.00-20.00, lør 08.3019.00 og søn 9.00-19.00. Baresso Coffee A/S Store Kirkestræde 3, 2. sal DK-1073 København K Telefon 33 93 98 28 Fax 33 93 08 48 Anita Grubbe Nørgaard Telefon: 33 93 98 28 E-mail: agj@baresso.com > Gratis download Find hver enkelt kaffebars specifikke åbningastider under Find din Baresso. Find din Baresso Fakturering rettes til: faktura@baresso.com info@baresso.com Baresso har i alt 22 kaffebarer rundt omkring i Danmark. > Find din nærmeste Baresso 2010 Baresso Coffee. All rights reserved. Figur 20. Det firespaltede grid er brugt på alle sidetyper på websitet. Nyheder Om Baresso Presse Job i Baresso SERVERER ONLINE SHOP FIND DIN KAFFEBAR KAFFEKLUB Kaffe Spise Te & varm chokolade Kolde drikke Baresso kaffer Gaveæsker Gavekort Kaffekopper Sjælland Jylland Fyn Færøerne Baresso klubkort Medlemstilbud Administrér dit kort Du er her: forside > online shop ONLINE SHOP > Baresso kaffer > Gaveæsker > Baresso gavekort > Krus og kopper MASSEVIS AF GODE GAVEIDEER G O D J U SØG L Sådan handler du Du kan trygt og roligt handle i Baressos online shop. vi sørger for, at det er lige så sikkert at handle her, som i almindelige butikker. Vi sender til alle steder i Danmark. Krus og kopper Gavekort Fragt: Fast pris på 35 kr. Dog er fragten gratis, hvis du bestiller for over 500 kr. Din indkøbskurv Varer Antal Du har 0 varer i din indkøbskurv Total beløb kr. Baresso kaffer Gaveæsker Baressos åbningstider Kontakt Telefon, fax & mail Marketingchef Man-fre 07.00-20.00, lør 08.3019.00 og søn 9.00-19.00. Baresso Coffee A/S Store Kirkestræde 3, 2. sal DK-1073 København K Telefon 33 93 98 28 Fax 33 93 08 48 Anita Grubbe Nørgaard Telefon: 33 93 98 28 E-mail: agj@baresso.com Find hver enkelt kaffebars specifikke åbningastider under Find din Baresso. info@baresso.com Fakturering rettes til: faktura@baresso.com 0,00 > Se din indkøbskurv 2010 Baresso Coffee. All rights reserved. Figur 21. Den grønne farve er bl.a. brugt til vigtige overskrifter på sitet. Figur 22. Sitemappet, der danner grundlaget for strukturen på sitet. 6

Sitemappet var et godt redskab i designet af de forskellige undersider, fordi det var med til at inddele de forskellige sidetyper i niveauer, og dermed kunne jeg finde ud af, hvor dyb strukturen på sitet skulle være. I denne niveauinddeling har jeg taget udgangspunkt i Jared Spools teorier om The 8 Types of Navigation Pages (2005). Den amerikanske tænketank User Interface Engineering, med Spool i spidsen, har lavet en række brugerundersøgelser, der viser, hvad brugerne forventer på forskellige niveauer på et website. De er nået frem til, at der findes fem slags sider på et website samt tre typer af søgesider. De fem niveauer i Spools terminologi (hvoraf de fire første er navigationssider) er: 1. 2. 3. 4. 5. Nyheder Om Baresso Presse Job i Baresso SERVERER ONLINE SHOP FIND DIN KAFFEBAR KAFFEKLUB Kaffe Spise Te & varm chokolade Kolde drikke Baresso kaffer Gaveæsker Gavekort Kaffekopper Sjælland Jylland Fyn Færøerne Baresso klubkort Medlemstilbud Administrér dit kort Du er her: Forside > Online shop > Baresso kaffer ONLINE SHOP KAFFER SØG Baresso julekaffe 250 g. hele kaffebønner. DDK 39,95. > Baresso kaffer > Gaveæsker > Baresso gavekort > Krus og kopper Fyldig og mild kaffe med en valnøddeagtig eftersmag. Barista Espresso Blend 500 g. malet kaffe. DDK 69,95. Baressos espressokaffe, som vi bruger til alle Baressodrikkene. Baresso House Blend 500 g. hele kaffebønner. DDK 59,95. Kaffe med god fylde og eftersmag med raffineret syrlighed. Sådan handler du Du kan trygt og roligt handle i Baressos online shop. Det er lige så sikkert at handle her, som i alindelige butikker. Vi sender til alle steder i Danmark. Fragt: Fast pris på 35 kr. Dog er fragten gratis, hvis du bestiller for over 500 kr. Din indkøbskurv Varer Antal Du har 0 varer i din indkøbskurv Total beløb kr. 0,00 > Se din indkøbskurv Honduras økologisk Fairtrade 500 g. hele kaffebønner DDK 49,95. Mild kaffe med sødlig aroma, let syrlighed og en chokolade- og bæragtig eftersmag. Sumatra Gayo 250 g. hele kaffebønner. DDK 39,95. Kaffe med næsten ingen syrlighed, men stor fylde og eftersmag med chokoladeagtige nuancer. Homepage Store page Department Gallery Content Baressos åbningstider Kontakt Telefon, fax & mail Marketingchef Man-fre 07.00-20.00, lør 08.3019.00 og søn 9.00-19.00. Baresso Coffee A/S Store Kirkestræde 3, 2. sal DK-1073 København K Telefon 33 93 98 28 Fax 33 93 08 48 Anita Grubbe Nørgaard Telefon: 33 93 98 28 E-mail: agj@baresso.com Find hver enkelt kaffebars specifikke åbningastider under Find din Baresso. info@baresso.com Fakturering rettes til: faktura@baresso.com 2010 Baresso Coffee. All rights reserved. Man kan sammenligne Spools navngivning af de forskellige niveauer med et stormagasin, hvor niveau 1 er stormagasinet (forside), niveau 2 er dame-etagen (supersektion), niveau 3 er skoafdelingen (sektion), niveau 4 er udstillingen af sandaler (kategori), mens niveau 5 er en konkret sandal (indhold). Hvert niveau har til formål at gøre det muligt for brugerne at vælge næste niveau på en kvalificeret måde. Hvis de ikke kan vælge det rigtige indhold ud fra kategorisiden, så begynder brugerne at pogostick e, dvs. hoppe frem og tilbage mellem oversigt og indhold, hvilket ifølge Spool får succesraten til at falde drastisk. Figur 23. Alle sider på sitet, der befinder sig på niveau 3, skal designes på samme måde som denne kategoriside. Jeg har derfor valgt, at man skal kunne se, hvor man er i strukturen på sitet via designet. Derfor er alle sidetyperne i min struktur kompositions mæssigt forskellige. Jeg har også valgt ikke at linke til indholds sider fra venstrenavigationen, men at venstrenavigationen er forbeholdt kategorier, mens links til indholdssider hører til midt på siden. Hvis der linkes direkte til indholdssider fra venstremenuen, kan menuen blive meget lang og uoverskuelig, efterhånden som der bliver lagt mere og mere indhold på sitet. Desuden kan det blive svært for brugeren at gennemskue sitets struktur, hvis der både linkes til indhold og kategorier i venstre navigationen. For almost seven years, my studies have shown the same user behavior: users look straight at the content and ignore the navigation areas when they scan a new page. Jakob Nielsen: Is Navigation Useful (2000) På indholdssider har jeg valgt, at relateret indhold i samme kategori vises i bunden af indholdsfeltet hvilket i følge Jakob Nielsen oven i købet er det første sted brugerne kigger, når de skanner en side. Alle kategorier i de forskellige sektioner er synlige i den brede top navigation, hvilket er med til at give brugerne et rigtigt godt overblik over sitets struktur uanset, hvilken side de havner på - jf. gangstertesten (Ole Gregersen & Ian Wisler-Poulsen, 2009). Brødkrummen er også med til at give dette overblik. Figur 24. Skitserne til websitet viser, hvordan jeg fra starten har lagt vægt på, at sidetyperne skal se forskellige ud alt efter, hvilket niveau, man befinder sig på. Figur 25. Topnavigationen er inspireret af den varmebeskyttende holder på to go-koppen. 7

Markedet Min proces afspejler, at jeg har arbejdet med udgangspunkt i 10-punktsmodellen. Modellen har været god at forholde sig til især i starten, hvor jeg havde mange abstrakte idéer, som var svære at forholde sig til. I starten af min proces har jeg brugt modellen meget stringent, fordi det var vigtigt for mig at have et ordentligt fundament for redesignet i form af en grundig undersøgelse af Baressos eksisterende identitet og markedet. På samme måde var det vigtigt for mig at have den visuelle identitet fuldstændig på plads, før jeg gik i gang med at designe websitet, eftersom identiteten danner fundamentet for websitets udseende. Logo Farver Websit Markedet, fortsat Logo Farver Websit Jeg har undervejs i arbejdet med både logo og website fået folk i min omgangskreds til at kigge på det, jeg har lavet. Man stirrer sig ofte blind på noget, når man sidder og fedter med de små detaljer, og derfor var daglige inputs udefra meget vigtige for mig. Derudover har jeg undervejs i min proces hele tiden stillet spørgsmålstegn ved mine beslutninger, fordi jeg ikke ville springe over, hvor gærdet er lavest. Jeg føler derfor, at jeg kan argumentere for, hvorfor jeg har gjort, som jeg har gjort hele vejen igennem. Jeg mangler dog at teste mit færdige design på flere personer, som punkt 9 i 10-punktsmodellen foreslår. Det er en god måde at teste målgruppen på, og om det er lykkes mig at give folk de associationer, som er tiltænkt. Testen er næste skridt for mig i mit arbejde med Baressos identitet. Derudover vil jeg videre i min proces kigge på Baressos smartphone applikation, som jeg reklamerer for i den traditionelle kampagne. Figur 26. Afsøgningen af markedet, Baresso befinder sig på, var med til at give mig et god fornemmelse for, hvad min identitet skulle tage udgangspunk i. 8