STYLEGUIDE
INLEIDING
Studenten lopen er dagelijks tegenaan: wat moet ik vanavond nou weer eten? Vaak weten ze super goed wat ze echt niet willen eten, maar waar ze wel zin in hebben is altijd moeilijk te bepalen. Daarnaast zijn er altijd mensen die ingredienten of recepten niet lusten of mogen; hoe vind je nu dan een perfect gerecht waar iedereen tevreden mee is? Daarom is er nu YOUR FOOD BOOK; de applicatie die binnen 2 minuten een passend recept vindt voor jouw en je eetgenoten. Door middel van het doorgeven van allergien en voorkeuren, vindt YOUR FOOD BOOK recepten die aansluiten bij alles wat je hebt aangegeven. Missie | YOUR FOOD BOOK biedt zo snel mogelijk een recept dat past bij wat jij wil, kan en mag eten Visie | Serving you recepies Waardepropositie | ‘Wij beloven de gebruikers een lekker recept voor elke avond, gevonden in twee minuten’ Deze styleguide voor YOUR FOOD BOOK is opgesteld om ervoor te zorgen dat alle uitingen vanuit en voor YOUR FOOD BOOK overeenkomen en hetzelfde uitstralen. In de styleguide staan guidelines waaraan moet worden voldoen, regels en voorwaarden voor de stijl.
3
INHOUDSOPGAVE
LOGO Het logo Gebruik Misbruik
FOTOGRAFIE Fotografie stijl Gebruik Misbruik
EXTRA ELEMENT Het element Gebruik
MOODBOARDS Inspiratie applicatie
TYPOGRAFIE Lettertypes Gebruik KLEURGEBRUIK Kleuren Gebruik
ICONEN De iconen Gebruik MOCK-UPS De applicatie Gebruik
5
LOGO
7
Dit is het officiele logo voor YOUR FOOD BOOK; groen op wit.
De kleur groen mag als achtergrond kleur, maar dan is tekst altijd wit.
Als het logo in het zwart wit moet voor bepaalde doeleinde; altijd donkere tekst.
Kleurcode staat verder in de styleguide
Kleurcode staat verder in de styleguide
Kleurcode staat verder in de styleguide
8
Geen groene achtergrond met donkere tekst
Geen donkere achtergrond met groene tekst
Geen donkere achtergrond met witte tekst
Nooit het logo zonder border
Nooit de border draaien, punt moet altijd boven
Nooit het logo draaien, samen of apart. Punt altijd bovenaan
9
EXTRA ELEMENT
Soms is het handig om een extra element te hebben, voor bepaalde uitingen die je gaat maken. Het extra element moet herkenbaar zijn en simpel, zodat de link met het logo en de dienst snel gemaakt wordt. Voor YOUR FOOD BOOK hebben we de border als extra element gekozen, omdat deze heel sprekend is voor YOUR FOOD BOOK. Wanneer ons logo verkleind wordt in de applicatie, is de tekst bijna niet meer te lezen; hier komt dan het extra element voor in de plaats. Naast de applicatie is dit extra element ook te gebruiken voor alle andere uitingen. Het extra element is altijd de kleur groen met een witte achtergrond, waarbij de punt altijd omhoog wijst.
ALLERGIES PREFERENCES
PIZZA
11
PIZZA
TYPOGRAFIE
Aa
abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 10 .,/?!%&#$
Aa
abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 10 .,/?!%&#$
Aa
abcdefghijklmnopqrstuvwxyz 1 2 3 4 5 6 7 8 9 10 .,/?!%&#$
Brandon Light
13
Brandon Regular
Brandon Bold
Brandon Light wordt gebruikt voor kleine details, zoals in dit verslag de paginanummering. Binnen onze applicatie wordt het gebruikt voor: geen account, terms&conditions, tips, kooktijd, aantal personen etc. Lettergrootte 10 Brandon Regular wordt gebruikt voor het logo, maar ook voor alle broodteksten in dit verslag. Binnen onze applicatie wordt het gebruikt voor: receptuitleg, benodigdheden, uitleg en verdere broodteksten etc. Lettergrootte 12 Brandon Bold wordt gebruikt voor titels, zoals in dit verslag. Binnen de apllicatie wordt het gebruikt voor: tekst in knoppen, titels over foto’s, titels van gerechten, titels binnen broodteksten etc. Lettergrootte 12
14
KLEURGEBRUIK
R 88 G 185 B 71 100%
R 88 G 185 B 71 50%
R 255 G 255 B 255 100%
R 77 G 77 B 79 100%
R 88 G 185 B 71 20%
16
FOTOGRAFIE
Originele foto: zonder filters of teksten.
GREEN PEAS SOUP OF THE DAY
Foto filter RGB 77 77 79 Density 50% Tekst Brandon Bold 12pt Alleen gerecht in beeld, liefst van boven
18
MOODBOARDS
20
21
ICONEN
Om bepaalde elementen in de applicatie aan te kunnen geven, maken we gebruik van iconen. Deze worden voornamelijk in de donkergrijze kleur gebruikt, maar zijn ook mogelijk in de andere kleuren uit de styleguide. Hieronder een aantal voorbeelden.
23
MOCK-UPS