DESIGNGUIDE TEMA 5 - REBRANDING NØRREBRONX http://www.karolinepaarup.dk/kea/2_sem/istid/ Gruppe A2 Karoline Paarup Michaela Brandt Mille Dinesen
INDHOLDSFORTEGNELSE KONCEPTBESKRIVELSE - kreativt brief - værdigrid 3 4 DESIGNKONCEPT - art direction - stilart 5 5 VISUEL IDENTITET - logo - typografi - farver - grafiske elementer - fotostil - medier 6 6 7 7 7 8 SKITSEPROCES AF LOGO 9 TEKNISK DOKUMENTATION - sitemap - wireframes - kodeeksempler 10 11 14
KREATIVT BREIF 1. HVEM ER AFSENDEREN? Istid ApS 2. HVAD ER FORMÅLET? Branding og overblik Finde informationer om åbningstider, butikkens historie, nitrogenis, salg m.v. 3. HVEM ER MÅLGRUPPEN? Voksne og unge som bor på Nørrebro, samt turister 4. HVAD TÆNKER MÅLGRUPPEN OM OS NU? Positionen ligger højt hos målgruppen, virksomheden er vellidt og folk vender tilbage samt anbefaler virksomheden til andre fordi de er vilde med produktet 5. HVAD SKAL MÅLGRUPPEN TÆNKE OM OS? Virksomhedens kerneværdier (Ærlighed, kærlighed og kvalitet) bliver let overset på den eksisterende website, man kommer som bruger let og elegant over dem. De skal afspejle sig i hele websitet og ikke kun på en enkelt side. Virksomheden går meget op i økologi og rene naturlige råvarer, dette skal målgruppen også vide. 6. HVAD ER BUDSKABET? At spise og lave is med kærlighed af de bedste råvarer (VI LAVER DEN IS, VI SELV VIL SPISE) 7. HVORDAN ER VORES STIL OG TONE? Stilen skal holdes moderne og ungt for at ramme målgruppen på Nørrebro, men samtidig skal websitet også målrettes til andre segmenter i forhold til deres nye butik i Hellerup Stilen skal være moden og voksent med en kant for at skille sig ud med deres unikke koncept 8. HVOR KOMMUNIKERER VI? Digitale Medier: Website, Facebook og Instagram Analoge medier: Cykelvogn, skilt foran butikken 9. SÆRLIGE KRAV ELLER BEGRÆNSNINGER? Kundens designkoncept er ikke færdigudviklet, derfor har vi frie tøjler til at gøre hvad vi vil 10. SPRINT SPØRGSMÅLET? En mere brugervenlig website, virksomhedens koncept skal uddybes og de mere relevante oplysninger omkring butikken skal være lettere tilhængelige 3
VÆRDIGRID 4
ART DIRECTION Den bærende grundidé for det visuelle koncept tager udgangspunkt i amerikanske retro stil for at afspejle stilen i butikken og isenes udseende. I forhold til Nørrebro passer det godt ind hos målgruppen, da det er moderne og hipt. Vores visuelle virkemidler tager primært udgangspunkt i logodesignet, her er det farverne og typografien der træder i kraft i forhold til den amerikanske retro stil. Vi har derefter anvendt disse elementer på websitet og dette danner rammerne for vores designkoncept. Stemningen for hele websitet tager udgangspunkt i den klassiske amerikanske diner det ses bl.a. også i butikken i form af styling til produkterne, materialevalg og interiør. Med udgangspunkt i vores desktop breakpoint bliver loven om lukkethed brugt i websitets opbygning, da den består af kasser i de forskellige signaturfarver. Loven om lighed bliver anvendt i menubaren og fremvisning af smagsvarianterne. Vi benytter Bootstraps gridsystem på hele websitet, det ses tydligt i About, hvor to billeder står ved siden af hinanden samt en tekstboks. Et grafisk element vi har lagt vægt på er de tre cirkler under overskrifterne, de symbolisere iskugler og skaber et harmonisk udtryk på websitet. STILART Vores stilretning tager udgangspunkt i en kombination af postmodernisme og flatdesign. Postmodernisme er perioden fra ca. 1970 erne til starten af 1990 erne. Dens kendetegn er en blanding af stilarter, collage og en stærk visuel formgigning mættet med forskellige farver. Piet Mondrian er en stor designer inden for netop denne stilart. Flatdesign er en nyere periode som trådte i kraft omkring 2010 og stadig bruges den dag i dag, Apple og Microsoft er store repræsentatner inden for netop denne stilart og det helt unikke er de dæmpede og behagelige farver, sans-serif typografi og gridsystem. Derudover bliver der ikke anvendt skygger eller kontur-streg. Vores website anvender dæmpede og forskellige farver som tager form i et gridsystem der danner en collage. Der bliver kun brugt sans-serif typografi, men vi anvender kontur-streg og skygge i typografien på loget som det eneste sted for at holde fokus på den amerikanske retro stil. 5
LOGO TYPOGRAFI DISPLAY TEKST Bikinis LÆSETYPOGRAFI ER: MONTSERRAT MEDIUM RUBRIK: AMATIC AS BOLD MELLEMRUBRIK: MONTSERRAT MEDIUM/LIGHT BODY: MONTSERRAT LIGHT BYLINE/BILLEDTEKSTER: MONTSERRAT MEDIUM/LIGHT KONSULTATIV TEKST: MONTSERRAT LIGHT 6
FARVER SIGNATURFARVER, TEKSTFARVER OG HIGHLIGHTFARVER BASISFARVER RGB: 230, 96, 96 CMYK: 0, 75, 51, 0 #e56060 RGB: 172, 220, 200 CMYK: 44, 0, 30, 0 #addcc8 RGB: 40, 44, 76 CMYK: 98, 88, 38, 40 #292c4c RGB: 0, 0, 0 CMYK: 91, 79, 62, 97 #000000 RGB: 255, 247, 238 CMYK: 0, 4, 7, 0 #fff8f0 RGB: 255, 255, 255 CMYK: 0, 0, 0, 0 #ffffff GRAFISKE ELEMENTER FOTOSTIL 7
MEDIER BÆGRE BADGES POSE SKILT Projekt: Rebranding Nørrebronx - tema 5 8
SKITSEPROCES AF LOGO 9
SITEMAP Welcome Find us About Flavours Catering 10
WIREFRAMES MOBIL 11
WIREFRAMES TABLET LOGO NAVIGATION MELLEMRUBRIK LOGO RUBRIK MELLEMRUBRIK RUBRIK RUBRIK RUBRIK RUBRIK RUBRIK RUBRIK LOGO 12
WIREFRAMES DESKTOP LOGO NAVIGATION RUBRIK LOGO RUBRIK RUBRIK MELLEMRUBRIK RUBRIK RUBRIK RUBRIK LOGO 13
KODEEKSEMPLER SECTION ABOUT - BOOTSTRAP GRIDSYSTEM JAVASCRIPT PLUGIN - ANCHOR SCROOL 14