157px het
stijlgids 1
inhoudsopgave Inleiding
3
Logo
4
Logogebruik
5
Kleurgebruik
6
Kleurcombinaties
7
Typografie
8
Typografiegebruik
9
Grid
10
Gridgebruik
12
Icoongebruik
14
Beeldgebruik
15
2
inleiding Borrelen wordt graag vaak gedaan maar is niet de meest gezonde hobby. Door het gebruik van eerlijke en natuurlijke producten, wordt borrelen niet alleen lekkerder maar ook gezonder. Slow food borrelen it is. Het borrelt bij Albert Heijn is een applicatie voor borrelliefhebbers die inspiratie nodig hebben voor nieuwe borrelhapjes, geinteresseerd zijn in wijnen en behoefte hebben aan een verzamelplaats van deze twee elementen. Borrelen heeft drie verschillende betekenissen. • Het eten van kleine hapjes onder het genot van een glaasje (sterke) drank • Informele bijeenkomsten • Het vertonen van luchtblaasjes
In de vormgeving van de applicatie zijn deze drie betekenissen op verschillende manieren terug te zien. I. Binnen de applicatie kan er een duidelijke keuze worden gemaakt tussen hapjes en drankjes. Er wordt echter altijd verwezen waardoor er combinaties van beiden ontstaan. De nadruk ligt op de borrelhapjes en de wijn. Het beeld dat gebruikt wordt zal dus ook altijd een van deze twee bevatten. De kleuren die gekozen zijn, zijn af te leiden van olijven met piment gepresenteerd op een leisteen. Een bekend borrelhapje op een moderne serveerplank. Groen geeft de applicatie een gezonde uitstraling, wat refereert naar slow food. Rood oogt chique en heeft een sterke associatie met wijn.
II. De handgeschreven typografie en ronde elementen creëren een informele sfeer. Daarnaast heeft de gebruiker gemakkelijk de mogelijkheid dingen te delen met vrienden. III. In het logo van de applicatie zijn bubbeltjes verwerkt, een element dat doet denken aan de derde betekenis van het woord ‘borrelen’. De meerdere ronde elementen bij elkaar worden door de gehele applicatie vaker gebruikt. De vorm wordt het meest opvallend gebruikt in de uitklapbare navigatiebalk. De bubbels kunnen gezien worden als het beeldmerk van de applicatie. Deze worden dan ook gebruikt in het appicoon.
3
157px logo Het logo dat voor de applicatie gebruikt wordt bestaat uit verschillende elementen en typografie. Het is een typografisch logo. Het logo wordt in de applicatie op twee verschillende manier weergegeven. Het minimale formaat van het logo is hiernaast te zien. Het logo mag oneindig vergroot worden mits de juiste verhoudingen worden gehanteerd. De witruimte om het logo heen is altijd de hoogte van het logo/3,8. De ruimte tussen het en borrelt en borrelt en bij albertheijn is altijd de breedte/29.
160px
het
5,5px
84px
5,5px 22px
22px
204px
4
157px
logo variaties Het logo mag slechts op twee verschillende manieren weergegeven worden. Een andere kleur dan groen op een witte achtergrond is niet toegegestaand. Het witte logo mag enkel worden toegepast op beeld, mits deze voldoet aan de beeldrichtlijnen. Het beeld moet donker genoeg zijn om het logo te kunnen onderscheiden van de achtergrond
het 76px
het
76px
Het icoon van de applicatie, die te zien zal zijn op het bureaublad van een tablet en in de App Store, mag enkel in de hiernaast getoonde manier worden gebruikt. Het orginele typografische logo wordt hiervoor omgezet in een beeldlogo.
5
kleurgebruik Binnen de huisstijl van de applicatie worden de vier kleuren gehanteerd. Er dient niet van deze kleuren afgeweken te worden tenzij het gaat om systeeminstellingen. De kleuren groen en rood zijn accentkleuren. Deze kleuren worden gebruikt om onder andere knoppen en categoriĂŤn duidelijk te maken. Groen is daarbij ook de kleur die gebruikt wordt in het logo. De kleur #6C7230 en de kleur #2D2D2D, mogen zowel gebruikt worden met 100% als met 50% tint. De 50% tinten worden slechts gebruikt voor aanduidingen. 108|114|48 #6C7230
6
145|38|31 #91261F
255|255|255 #FFFFFF
45|45|45 #2D2D2D
kleurcombinaties Binnen de vier verschillende kleuren zijn er verschillende kleurcombinaties toegestaan. Zo kan iedere kleur, behalve wit, op wit worden weergegeven. Ditzelfde geldt voor wit, wit mag op iedere accentkleur en het donkergrijze worden gebruikt. Er moet naar gestreefd worden om zwart op wit te gebruiken voor de broodtekst. Wanneer niet anders kan is een van de andere kleuren ook toegestaan. De combinatie van zwart op wit wordt gebruikt om een schoolbordlook te creeĂŤren.
7
typografie Binnen de huisstijl van de applicatie wordt er gebruik gemaakt van drie verschillende fonts. Van het font Gotham worden meerdere styles gebruikt: • Medium: titels • Regular: broodtekst • Regular Italic: accent leggen • Thin: bijschriften/aanduidingen Voor de meest opvallende titels wordt het font DIN Condensed gebruikt. Deze is ook terug te zien in het logo. Voor uitleggende tekst en een handgeschreven uitstraling wordt VincHand gebruikt.
8
Gotham Medium
Gotham Regular
Gotham Italic
Gotham Thin
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h ijkl m n o p q rstuvwxyz 1234567890!?
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q rstuvwxyz 1234567890!?
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r st u vwxy z 1234567890!?
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1234567890!?
DIN Condensed A N a n 1
B O b o 2
C P c p 3
D Q d q 4
E R e r 5
F S f s
G T g t
H I U V h i u v 6 7 8
J W j w 9
K X k x 0
L Y l y !
M Z m z ?
A N a n 1
B O b o 2
C P c p 3
D Q d q 4
VincHand
E F G H I R S T U V e f g h i r s t u v 5 6 7 8
J W j w 9
K X k x 0
L Y l y !
M Z m z ?
typografiegebruik
30pt. 30pt.
14pt.
Er is een grote hoeveelheid verschillende grootte fonts die gebruikt worden in de applicatie. Hiernaast zijn de meest voorkomende groottes te zien: • • • •
10pt.
20pt.
20pt.
Grote titels: 30pt. Kopjes: 20pt. Broodtekst: 14pt. Aanduidingen: 10pt.
De minimale grootte van Gotham en Din Condensed is 10pt. Bij VincHand is dit 15pt.
30pt. 14pt. 16pt.
10pt.
9
grid De applicatie is ontworpen voor een iPad 2, deze heeft de afmetingen 1024 x 768. Het grid dat gebruikt wordt voor de applicatie bestaat horizontaal uit tien kolommen welke weer door de helft gedeeld zijn. Verticaal bestaat de applicatie uit acht kolommen welke ook door de helft gedeeld zijn. Dit grid zal altijd als richtlijn gehanteerd moeten worden. 768px Echter bij het laten opvallen van elementen mag er, zorgvuldig, worden afgeweken van het grid. Daarnaast mag tekst afwijken van het grid aangezien er binnen het grid geen rekening is gehouden met tussenruimtes. Belangrijk is dat er ten allertijden consequent geplaatst moet
10
1024px 102px
96px
Hoewel de applicatie primair ontworpen is om horizontaal gebruiken. Is er ook een verticaalgrid ontworpen. Hierbij gelden dezelfde regels als bij het horizontale grid. In de applicatie wordt er veel gebruik gemaakt van vlakken die 4 bij 4 vakjes groot zijn zijn. Er worden er hier vijf van naast elkaar gebruikt. Tekst wordt gecentreerd binnen het grid en kan daarom lijken het grid te doorbreken. Dit is toegestaan.
11
gridgebruik
Kies de gewenste keuken
het
HAPJES
zoek op keuken, recept of ingrediënt
zoeken
Wijn Wijnscanner Wijn informatie Hapjes Hapjes informatie Boodschappenlijstje
KEUKEN FRANS zoek op ingrediënt
GELEGEN HEID
SPAANS zoek op ingrediënt
ITALIAANS zoek op ingrediënt
CATEGORIE HOLLANDS zoek op ingrediënt
INDISCH zoek op ingrediënt
GRIEKS zoek op ingrediënt
CLAUDIA HOVING Mijn profiel Mijn favorieten Mijn recepten Instellingen
INFO
AZIATISCH zoek op ingrediënt
12
SCANDINAVISCH zoek op ingrediënt
MEXICAANS zoek op ingrediënt
(14) waardeer ook
het
CASILLERO DEL DIABLO
12 favorieten
Sauvignon Blanc Fris & fruitig Chili, Central Valley
zoeken
Wijn Wijnscanner Wijn informatie Hapjes Hapjes informatie Boodschappenlijstje
CLAUDIA HOVING Mijn profiel Mijn favorieten Mijn recepten Instellingen
Beschrijving
121 caloriën
Heerlijke happy-hour-wijn. Zacht en fris. Met het sappige van perzik en meloen en crispy citruszuren.
13,0% alchohol
Casillero del Diablo is een wijnlabel van Concha y Toro, een van de oudste wijnhuizen in Chili. Het is Concha's varietal-serie: wijnen gemaakt van één druivenras. Marcelo Papa is de trotse wijnmaker van de Casillero-wijnen. Papa: 'In elke Casillero proef je de kenmerken van de druif, met daarbij ons Casillero-sausje. Omdat wij over wijngaarden in drie verschillende klimaatgebieden beschikken, kunnen we de wijn zo samenstellen dat hij jaar in, jaar uit hetzelfde smaakt. Je weet dus precies wat je krijgt, als je Casillero del Diablo koopt.' De naam, duivelskelder, slaat op een verhaal uit het verleden. Om diefstal te voorkomen werd gezegd dat de duivel in een bepaalde kelder huisde. Op die plek lagen Concha's mooiste wijnen. Dieven lieten het wel uit hun hoofd om de 'Casillero del Diablo' te betreden.
12˚C 0,75 liter
432 caloriën
1 week open laten
78 favorieten
prijs per fles €6,69
78 favorieten
serveertip recepten
13
icoongebruik De iconen die gebruikt worden in de applicatie hebben een paar richtlijnen. •
• • •
Alle iconen moeten binnen de grootte van een vakje blijven (101,2x48) Alle iconen moeten binnen een vakje worden gecentreerd Alle iconen hebben een outline, deze is 2px breed. Wanneer iconen worden gebruikt als buttons, mogen deze groter weergegeven worden. Deze moeten omcirkelt worden. Hierbij mag er gewisselt worden tussen een fill of outline.
14
beeldgebruik Het beeld dat gebruikt wordt voor de applicatie is altijd aan voedsel gerelateerd. En moet minimaal een ppi hebben van 132. Het beeld heeft altijd een groene overlay van 50%. Wanneer een afbeelding vergroot kan worden, wordt deze getoond zonder overlay. De grote afbeeldingen van wijnflessen zullen echter altijd weergegeven worden zonder overlay. Het is belangrijk dat deze flessen een hoge resolutie hebben zodat de labels goed gelezen kunnen worden.
15
Het borrelt bij Albert Heijn
16