Bewust Huisstijl
Inhoudsopgave Inleiding Logo Logo gebruik Logo misbruik Logo app Kleuren Typografie Grid Beeld gebruik Beeld misbruik Beeld toepassing Buttons & iconen
Styleguide Bewust Pagina 2
3 4 5 6 7 8 9 10 11 12 13 14
Inleiding
Het concept Bewust is een Slow Food app van de Albert Heijn. De app bied een breed en gevarieerd aanbod aan Slow Food recepten, maar er kunnen ook eigen recepten toegevoegd worden aan ‘mijn kookboek’. Samen met de favorieten die je opgeslagen hebt, kun je zo een eigen kookboek maken. Op de homepage helpt de ‘receptenzoeker’ je bij het zoeken naar een recept waar je zin in hebt of een recept met ingrediënten die je nog in je koelkast hebt liggen. Bij de recepten is een lijstje met ingrediënten en benodigdheden te vinden en je kunt notities maken wanneer je nog eigen toevoegingen hebt aan het recept. De ingrediënten kun je per stuk of allemaal tegelijk op je boodschappenlijstje zetten, wat natuurlijk handig is voor het boodschappen doen. Deze kun je eventueel nog aanvullen met de overige producten die je nodig hebt. Daarnaast bevat de app een ingebouwde kookwekker en handige video’s waarin de bereiding voor wordt gedaan en je zo niet steeds je iPad erbij hoeft te pakken en moet lezen. Styleguide Bewust Pagina 3
De vormgeving De app als het ware een schoolbord, door het gebruik van de achtergrond en het font voor de koppen. Het idee hierachter is dat de app een soort verzamelplek is van bestaande recepten en je eigen recepten die je kan toevoegen aan de app. Je kunt steeds meer nieuwe recepten toevoegen maar ook notities maken bij de bestaande recepten wanneer je ingrediënten of bereidingswijze hebt gevonden waarmee het gerecht nog lekkerder wordt. De groene kleuren steken goed af tegen de achtergrond. Groen is een natuurkleur en staat voor de natuurlijke, gezonde en pure eigenschap van Slow Food. Door rustige kleuren te gebruiken krijgt de app een pure uitstraling. Naast het wat speelse font voor de koppen is het font voor de lopende tekst wat rustiger gehouden om zo weer een rustige uitstraling te creëren. Het font leid zo ook niet af van de afbeeldingen. Waar het uiteraard allemaal om draait. Het sfeervolle mooie beeld van de recepten moet aantrekkelijk zijn voor het oog (en maag).
De styleguide In deze styleguide worden de verschillende visuele onderdelen van de Bewust app toegelicht. Logo, kleurgebruik, typografie, beeldgebruik, grid en buttons & iconen. Door middel van plaatjes en begeleidende tekst moet duidelijk worden hoe deze verschillende onderdelen geplaatst moeten worden en hoe niet, zodat er geen verschil in stijl kan ontstaan en de app altijd dezelfde uitstraling zal hebben ook wanneer er nieuwe onderdelen worden toegevoegd.
Logo
Het Bewust logo is gebaseerd op het logo van Albert Heijn. Dit omdat de app onderdeel is van Albert Heijn. De blauwe kleur is vervangen door een afbeelding van een krijtbord, passend bij de app, met daaromheen een witte outline. Het font van het originele AH logo is behouden (Frutiger Black), maar de tekst is vervangen door Bewust. Door het behouden van het font en beeldmerk en ondanks de aanpassing van de tekst en kleur blijft het logo herkenbaar. Opbouw logo 1 Het AH logo moet op gelijke hoogte staan met de tekst. De ruimte tussen de outline en de tekst moet even groot zijn als de poot van het AH logo. De tekst moet de helft zijn van de lengte van het rechte stuk van de poot van het AH logo. (Zie afbeelding 1.) Opbouw logo 2 De afstand tussen de bovenkant van de ‘t’ en de onderkant van het beeldmerk moet gelijk zijn aan de dikte van de witte outline. (Zie afbeelding 2.)
Styleguide Bewust Pagina 4
1.
Bewust 2.
Bewust
Logo gebruik
Het Bewust logo van Albert Heijn mag op twee manier gebruikt worden. Het beeldmerk met rechts daarvan ‘Bewust’ of de wat compactere versie met het beeldmerk boven en daaronder ‘Bewust’. Waar mogelijk moet eerst genoemde gebruikt worden. Wanneer de situatie zich voordoet dat het logo in een rechterbovenhoek geplaatst moet worden mag de compacte versie gebruikt worden evenals in andere situaties waarin deze beter uit komt. Dit is naar eigen inzicht.
Standaard logo
Logo voor witte achtergrond
Bewust
Bewust
Het logo met de witte outline en tekst is het standaard logo van de Albert Heijn Bewust app. Alleen wanneer het logo op een witte achtergrond geplaatst moet worden mag gebruik worden gemaakt van het logo met de grijs/groene tekst en hier gelden de zelfde regels voor het gebruikt van het compacte logo.
Bewust Styleguide Bewust Pagina 5
Bewust
Logo misbruik Het logo mag op geen enkele wijze aangepast of vervormd worden anders dan de afgebeelde logo’s op de voorgaande pagina.
1. Het logo mag niet smaller gemaakt worden 2. Het logo mag niet platter gemaakt worden 3. De tekst mag niet in een andere kleur gezet worden anders dan eerder afgebeelde kleuren 4. Het beeldmerk mag niet anders gezet worden dan wit voor het AH-logo en de krijtbord afbeelding voor de opvulling 5. Bij gebruik van het logo anders dan op een witte achtergrond mag de witte outline niet weggelaten worden 6. De tekst mag nooit weggelaten worden
Styleguide Bewust Pagina 6
1.
2.
Bewust
Bewust
3.
4.
5.
6.
Logo app
Het logo van de app zal altijd afgebeeld worden zoals in de afbeelding hiernaast. Een witte achtergrond met het beeldmerk hierin, zonder tekst. De afbeelding dient altijd op deze wijze afgebeeld te worden. Er mogen geen kleur aanpassingen gedaan worden. Dit om het beeld herkenbaar te houden. Wanneer er de mogelijkheid is voor begeleidende tekst, dient altijd de naam van de app genoemd te worden.
Styleguide Bewust Pagina 7
Kleuren
WIT Deze kleur wordt gebruikt als achtergrondkleur voor grote oppervlaktes of vlakken die voor een drukke/kleurrijke achtergrond geplaatst moeten worden. PMS P 179-15 C Deze wordt gebruikt voor de achtergrond in het menu. PMS P 152-10 C Deze kleur wordt gebruikt voor de tabjes die actief zijn en als opvulkleur voor knoppen. PMS P 177-3 C Deze kleur wordt gebruikt voor tabjes die niet actief zijn en voor het vak waarin de bereidingstijd/aantal personen vermeld wordt. PMS P 177-2 C Deze kleur wordt gebruikt wanneer er nog geen foto is geüpload voor het eigen recept. En dient voor opvulling van lege vakken. Teksten mogen alleen in zwart of wit gezet worden. Wanneer de tekst over PMS P 179-15 C gezet wordt moet dit wit zijn, bij de andere kleuren in het zwart. Styleguide Bewust Pagina 8
WIT CMYK 0/0/0/0 RGB 255/255/255 HEX #ffffff
PMS P 179-15 C CMYK 0/0/0/95 RGB 54/52/52 HEX #363434
PMS P 152-10 C CMYK 16/0/22/8 RGB 197/211/186 HEX #c5d3ba
PMS P 177-3 C CMYK 41/29/37/0 RGB 164/165/14 HEX #a4a593
PMS P 177-1 C CMYK 31/22/28/0 RGB 183/183/168 HEX #b7b7a8
Typografie
Chalkduster Mag alleen worden gebruikt voor koppen in 30 pt. Helvetica Neue Regular Wordt gebruikt voor de lopende tekst in 12, 16 of 20 pt. De tekst in de tabjes wordt in 12 pt. gezet. De namen van de recepten en overige tekst in 16 pt. Alleen wanneer op een recept geklikt wordt mag de naam van het recept in 20 pt. worden gezet. Helvetiva Neue Thin Wordt in 16 pt gebruikt voor tekst die minder belangrijk is en mag alleen in combinatie met Helvetica Neue Regular worden gebruikt om zo een soort hiërarchie in de tekst aan te brengen of om aan te geven waar de gebruiker iets kan invullen of toevoegen. Indie Flower Mag alleen worden gebruikt voor extra informatie voor de gebruiker om op een bepaalde functie in de app te wijzen en moet altijd in 14 pt. gebruikt worden. Teksten mogen alleen in zwart of wit gezet worden (zie kleuren). Styleguide Bewust Pagina 9
Chalkduster ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*() Helvetica Neue Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*() Helvetica Neue Thin ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*() Indie Flower ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()
Grid
20 px
De app is 1024 px bij 768 px en is opgebouwd uit 12 kolommen beginnend vanaf de marge en 9 rijen beginnend vanaf de rand. De content van de app moet binnen de marges geplaatst worden. De marge bevind zich 30 px van de zijkanten, 40px van de top en 20 px van de onderkant. De witruimtes tussen de rijen en kolommen is 20 px. Het ontwerp dient zo goed mogelijk te passen in de kolommen en rijen om het ontwerp rustig en overzichtelijk te houden.
20 px
30 px
768 px
1024 px
Styleguide Bewust Pagina 10
40 px
20 px
Beeld gebruik In de app moet gebruik worden gemaakt van goede kwaliteit afbeeldingen. Wanneer het een receptfoto betreft moet het product goed zichtbaar/herkenbaar zijn. De foto’s moeten bij voorkeur zo minimaal mogelijk achtergrond laten zien. De afbeeldingen moeten rijk aan kleur zijn, scherp, sfeervol en aantrekkelijk voor het oog (en maag).
Styleguide Bewust Pagina 11
Beeld misbruik 1. Afbeeldingen mogen niet plat gemaakt worden 2. Afbeeldingen mogen niet smaller gemaakt worden 3. Afbeeldingen mogen niet op een dusdanige manier uitgesneden worden dat het product niet meer herkenbaar is 4. Afbeeldingen mogen niet transparant of anderszins bewerkt worden. De kwaliteit van het beeld moet behouden worden. De afbeeldingen mogen subtiele op kleur en licht gecorrigeerd worden, mits de kwaliteit hiermee verbeterd wordt.
Styleguide Bewust Pagina 12
1.
2.
3.
4.
1. Afmeting afbeelding ‘recept’ 2. Afmeting afbeelding ‘home’ 3. Afmeting afbeelding ‘favorieten’
1. 242,667 px
Beeld toepassing
964 px
211,379 px
2.
307,983 px
155,111 px
3.
226 px
Styleguide Bewust Pagina 13
Buttons & iconen 1. Icoon voor favorieten. Wanneer de gebruiker een recept wil toevoegen aan de favorieten verschijnt deze bij favorieten door middel van het aanklikken van het hartje en veranderd deze in een gevuld hartje. Wanneer men een recept weer uit de favorieten wil halen kan dit door opnieuw op het hartje te klikken en deze zal weer leeg worden 2. Het fototoestel is te vinden bij het kopje ‘mijn kookboek’ hiermee kan de gebruiker een foto maken van een eigen gerecht welke toegevoegd kan worden aan de app 3. Dit icoon verwijst naar een video met uitleg over de bereiding 4. Dit icoon verwijst naar een ingebouwde kookwekker in de app 5. Het pijltje zorgt er voor dat de gebruiker verder en weer terug kan in het stappenplan bij een recept 6. Dit is een voorbeeld van een button zoals deze gebruikt wordt in de app
1.
2.
3.
4.
5.
6. Styleguide Bewust Pagina 14
toevoegen
