1. No category

Skriftlig aflevering
Mads Frank
Grundlæggende grafisk design
IT-Universitetet i København
Introduktion
I denne rapport fremlægges et forslag til en
ny visuel identitet for bagerforretningskæden
Emmerys. Der redegøres desuden for processen
og tankerne bag forslaget.
eller for den sags skyld handel med fødevarer, på
trods af den brune farve i navnetrækket.
Nuværende website
Det umiddelbare indtryk af websitet er at det
fremstår statisk og uopdateret. Man kan næsten
Figur 1: Emmerys nuværende logo.
sidestille websitets funktion med et visitkorts,
uden interaktion der udnytter platformens
Analyse af det eksisterende
muligheder.
Nuværende logo
På hver side er der et billede fra de forskellige
Emmerys bomærke, et ret stort minuskel ‘e’, er
i sin lys grå farve og placering meget diskret, og
træder i baggrunden for navnetrækket.
Det brune navnetræk er ligesom bomærket
skrevet i minuskler, der bevarer helheden diskret.
Skrifttypen i navnetrækket er sans-seriffen
Helvetica Neue i garnituren ultramager.
Dette fontvalg og dets garniture er med til at give
logoet et moderne udtryk, et udtryk af renhed,
kvalitet, eksklusivitet; der dog også tangerer
kulde og overdreven neutralitet. Ikke specielt
iøjnefaldende.
Selvom man ikke nødvendigvis kan forlange den,
for en bagerforretning i Skandinavien, nærmest
obligatoriske kringle i logoet (Mollerup, P. 1998),
noteres det at Emmerys logo ikke specifikt
signalerer at der er tale om en bagerforretning,
butikker, hvilket giver en autenticitet og nærhed.
Trods billedernes svingende kvalitet sender
motiverne signaler om rene linjer, kvalitet og
simplicitet.
Billedernes lave farvemætning, der også viser
butikkernes indretning med brug af klinker og stål,
Figur 2: Udsnit af forsiden på Emmerys website.
får butikkerne til at fremstå nærmest kliniske og
ikke ubetinget hyggelige.
Farvepaletten der giver Emmerys visuelle identitet,
bestående af hvid, grå, brun og sort, er anvendt
på simpel og stilsikker vis. Den brune varme farve
bliver dog kun anvendt minimalt, i logoet og på et
par af websitets billeder.
Typografisk er der god luft mellem linjerne i
brødteksten, hvilket gør det lettere at læse den
nok egentlig for lille tekst, i den lidt kedelige sans
serif font Arial. Fonten har dog styrke i at den er
Figur 3: Udsnit af en underside fra Emmerys
website
1
undstøttet på både Windows og Mac.
ni menu punkter er chunket i to rækker, hvor
Websitets grid ses at være 850 pixels i bredden,
den første række af menupunkter overvejende
hvilket på en skærm med gennemsnitlig opløsning
er deres produkter, og den anden mere praktisk
giver godt luftige sider på grund af store marginer.
information. Menuen følger også gestaltloven om
Generelt har websitet en høj grad af consistency
nærhed, hvilket hjælper til at rækkerne opfattes
mellem dets undersider, bortset fra en lille forskel i
som én menu (Lidwell et. al.).
Figur 4: Lagkageshusets logo er simpelt, ligesom
deres website.
tekstspaltens start og den horisontale streg under
den. Forsiden adskiller sig fra undersiderne ved
På undersiderne ‘København’ og ‘Århus’ savnes
at mangle logo i øverste venstre hjørne. Trods
overskuelighed i adresser, tlf. og åbningstider, idet
denne mangel er brugeren næppe er i tvivl om
de er skrevet komprimeret på kun to linjer.
hvilket site han befinder sig på (et logo ses stadig
Der er dog tilfredsstillende brugt fed garniture til at
på forsidebilledets butiksfacade), men jeg mener
fremhæve butikkernes adresse, og butikkerne er
nu alligevel det går ud over den consistency med
skilt i afstand.
fælles identifikatior på samtlige et sites sider, der
normalt vægtes meget højt.
Websitets samlede problemer med
designprincipperne forringer overskueligheden og
Websitet har en hel del problemer med
det virker noget uprofessionelt.
alignment både horisontalt of vertikalt, f.eks
Farverne og anvendelsen giver et meget neutralt,
at den horisontale streg over tekstspalten på
og samtidig rent og elegant udtryk.
undersiderne i den horisontale akse ikke aligner
Dog er oplevelsen også et site der er meget
med hverken billeder, tekstspalten eller stregen
kedeligt, statisk, upersonligt, forældet og
under tekstspalten.
webteknisk primitivt.
På trods af at Emmerys website har en meget
Markedet
begrænset mængde information, er der hele ni
Figur 5: Bavinchi har afdedæmpet logo, men mere
kulørt på websitet.
Emmerys tilhører den mere eksklusive del af
menupunkter. Mange menupunkter forøger en
bagerbranchen for brød. I denne del af markedet
brugers responstid på grund af uoverskuelighed
finder vi bl.a. hovedkonkurrenten Lagkagehuset,
(jævnfør Hicks lov).
Meyers Bageri, Andersen Bakery, Reinh van
Overskueligheden bedres dog noget, ved at de
Hauen og Bavinchi.
Figur 6: Andersen Bakery og Reinh van Hauen har
kulørt logoer. Hauns website er ret kompleks i navigvigationen, mens Andersen holder det simpelt.
2
Emmerys forsøger desuden også at differentiere
nutidighed. Disse værdier har gennem hele
sig på økologi, og i denne del af markedet
processen fungeret som ledetråd til mine valg.
har vi bagerier som Det Rene Brød og Meyers
Fremstillingen af Emmerys produkter foregår med
Bageri. Også supermarkedskæderne og mindre
simple teknikker med simple ingredienser: mel,
eksklusive bagerier forsøger sig med økologi i
vand, salt. Derfor synes jeg den visuelle identitet
stigende grad.
skal matche den enkelhed. Forbundet med den
R: 255
G: 255
B: 255
enkle produktion er også den kvalitet der kommer
De konkurrerendes visuelle identiteter er meget
af solidt håndværk og gode råvarer.
forskellige. Farvemæssigt er der en opdeling i
Emmerys har en tilgang til håndværket der er
at have meget stærke farver (Andersen Bakery,
baseret på tradition, men som bliver udmøntet
Reinh van Hauen, Det Rene Brød) i modsætning
meget moderne og nutidigt.
de øvriges mere dæmpede brune nuancer (Meyers
Den nuværende visuelle identitet fremstår
bageri, Lagkagehuset, Bavinchi)
upersonlig og en anelse kedelig, derfor vil jeg
Nogle har simple websider (Lagkagehuset,
gerne give Emmerys en smule kant eller twist,
Andersen bakery, Meyers bageri), de andre har
personlighed.
næsten for komplekse websites.
Da økologi er det der adskiller Emmerys produkt
R: 195
G: 154
B: 107
R: 89
G: 76
B: 66
fra de flere af konkurrenters, er det et vigtigt ord
Ny visuel identitet
Konkretisering
også at have i fokus.
Farver
Jeg har tilstræbt at holde farvepaletten simpel,
På baggrund af egne indtryk af Emmerys,
med fire farver (figur 7).
butikkernes fysiske rammer, markedet,
Farverne er umættede og de opfattes som
research af Emmerys optræden i medierne
seriøse, hvilket meddeler professionalismen og
samt et dybdegående interview med den
kvaliteten i håndværket (Lidwell et. al.).
marketingsansvarlige i Emmerys, har jeg
Selvom mit farvevalg lægger sig meget op ad den
opstillet fem værdier jeg mener bør have fokus
nuværende farvepalet, mener jeg dog at bruge
i udarbejdning af den nye visuelle identitet:
farverne på en måde der fungerer bedre.
Personlighed, økologi, kvalitet, enkelhed og
R: 0
G: 0
B: 0
Figur 7: Den nye farvepalet, angivet i RGB.
3
I de fysiske butikker er interiøret domineret af
navnetrækket tilsammen bomærket, logoet.
rene hvide farver. Den hvide farve har jeg valgt at
Efter ønsket om at skabe et simpelt, men
arbejde videre med i den nye identitet, især for at
iøjnefaldende bomærke, der samtidig understøtter
afstemme identiteten med butikkernes udseende.
de fem værdier, blev de tidlige eksperimenterende
Farven udtrykker renhed og enkelhed, som er
sketches af bomærket til.
kvaliteter der går igen i både i butikker, råvarer og
Selvom jeg var eksperimenterende med motiver
bageteknikker (Cooper, 1999). Desuden er farven
med udgangspunkt i bl.a. møller, badges, romersk
hvid også meget nutidig.
mytologi, dyr, stenovne og kornstokke, faldt valget
til sidst på den simple brødform.
Som modstykke til det hvide har jeg brugt nogle
Ved en iterativ sketching proces begyndte mærket
lidt varmere og venlige farver, en lys brun og en
at forme sig fra grove sketches til en mere konkret
mørk brun. De sender tankerne mod det naturlige,
form (Figur 8).
men i denne kontekst også til henholdsvis det
lette lyse brød og det mørke mere rustikke brød.
Yderligere har jeg, i processen med at undersøge
Den lysbrune farve er generelt let, rolig og
grænsen for hvor simpelt mærket kan formes,
behagelig, mens den mørke er mere rå, dog stadig
løbende vist og udspurgt udenforstående
behagelig og tryg, naturnær.
personer om bomærket; om hvorvidt motivet
stadig anes.
Brugen af den sorte farve vil jeg holde på et
Ved at balancere på denne grænse skaber jeg en
minimum, da den er meget dominerende og tung
‘holding power’ (Mollerup, 2008), der gør mærket
sammenlignet med resten af paletten.
iøjnefaldende og genkendeligt, fordi det ved første
Bomærke
blik har udgjort en lille udfordring.
Bomærket er, efter Mollerups (1998) taksonomi,
De to ridser i brødets kontur er placeret således,
et deskriptivt mærke, idet det ganske enkelt og
at spidsen af den venstre ridse ligger smukt i det
ligetil forestiller et brød, som er hovedartiklen hos
gyldne snit på den horisontale akse. Den højre
Emmerys.
ridse er bevidst placeret udenfor det gyldne snit
Brødfiguren fungerer generelt ikke godt alene,
for at gøre det imaginære brød mere asymmetrisk,
uden navnetrækket. Derfor udgør figuren og
give det karakter og et rustikt look.
Figur 8: Et lille udsnit af skechingprocessen på papir.
4
Det gyldne snit er også brugt som hjælp til
dog med et elegant design (Google web fonts,
justering af bomærket, sådan at forholdet mellem
2012). Det der beskrives som futuristisk, ser jeg
navnetrækkets x-højde og brødkonturen stemmer
mest som en skævhed der giver navnetrækket
med det gyldne snit.
personlighed, eller så er det det særegne der gør
Jeg har tilstræbt balance og harmoni i bomærket,
det. Elegancen beholder den dog.
emmerys
bortset fra den førnævnte asymmetri.
Trods et lidt tungt navnetræk får det samlede
For at øge læsbarheden og harmonien i
mærke en lethed og elegance, hvor navnetrækket
navnetrækket er afstanden mellem bogstaver
danner bund i bomærket og gør brødet til en
justeret individuelt. Også navnetrækkets
form fremfor blot en konturstreg. Navnetrækkets
begyndelsesbogstav er udført i minusker, da jeg
stærke farve danner desuden en kontrast til den
synes det tilføjer enkelhed og et moderne udtryk.
lysebrune kontur, og helt basalt forøger det også
Desuden finder jeg fontens versaler lovlig store og
synligheden af firmaets navn.
dominerende, for maskuline.
Udfra en nonfigurativ synsvinkel giver figuren med
Foruden Exo fonten har jeg kontrasterende brugt
dets skarpe streger associationer til mandlighed
den groteske Helvetica Neue familie til øvrige
og energi (‘lyn’), men samtidig er der også bløde
tekst, brødtekst og overskrifter. Denne font er
kurver, der afspejler noget kvindeligt (Birkvig,
modsat Exo tidsløs; allround og letlæselig, både
2008).
på skærm og print.
Typografi
Skrifttypen der er anvendt i navnetrækket, tilhører
den geometriske sans serif familie, Exo.
emmerys
emmerys
emmerys
emmerys
EMMERYS
emmerys
emmerys
emmerys
emmerys
emmerys
EMMERYS
emmerys
emmerys
emmerys
EMMERYS
Figur 9: Et senere udsnit af arbejdet med logoet.
Opbygning af website
Jeg har valgt en sans serif af den geometriske
Jeg har valgt at holde funktionaliten relativt
gruppe for at give et moderne og nutidigt udtryk,
simpel. Jeg har dog tilføjet en mulighed for at for
og fordi de fremtræder klart i overskrifter.
at bestille frisksmurte sandwiches online, et ønske
den markedtingsansvarlige hos Emmerys nævnte.
Fonten beskrives som en en særegen (peculiar)
Det giver god mening, tilberedningstiden taget i
font der prøver at overføre en futuristisk følelse,
betragtning.
5
På alle sider er hovedmenuen er placeret øverst
sammenhængende (farve, font, størrelse,
til højre på linje med logoet, der er til venstre, helt
placering), men stadig fremstår enkle.
konventionelt. Menuen består de få punkter: Varer,
Bagerier, Koncept og Engros.
Idet der tilstræbes enkelhed har jeg benyttet loven
om nærhed til at holde sammen på illustrationen
I bunden af sitet har jeg placeret en footer med
og teksten i elementerne under slideren frem for at
diverse kontaktoplysninger.
eksempelvis bruge loven om lukkethed og lave en
På forsiden er der en billede-slider og nedenunder
kasse omkring dem.
denne fire klikbare elementer.
På undersiden ‘Bagerier’ er der en butiksliste med
På undersiden ‘Bagerier’ er kontrast benyttet
et interaktivt google maps kort.
til at adskille dropdown-overskrifter og deres
Designprincipper og komposition
Figur 10: Gridet
underpunkter, farve og størrelseskontrast. Den
butik på listen man klikker på, for at se på
Sitet er bygget i et 960 pixel grid med 12
kortet, vises fremhævet med fed, så det aktive
spalter. Dette grid skal sikre sitets alignment og
punkt adskilles fra de øvrige ved princippet
ensartethed siderne imellem.
om ensartethed. Det samme princip gælder
hovedmenuen, hvor den aktive underside skiller
På forsiden er 80/20 reglen taget i betragtning i
sig ud i farven.
mit valg om at skære den oprindelige nipunkters
For at gøre butiksinformationerne mere
menu ned til de fire vigtigste punkter. En
overskuelige er de chunket i to dele med
reducering af menupunkter giver hurtigere overblik
henholdsvis kontaktinformation og åbningstider
og sikrer bedre brugeroplevelse.
(Ledwell, et al.).
Jævnfør samme regel har jeg på forsiden sat
en ekstra genvej “åbningstider” til undersiden
‘Bagerier’, da jeg tror det er sitets mest
eftertragtede information.
Billeder
Baggrundsbillederne på undersiderne er tilføjet et
Figur 11: Forsidens wireframes i grid.
blødgørende filter, for at de ikke skal tage fokus.
Filtret er nøjagtig så kraftigt at motivet godt kan
Princippet om ensartethed er brugt, for at
fornemmes og farvemæssigt passer billederne ind
hovedmenupunkterne bliver opfattet som
i farvepaletten.
6
Produktbillederne er alle yderst arrangerede
Jeg har valgt at arbejde på en plakat med QR-
close-up billeder for at for vise detaljerne i
kode, da mange forbrugere har fået en vis en
produkterne, fra en afstand man ikke er vant til,
‘banner-blindhed’, der gør at reklamer helt
som gør oplevelsen spændende. Desuden er det
automatisk kognitivt sorteres fra. QR-koden
forsøgt at gøre billedet mere spændende ved at
giver kunden mulighed for en frivillig pull-
beskære hårdt.
kommunikation.
For billeder på slideren gøres der umage med
at vælge dem flotte, appetitvækkende og
farveafstemte billeder, der passer til forsiden.
Mobilsite
Mit mobilsite mock-up viser et flow for en bruger
der vil finde den nærmeste Emmerys butik
Interaktiv kampange
Valg af medier til den til den visuelle del
Jeg har valgt at arbejde med den interaktive
(figur_12).
Forsiden er ændret i forhold til desktop websitet,
Figur 12: Flowet brugeren skal igennem for at blive
guidet til den næsrmeste butik.
så den matcher konteksten for en mobilbruger.
F.eks. er menupunktet ’Bagerier’ omdøbt til ‘Find
os’ og sandwichbestilling er med i hovedmenuen.
kampagne. Jeg tror at der med den interaktive
kampagne er større potentiale for at tilbyde
På det første skærmbillede klikkes der på ‘Find
kunderne en merværdi hvor den favorable pull-
os’ og på det næste får brugeren informationen
kommunikationsmodel gør sig gældende.
på den nærmste Emmerys (fundet via GPS).
Forside
Vælger brugeren at ‘åbne i maps’ vil sitet åbne
Da en stigende del af webtrafik kommer fra de
det indbyggede kort-app på telefonen, med en
mobile enheder synes jeg det vigtigt, at modtage
guide til hvordan man finder til den pågældende
besøgende fra mobile devices på et site, der er
Emmerys, samt hvor langt der er til den.
skædersyet til denne platforms kontekst. Derfor
Knapperne er gjort ekstra store for at sikre en god
har jeg valgt at lave et mobilsite. Desuden tror jeg
usability på den lille skærm. Desuden skal slideren
at cross-browser mobilsites er fremtiden, frem for
understøtte swipe til manuelt slideskift.
Find os Bestil sandwich Varer Koncept Kontakt
Indbygget kort Andre Emmerys
Brød og kage Kaffe Sandwich Deli.
Figur 13: Flowchart for mobilsitet.
de platformsafhængige apps.
7
Plakat
fordi helheden hele tiden var så vigtig, men
flade en plakat kan tilbyde, og derfor er QR-koden
afklaret.
Grafisk vil jeg gerne udnytte den store ubrudte
anbragt nærmere bunden, hvor man måske skal
bukke sig lidt for at scanne koden; det trade-off
skønner jeg rimeligt, selvom usability nedsættes.
Jeg har benyttet bomærkets grafik, separeret fra
navnetrækket, til at danne et blikfangende wifi-
det hjalp dog meget da logoet var nogenlunde
Jeg har undervejs støttet mig til
10-punktsmodellen, specielt har konkretisering
været en stor hjælp til at fastholde min idé om den
visuelle identitet.
symbol, samt skabe lidt personlighed i brandet,
med en underforstået humor i.
Når koden scannes bliver brugeren sat op i et
flow på mobilen, der viser ham til den nærmeste
Referencer
Cooper, J.C. 1999. Symbolleksikon.
Emmerys (figur 12).
Mollerup, P. 1998. Marks of Exellence.
Plakaten er bygget op efter AIDA modellen:
Lidwell, W. Kritina, H. Butler, J. 2010. Universal
Fanger først opmærksomheden med det store
sære wifi-symbol, skaber interesse om hvad
meningen er, dernæst en lyst/ønske, og tilsidst
Mollerup, P. 2008. Brandbook brand.
principles of design.
Birkvig, H. 2008. Smukkere grafisk design.
Google web fonts, 2012. http://goo.gl/hoX6X
giver handlemulighed i form af QR-koden.
Refleksion
Udarbejdelsen af den nye visuelle identitet var
i den tidligere fase langsommelig og famlende,
præget af forsøg og forkastelse. Det har været
svært at arbejde isoleret på de enkelte elementer
8
Mads Frank
Bomærke
emmerys
1
Bomærke
a
a
b
b
emmerys
a
= 1,618
b
2
Bomærke
emmerys
emmerys
emmerys
emmerys
3
Bomærke på visitkort
emmerys
emmerys
Thomas Knack
CEO
emmerys aps
4
Bomærke på kuglepen og t-shirt
5
Website: Forside
emmerys
Varer
Bagerier
Koncept
Engros
Nyhed
Vi bager nu Altopascios brød, et
koldhævet italiensk surdejsbrød,
efter en næsten 1000 år gammel
tradition, grundlagt i de gamle
pilgrimsklostre i Altopascios.
6
Website: Bagerier
emmerys
Varer
Bagerier
Koncept
Engros
Kbh K, Højbroplads
7
Website: Varer
emmerys
Brød og kager
Varer
Kaffe
Bagerier
Frisksmurte Sandwiches
Koncept
Engros
Delikatesser
8
Mobilesite
9
Plakat med QR-kode
emmerys
Scan koden og find det
nærmeste Emmerys bageri.
10
Plakat med QR-kode i kontekst
11