styleguide Albert Slow Styleguide

styleguide

Albert Slow Styleguide

1

Inleiding

Albert Heijn wilde voor de iPad app ‘Albert Slow’ een ontwerp dat echt aansprekend en wervend is zonder dat gebruiksvriendelijkheid en informatie voorziening in het gedrang zou komen. Ze stonden open voor nieuwe ideeën. De relatie met het bestaande beeldmerk diende behouden te blijven al was er ruimte voor een eigen interpretatie. Zuiver, smaakvol, vooruitstrevend zijn een aantal van de design trefwoorden waarmee gewerkt diende te worden. Concurrenten van de app werken veelal met ambachtelijke ontwerpen en zijn niet vooruitstrevend. Men begint steeds meer te accepteren dat de fysieke wereld niet verwerkt hoeft te worden in het ontwerp van apps en websites. Daarom is er bij het ontwerpen van deze app gekozen voor het zogenoemde ‘flat design’. Kenmerken van een flat design zijn het ontbreken van gradiënts, schaduwen en andere aandachttrekkende details. Een heel minimalistisch ontwerp dus. Hierdoor ontstaat er een rustig, makkelijk lees- en bekijkbaar beeld. Inhoud komt tot zijn recht en zal centraal staan, in plaats van ondergeschikt te zijn aan het ontwerp. Hiermee onderscheidt het ontwerp zich van de concurrentie en sluit het aan bij de design trefwoorden; zuiver, smaakvol en vooruitstrevend. De app is in eerste instantie ontworpen voor retina iPad schermen. Door alles 50% te schalen, kunnen deze ontwerpen ook gebruikt worden voor de iPad 1 en 2 die nog geen retina scherm hebben. De maten die aangehouden zijn in deze styleguide gelden voor retina iPad schermen.


2

Inhoud

Albert Slow Logo

4

Icoon voor App Store

5

Kleurenschema

6

Typografie

7

Typografie toegepast

8

Grid

9

Grid toegepast

11

Buttons & iconen

12

Fotografie

16

Naamgevingssysteem assets

17


3

Albert Slow Logo

Logo Het logo voor ‘Albert Slow’ bevat het bestaande beeldmerk van Albert Heijn waarin slow schuingedrukt staat. De gebruikte typeface is hetzelfde als die van het Albert Heijn logo, namelijk ‘Frutiger LT Std’. Het logo moet genoeg contrast hebben ten opzichte van de achtergrond. Opbouw

Variaties


4

Icoon voor App Store

Het icoon voor in de App Store is een kookboek met daarop het beeldelement van het Albert Slow logo.


5

Kleurenschema

Hoofdkleuren

Container body, tekst en

Menubalk, tabs

iconen op buttons

Buttons,

Menu, naast andere

geselecteerde iconen

grijs/blauw

#ffffff

#2d3e50

#dd5561

#ffffff

R255 G255 B255

R46 G61 B80

R222 G85 B97

R255 G255 B255

C0 M0 Y0 K0

C84 M69 Y47 K39

C9 M82 Y55 K0

C83 M66 Y43 K29

Secundaire Kleuren - Te gebruiken bij selectie

#474b5f 100%

10%

R71 G75 B95 C75 M67 Y43 K28

#fceeef 100%

10%

R254 G238 B237 C0 M7 Y3 K0


6

Typografie

Montserrat Regular

aAbBcC

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz,;.-?!=-*

0123456789

Montserrat Bold

aAbBcC

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz,;.-?!=-*

0123456789


7

Typografie toegepast

Bodytekst:

Belangrijkste tekst op afbeelding

Montserrat Regular

Montserrat Bold

0.95em

3.1em

#2d3e500

#2d3e500 of #fffff

met lineheight van 1.25em

in hoofdletters

Kopjes:

Overige tekst op afbeelding

Montserrat Bold

Montserrat Bold

0.95em

1.2em

#2d3e500

#2d3e500 of #fffff

Buttons en navigatie:

Grote buttons:

Montserrat Bold

Montserrat Bold

1.2em

2.45em

#fffff

#fffff ‘... van de dag’ recepten of producten in hoofdletters om op te laten vallen


8

Grid

Het grid voor de Albert Slow iPad app bestaat uit gebieden van 128 pixels breed en hoog. Omdat er gekozen is voor een statusbar bovenin, komen deze gebieden in de hoogte niet precies uit. Er blijft in de app altijd wat ‘vrije’ ruimte over door bijvoorbeeld fotografiegebruik en containers, dus dat is gemakkelijk op te lossen.

128px

128px


9

Grid

Bij het grid is rekening gehouden met het omzetten naar verticaal. Het zijpaneel waar onder andere een submenu en extra informatie te vinden is, is altijd rechts en heeft een breedte van 512 pixels. Het overgebleven gebied links, is precies de breedte van de app verticaal (1534 pixels).

512px


10

Grid toegepast


11

Buttons & iconen

De buttons zijn altijd hoekig en opvullend met daarop waar mogelijk een (wit) icoon eventueel aangevuld met tekst. De buttons zijn altijd minimaal 128 pixels breed en hoog en vallen precies in het grid.

Bij aanraking veranderd de button van kleur; van rood naar blauw/grijs of andersom.

Bij selectie van een tab, krijgt de button de selectiekleur met daarop het icoon in het rood en een balk met pijl aan een zijkant.

Als buttons van dezelfde kleur elkaar raken, komt er een 1 pixel brede grijs/ blauwe of witte lijn tussen met een transpirantie van 25%.

Social media buttons zijn altijd 128 pixels breed en hoog met de kleur van de desbetreffende social media. Daarop staat het logo icoon in het wit.


12

Buttons & iconen toegepast


13

Buttons & iconen

In contrast met de rechthoekige buttons hebben iconen een ronde uitstraling, op een iconen met alleen maar rechthoeken na. De iconen zijn minimalistisch en monotone. Waar mogelijk krijgt de icoon een ‘glans’-strookje. Door deze elementen krijgen de iconen iets onderscheidends mee en zijn ze consistent.

De grootte van de iconen hangt af van de grootte van de button waarin de icoon staat. Bij een buttonhoogte van 128 pixels krijgt het icoon een maximale hoogte of breedte van 60 pixels. Bij een buttonhoogte van 256 pixels krijgt het icoon een maximale hoogte of breedte van 80 pixels. Bij receptenzoeker met 3 kolommen krijgt het icoon een maximale hoogte of breedte van 150 pixels. Bij receptenzoeker met 2 kolommen krijgt het icoon een maximale hoogte of breedte van 250 pixels.


14

Buttons & iconen toegepast


15

Fotografie

De foto’s die gebruikt worden in de Albert Slow iPad app zijn net als het ontwerp zuiver, smaakvol, vooruitstrevend. Het zijn professonele foto’s die fris ogen. De foto hoeft niet altijd netjes en strak: koken is mensenwerk en soms wat ’chaotisch’. En dat geldt ook voor het snijden, hakken en raspen van de ingrediënten. Het is daarom realistisch als er eens wat naast het bord ligt. Zo wordt de foto levendiger en real-life. Laat waar mogelijk het rood van de huisstijl er zo veel mogelijk uitspringen, zonder het nep eruit te laten zien. Het onderwerp van de afbeelding mag nooit verstopt zijn achter een button. Afmetingen van de afbeeldingen verschillen per pagina. De foto’s moeten de overgebleven ruimte opvullen, het liefst zo groot mogelijk. Hier een aantal afmetingen per pagina: Homeslider

1536px x 984px

Home ‘... van de dag’

512px x 492px

Receptresultaten 1

2048px x 1496px

Receptresultaten 2

512px x 278px

Recept & product

1536px x 856px

Boodschappenlijst & winkelmand thumbnails

128px x 128px

‘Anderen bekeken ook’ afbeeldingen

256px x 192px


16

Naamgevingssysteem assets

De assets mogen geen kapitalen en spaties bevatten. Gebruik in plaats van een spatie een underscore. In de map ‘all images’ staan alle Photoshop en Illustrator bestanden. In ‘iPad klaar’ staan alle logo’s, afbeeldingen en iconen gebruiksklaar voor retina en non-retina iPads. Het onderscheidt tussen retina en non-retina wordt gemaakt door bij retina assets @x2 toe te voegen achter de naam. Een aantal elementen worden door de gehele app meerdere malen gebruikt en zijn in een aparte map geplaatst. Deze elementen zijn: Header, Menu, Social Media en Video. De overige mappen zijn de verschillende pagina’s met daarin alle afbeeldingen die aangegeven worden met image_naam.jpg en iconen die aangegeven worden met icoon_naam.png. Tabjes worden aangegeven met tab_select_ omgeving.png. Op de homepagina staan bewerkte plaatjes in de carrousel, die worden aangegeven met carrousel_naam.jpg. Bij de receptenzoeker zijn meerdere tabjes waarin veel iconen staan die allemaal in een aparte map zitten om overzicht te behouden. Bij receptresultaten zijn twee resultaat mogelijkheden mogelijk. Deze twee zijn onderverdeeld in twee mappen.


17

styleguide Albert Slow Styleguide

Recommend Documents