Inhoudsopgave. Inhoudsopgave

Transcriptie

1

2 Inhoudsopgave Inhoudsopgave Introductie Logo Opbouw Logo Afmetingen Het 5e Element Typografie Kleurgebruik Iconografie Beeldgebruik Grid opbouw Grid Gebruik

3 Introductie Introductie van Choklet De afgelopen jaren heeft snoepen een steeds slechtere naam gekregen. Ja mag niet meer ongegeneerd genieten van een lekkernij. Men wilt je altijd maar weer wijzen op de calorieën of hoe slecht het eten voor je is. Choklet ziet hier vanaf. Je moet weer kunnen genieten van je tussendoortje, daarom is deze applicatie ontworpen. Als een liefdesbrief richting iedereen die af en toe eens ongegeneerd wilt genieten. Maar net als een liefdesbrief komt dit niet zomaar op de mat vallen. Vaak is het afwachten tot het moment daar is. Zo ook in Choklet. Het is aan de gebruiker om een recept te kiezen en dit te maken. Maar zodra de lekkernij gemaakt is mag deze nog niet gegeten worden. Oh nee! Wij geloven dat je veel meer van iets geniet als je er naartoe leeft. Daarom bepaal jij wat je maakt, en wij wanneer je het eet. Zo ontstaat er een verlangen naar de traktatie en kan de gebruiker zichzelf op de proef stellen. 86% Van de mensen die dit recept hebben klaargemaakt konden zich inhouden, jij ook? De naam Choklet is ontstaan uit twee woorden: Chocolate wat het Engelse woordt voor Chocolade is. En het werkwoord To Choke in het Nederlands heeft dit woord twee betekenissen. Onderdrukt worden, wat slaat op het verlangen naar iets wat je nog niet mag eten. En verslikken wat ook terugslaat op het verlangen dat de gebruiker moet terugdrijven, wellicht met de passende watertanden. 3

4 Logo - Opbouw van het Logo Logo opbouw Het logo is opgebouwd aan de hand van een gemodificeerd Jupiter Bold font. De golven onder het logo symboliseren koffie en gesmolten chocolade. Het Jupiter Bold font Het Jupiter Bold font is aangepast om het logo op te bouwen. Bij de letter T zit origineel een aanhangsel. Deze is verwijderd om het logo beter te kunnen dienen. ChokleT AA JUpiTer Bold Abcdefgh ijklmnopq rstuvwxyz 4

5 Logo - Afmetingen van het Logo 12.5% 100% Logo afmetingen Het logo dient altijd de gepaste witruimte te krijgen. De witruimte dient 12.5% van de breedte en 50% van de hoogte te zijn in een vak rond het logo. Zie de afbeelding rechts voor een voorbeeld. 50% 100% Minimale weergave van het logo De minimale breedte van het logo is 150px. 150 px Applicatie icoon De minimale breedte van het logo is 150px. 5

6 Het 5e Element Origine van het 5e element. Het vijfde element van Choklet is het golfje dat zich onder het logo bevind. Gebruik van het 5e element Dit element wordt schaars toegepast binnen de applicatie. Enkel op vlakken met de kleur Dark Choklet. Voor betere weergave is de illustratie rechts in kleur aangepast. Het 5e element wordt op de onderste zijde van het vlak toegepast en begint links bovenin de onderste helft. Er worden altijd 2 golven aangebracht. Niet meer en niet minder. De precieze eindpunten en curve van de golf zijn dynamisch en mogen per instantie verschillen. Het kleurgebruik echter niet. De achtergrond is altijd Dark Choklet. De bovenste golf is altijd Brownie met een opacity van 80%. De onderste golf is altijd Black Coffee met een opacity van 60%. Het 5e element is niet gebonden aan het grid. 50% 100% Opacity 80% Opacity 60% Opacity 6

7 Typografie Scotch Scotch is het lettertype dat gebruikt wordt in zowel headers als knoppen. Dit lettertype is gekozen voor het elegante karakter. Dit lettertype is te vinden in 4 smaken. Scotch Text Medium Wordt gebruikt als kop binnen de recepten, encyclopedieën en het settingsscherm. Scotch Text Semibold Italic Wordt gebruikt op de communicatie schermen gebruikt als broodtekst. Scotch Text Semibold Wordt gebruikt voor de navigatie en als kop in de communicatie schermen. Scotch Text Bold Italic Wordt gebruikt bij de naam van een gerecht. Scotch Text Medium Scotch Text Semibold Italic Scotch Text Semibold Scotch Text Bold Italic TT Norms TT Norms wordt als contrasterend lettertype gebruikt tegenover Scotch. Het is gekozen voor de helderheid en leesbaarheid. Dit lettertype komt in 3 smaken. TT Norms Light Wordt gebruikt om cijfers te weergeven in interactieve elementen. TT Norms Regular Wordt gebruikt al broodtekst in de gehele app. TT Norms Medium Wordt gebruikt op knoppen en als kop om aan te geven waar de gebruiker zich in de app bevindt. (Filter / Koken etc.) TT Norms Light TT Norms Regular TT Norms Medium 7

8 Kleurgebruik Hoofdkleuren Choklet kent twee hoofdkleuren: Dark Choklet en Mokkafé. Deze kleuren worden gebruikt om het interface vorm te geven van de app. Dark Choklet wordt gebruikt als achtergrondkleur en Mokkafé voor tekst dat weergeven wordt op een Dark Choklet achtergrond. Mokkafé wordt tevens gebruikt voor iconen en pictogrammen. Dark Choklet Mokkafé #190D07 67 / 74 / 68 / / 7 / 25 #EBBC / 188/ / 30 / 52 / 1 Secundaire kleuren Almond is een kleur die gebruikt wordt voor alle broodtekst in de applicatie. Almond wordt ook gebruikt als achtergrond van pictogrammen. Green Latte is een kleur die Mokkafé vervangt wanneer een knop niet geselecteerd is. Stone Mug wordt gebruikt in sliders. Milky Cream is de kleur die gebruikt wordt als achtergrond in content van de app. Almond #947E6B 148 / 126 / / 41 / 50 / 25 Green Latte #6D / 97 / / 46 / 65 / 39 Stone mug #D1D1D1 209 / 209 / / 16 / 16 / 1 Milky Cream #FFFFFF 255 / 255 / / 0 / 0 / 0 Ondersteunende kleuren Brownie & Black Coffee zijn kleuren die subtiel gebruikt worden in grote vlakken met Dark Choklet om het 5e element aan te brengen. Pistachio & Strawberry zijn kleuren die met mate gebruikt worden om knoppen aan te geven die aan en uit staan, of goed en slecht betekenen. Brownie # / 8 / 4 77 / 74 / 64 / 92 Black Coffee #0A / 4 / 2 84 / 76 / 62 / 94 Pistachio #00A707 0 / 167 / 7 80 / 0 / 100 / 0 Strawberry #DC / 0 / 0 4 / 100 / 100 / 1 8

9 Iconografie Systeem iconen De systeem iconen worden gebruikt wanneer er een functie wordt aangeduid. Bijvoorbeeld het aan of uitzetten van spraakcommando's of het navigeren tussen pagina s. Standaard worden de iconen weergeven in de kleuren Dark Choklet wanneer het icoon op een Milky Cream achtergrond staat, en Mokkafé wanneer het op een Dark Choklet achtergrond staat. Tevens is er nog een variant in de kleur Green Latte. Deze wordt gebruikt bij iconen die aan of uit te zetten zijn, zoals het settings icoon op het hoofdmenu. Het standaard formaat van een icoon is 75% breedte van een grid van 1x1 of 2x2 blokjes. De iconen zijn simpel met maar 1 kleur en maximaal 2 losse vormen px px 75% Filter iconen Filter Iconen komen op 3 plekken voor in het ontwerp van Choklet. Ten eerste zijn dit de iconen die worden weergeven in het filterscherm (vandaar ook de benaming). Verder verschijnen ze in de encyclopedieën voor ingrediënten en Tools maar ook op de preview van de gerechten. Deze iconen zijn vrijer in de vorm dan de systeem iconen tevens mogen dit complexere vormen zijn. Er zijn 2 soorten filter iconen. De gereedschap iconen en de ingrediënten iconen. De ingrediënten iconen. Ingrediënten iconen zijn vrijgesteld van het kleurenpallet omdat de betekenis van het icoon belangrijker is dan de stijl van de app. Binnen het kleurenpallet is het moeilijk om betekenis over te dragen van ingrediënten die veelal afhankelijk zijn van kleur. De gereedschap iconen zitten wel vast aan een kleurpalet. Dit is een primaire kleur van Mokkafé en een accentkleur van Milky Cream. Alle filters iconen hebben een Almond achtergrond. Ingrediënten iconen Gereedschap iconen 9

10 Beeldgebruik Fotografie Fotografie is in Choklet erg belangrijk. Het is van groot belang dat de gebruiker watertanden krijgt van de fotografie. Het eten speelt altijd de hoofdrol in de foto s. Hierom is een hoog contrast en een groot diafragma van groot belang. Een foto is pas geschikt als het eten van het beeldscherm springt. Video Bij het gebruik van video is het belangrijk dat het proces centraal staat. Er mogen geen handelingen buiten beeld worden verricht en de focus ligt op de schaal of het werkveld. Een combinatie van frontale en vogel perspectieven kan een positieve bijdrage hebben bij het overbrengen van de uitleg voor de gebruiker. 10

11 Grid - Opbouw van het Grid px Grid opbouw 2732px px De applicatie is ontwikkeld voor de ipad Pro. Deze heeft een resolutie van 2732 x 2048 px. Het grid is opgebouwd uit 40 kolommen en 30 rijen. De afmeting van 1 cel is x px. Het grid is ontworpen met flexibiliteit in het achterhoofd. De applicatie is exclusief ontworpen voor het landscape view. Om deze reden is er ook geen portrait grid. 2048px 11

12 Grid - Gebruik van het Grid Gebruik van het grid 1 Het maken van het beslag Het grid dient als lijdraad gebruikt te worden voor alle elementen in de app. Elementen mogen op 3 manieren uitgelijnd worden: Het maken van het beslag Binnen de vakjes Op de randen Halverwege een vakje. Neem een grote schaal en breek hier 4 eieren in. Klop de eieren totdat er een even gele substantie overblijft. Voeg vervolgens de cacao poeder en het bloem toe. Blijf goed mixen totdat de substantie dik wordt. Bij hoge uitzondering mag er worden afgeweken van het grid om een element eruit te laten poppen. Tevens is het 5e element ook niet gebonden aan het grid. Wanneer gebruik ik welk opzetstuk? Bij een handmixer zijn over het algemeen kloppers (recht) en deeghaken (spiraal) meegeleverd. De kloppers zul je waarschijnlijk het Nodig bij deze stap 1 el bloem meest gebruiken. Deze zijn geschikt voor het opkloppen van slagroom 4 eieren en eiwitten, maar je kunt er ook prima een mooi cakebeslag mee mixen. 100g cacaopoeder Alle beslagen die niet al te stevig zijn dus. De deeghaken zijn juist wel voor de stevigere degen. Koekjesdeeg bijvoorbeeld, maar ook brooddeeg. Voor dit recept gebruik je dus beide opzetstukken. Meer weten over mixers? Schaal Mixer 12

13