Issuu on Google+

Maaike Bongers

Visual design

Styleguide

AH Slowfood


Inhoud Identiteit Tone of voice Logo Kleurgebruik Typografie Iconen en buttons Fotografie Grid gebruik Assets verklaring


Identiteit De app AH Slow biedt eerlijke en verantwoorde recepten aan via het Slowfood principe. Slowfood is voedsel dat lekker, puur en eerlijk is. De app heeft daarbij een ambachtelijke en smaakvolle uitstraling om aan te sluiten op het Slowfood principe. De AH Slowfood app staat voor ‘natuurlijk, puur en ambachtelijk’.


Tone of voice De tone of voice zal hetzelfde zijn als de Allerhande app die al op de markt is. De gebruiker wordt netjes aangesproken met ‘u’ en ‘uw’. Visueel gezien is de app clean zonder teveel tierelantijntjes. Hier is express voor gekozen zodat de app fijn is in gebruik. Zonder teveel afleidende aspecten kan de gebruiker makkelijker

vinden

wat

hij

of

zij

zoekt.

Ook zal er een duidelijke link zijn met de bestaande Allerhande app en hun visuele identiteit. Het is de bedoeling dat de gebruiker merkt dat het alleen al visueel gezien duidelijk van de Albert Heijn is.


Logo Het logo van slowfood is herkenbaar gebleven door de vorm van het bestaande logo te gebruiken. Het logo bevat het ‘huisje’, deze heeft een pattern overlay, en het woord ‘Slow’. Het zwart-wit logo heeft een hoog contrast. Hierdoor blijft de pattern te zien en valt deze niet weg. Het app-icoon heeft een ‘clean’ uitstraling, net als de app zelf. Met alleen de papieren pattern is het duidelijk dat het om de slowfood-app gaat, niet om bijvoorbeeld de originele Allerhand app. Het logo mag alleen gebruikt worden op een witte achtergrond. Hierdoor komt deze het mooiste uit. De afmetingen mogen niet worden verandert, het logo moet ik de goede proporties blijven. Bekijk hiervoor de volgende pagina. Het logo moet een witruimte van minimaal 8px aan alle kanten hebben.


Afmetingen:

Foutief gebruikt:

Slow


Kleurgebruik De hoofdkleur die gebruikt wordt is blauw (rechts). Deze kleur komt terug in het logo net als in de typografie voor titels en ondertitels. Voor de typografie worden verder de kleuren

RGB: 11 151 212 CMYK: 77 15 3 0 RGB: 64 13 12 CMYK: 40 91 86 64

zwart, wit en bruin (rechts) gebruikt. Het gestreepte papier wat gebruikt wordt als achtergrond heeft twee kleuren. Voor de fotografie is gekozen voor beeld met veel kleur erin. Hierdoor worden de pages levendiger zonder een chaotisch beeld te creeeren met teveel kleuren. In elke beeld komt de kleur groen in voor. Hierdoor wordt het ecologische aspect van slowfood benadrukt. Er mogen andere kleuren in de foto’s voorkomen. Wel is een voorwaarde dat er ook een onderdeel wit is in de foto, zoals de ondergrond. Hierdoor zal het beeld rustig blijven.

RGB: 231 200 153 CMYK: 6 16 34 0 RGB: 237 209 164 CMYK: 4 13 31 0


Typografie Er zijn verschillende lettertypes ge-

Effecten:

kozen. De reden voor het kiezen voor

- Bevel & emboss depht 100% opacity

een lettertype is voor een beter lees-

zwart, direction down

baarheid, of zodat het een speelser

- Inner schadow lineair burn 100%

beeld wordt.

opacity zwart, size 10px - Inner glow lineair burn 47% opaci-

Op het hoofdscherm is gekozen voor

ty zwart, source: Edge, size 4px

een groot lettertype (Kefa) waar ook de optie ‘Bold’ mogelijk was. Dit is

Wanneer een ondertitel (lettertype

nodig, omdat deze titel op een foto

Champagne & Limousines) op een

ge-plaatst wordt en de typografie door

gekleurde achtergrond geplaatst is zal

deze achtergrond weg zou kunnen

deze ook effecten krijgen:

vallen. Daarom is er ook gekozen voor

- Inner glow 20% opacity lichtgeel,

het gebruik van effecten:

source: edge, size 5px.

- Inner glow 48% opacity lichtblauw,

- Dropshadow van 100% opacity

size 5px

zwart, distance 1px, size 1px.

- drop shadow 100% opacity zwart,

Wanneer de ondertitel op een witte

distance 2px

achtergrond is geplaatst zal deze

De interlinie is 42pt.

geen effecten nodig hebben.

De tekst op buttons is van het

De broodtekst heeft het lettertype

lettertype Impact. Deze heeft dikke

Verdana, zonder effecten. De tekst is

letters die dicht op elkaar staan,

altijd zwart, m.u.v gekleurde achter-

ideaal om op kleine buttons te plaat-

gronden. Dan wordt de kleur wit

sen wat toch goed leesbaar moet zijn.

gebruikt. De interlinie is 18pt.


Homepage titel op hoofdfoto: Kefa bold, 42pt Tekst op buttons: Impact regular, 17pt

Titels: Champagne & Limosines, 24pt Subtitels: Champagne & Limosines, 21 pt Broodtekst: Verdana regular, 11pt


Iconen en buttons Om een duidelijk patroon vast te

Iconen:

houden zijn alle klik-buttons van hout gemaakt. Hierdoor is het voor de gebruiker duidelijk dat hij altijd op een houten button kan klikken. Het gebruik van het element hout hangt samen met de definitie van slowfood, namelijk het natuurlijke en ecologische aspect.

Buttons:


Fotografie De fotografie is een belangrijk aspect bij de slowfood app. Het brengt vrolijke kleuren op de pagina, maar het belangrijkste is dat de foto’s aantrekkelijk zijn om te zien zodat mensen getriggerd worden om dat recept te gaan bekijken. De fotografie die hoort bij deze app heeft een paar punten waar aan gehouden moet worden: - De foto’s moeten van boven- of schuinbovenaf genomen worden. Allleen het vooraanzicht is niet goed. - Er moet altijd iets van groen bij het eten op de foto te zien zijn. - De foto’s moeten in kleur zijn. Dit mogen vrolijke kleuren zijn maar niet hele felle of over-verzadigde kleuren. - Er is altijd iets in het wit aanwezig op de foto. Dit mag een bord of ondergrond zijn. - Het eten moet redelijk gekaderd zijn. De omgeving is niet erg belangrijk dus hoeft dit niet groots op de foto aanwezig te zijn.


Grid gebruik Voor het ontwerp is er gebruik gemaakt van een eigen grid. De witruimte is op elke pagina 39px. Het beeld is verdeeld in verschillende vlakken met verschillende groottes, maar wel zo dat de elementen mooi op elkaar aansluiten.


Assets verklaring De app bevat veel beeldmateriaal en onderdelen. Om deze op een goede en nette manier te ordenen is het belangrijk dat hier een consequent systeem achter zit. Het wegwerken van de assets ziet er dan zo uit: Pagina => submap => subonderdeel_ onderdeel

Zo ziet deze structuur eruit als deze is toegepast: home => menubalk => button_zoek home => carousel = > foto_hoofdfoto


Ontwerpdocument Maaike Bongers

Visual design AH Slowfood


Beargumentatie van keuzes Betekenis Slow food Wanneer je op google ‘slow food’ intypt, krijg je dit als betekenis: ‘De Slow Food (langzaam voedsel) beweging zet zich af tegen de zogenaamde fastfood en beoogt de culturele of traditionele keuken te behouden en daarmee ook het oorspronkelijk gebruik van gewassen, zaden, dieren en landbouwgebruiken van een regio. De beweging is opgezet door Carlo Petrini in Italië, maar heeft ondertussen meer dan 100.000 leden in 150 landen.’ Na ook onderzoek te hebben gedaan naar de betekenis, verschillende plaatjes en bestaande slowfood apps, heb ik mijn eigen mening gevormd naar wat slow-food inhoud en het design hiervan. De begrippen die na mijn onderzoek duidelijk naar voren komen rondom slowfood zijn: Natuurlijk, puur en ambachtelijk. In het ontwerp worden deze begrippen doorgevoerd. Gezien de biologische en ecologische aspecten rondom dit onderwerp heeft het een connectie met natuurlijke elementen. Daarom heb ik gekozen om deze natuurlijke elementen in de app te verwerken, zoals het gebruik van hout vooor buttons en iconen en gerecycled papier als achtergrond.

Kleuren Slow-food staat voor puur. Een puur design voor de app zal volstaan aan slow-food, het moet een rustig beeld creëeren. Door niet teveel kleuren te gebruiken zul je dit bereiken. Daarom is er als hoofdkleur weer de bekende Albert Heijn blauwe kleur gebruikt. Verder zullen er geen tot weinig andere kleuren gebruikt worden. In de fotografie is er ook gekozen voor een rustig beeld. De herkenbare punten die steeds terugkomen in elke foto zijn: - Een groene kleur in het gerecht - Belichting van bovenaf of schuinbovenaf - Geen sterke shaduw - Op het beeld staat alleen het gerecht met het servies, met soms een stukje van de ondergrond (aanrecht of tafelblad) Door voor deze punten te kiezen creeer je een evenwichtig en herkenbaar beeld.


Indeling app Er is gekozen voor een bewuste indeling voor de app. Het belangrijkste is om de klant meteen te laten inspireren. Door ze meteen in contact te laten brengen met een grote hoofdfoto met een mooi geserveerd gerecht erop, zal er interesse opgewekt worden. Het is een bewegende grote carousel in het midden, waardoor er aandacht naartoe gertrokken wordt van de gebruiker. Onderin de app is een vast beeld met verschillende gerechten met een korte beschrijving erbij. Door de korte beschrijving heeft de gebruiker al een idee wat het gerecht in houdt. Het menu staat rechts, hiervoor is gekozen zodat het logo beter uitkomt en het ruimtelijker is. De zoekbalk is ook aan de rechterkant samen met de favorieten, dit is het meest gebruikelijk en herkenbaar voor de gebruiker.

Eerste versies Ik ben begonnen met de buttons een donkerhouten kleur te geven. Ook het ‘gerecycled’ papier is hier nog wat donkerder. Later heb ik dit verandert in wat lichtere tinten, zodat het uiterlijk wat frisser werd. Ook de menu knop staat hier aan de rechterkant. Ik kon geen goede plek vinden voor deze knop en zat veel te schuiven. Uiteindelijk heb ik besloten dat de 1, 2, 3, 4, 5, 6 buttons niet nodig zijn aangezien de carousel vanzelf schuift en je erdoor kan sliden. Na deze knoppen te hebben verwijderd kon ik in het midden bovenaan het logo kwijt. Hierdoor kreeg ik linksboven plek voor

Logo Het logo moet herkenbaar zijn voor klanten dat het een app is van de Albert Heijn. Daarom is er gekozen voor de vormen van het bekende bestaande logo. Maar het logo moet wel staan voor slow-food. Het bestaande logo is zo omgevormd dat het een duidelijke connectie heeft met de app. Het blauwe ‘huisje’ in het bestaande logo heeft een nieuwe pattern gekregen; het gerecycled papier dat ook terugkomt in de app als achtergrond. Om het duidelijker te maken dat het om de slow-food app gaat, is er in blauwe letters Slow’ bij geschreven. In het blauw, de herkenbare kleur van Albert Heijn, en in de typografie die bij de app hoort.

de menu-knop, wat in veel applicaties voorkomt en dus gebruikelijker is. Ik heb gekozen voor het mobiel-menu zodat het een app uiterlijk kreeg. Ook de zoekbalk is verandert naar alleen een icoon. Wanneer men op de icoon drukt dan verschijnt er een balk waarin de zoekopdracht getypt kan worden. Door andere mensen mijn app te laten zien en te laten doorlopen, kreeg ik goede en heldere feedback. Een bijvoorbeeld is of de buttons wel duidelijk waren en of punten vanzelfsprekend waren.


Voor:

Na:


Voor:

Na:


Ik ben met het uitdeindelijke ontwerp verder gegaan in de volgende schermen. Wel ben ik op het einde het logo gaan veranderen. Het woord ‘slow’ is namelijk nauwelijks te lezen. Het idee van een slak vond ik erg passen bij Slowfood. Om dit in het logo te verwerken leek mij wel gepast, maar helaas kwam dit wat kinderlijk over. Daarom heb ik voor een woordlogo gegaan en heb ik de slak verwerkt in de laadanimatie.


AH Slow styleguide en ontwerpdocument