styleguide Albert Slow Styleguide

Transcriptie

1 styleguide 1

2 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

3 Inhoud Albert Slow Logo Icoon voor App Store Kleurenschema Typografie Typografie toegepast Grid Grid toegepast Buttons & iconen Fotografie Naamgevingssysteem assets

4 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

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

6 Kleurenschema Hoofdkleuren Container body, tekst en iconen op buttons Menubalk, tabs Buttons, geselecteerde iconen Menu, naast andere 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 100% 10% #474b5f R71 G75 B95 C75 M67 Y43 K28 100% 10% #fceeef R254 G238 B237 C0 M7 Y3 K0 6

7 Typografie Montserrat Regular aabbcc ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz,;.-?!=-* Montserrat Bold aabbcc ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz,;.-?!=-*

8 Typografie toegepast Bodytekst: Montserrat Regular 0.95em #2d3e500 met lineheight van 1.25em Belangrijkste tekst op afbeelding Montserrat Bold 3.1em #2d3e500 of #fffff in hoofdletters Kopjes: Montserrat Bold 0.95em #2d3e500 Overige tekst op afbeelding Montserrat Bold 1.2em #2d3e500 of #fffff Buttons en navigatie: Montserrat Bold 1.2em #fffff Grote buttons: Montserrat Bold 2.45em #fffff... van de dag recepten of producten in hoofdletters om op te laten vallen 8

9 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

10 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

11 Grid toegepast 11

12 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

13 Buttons & iconen toegepast 13

14 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

15 Buttons & iconen toegepast 15

16 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 Home... van de dag Receptresultaten 1 Receptresultaten 2 Recept & product Boodschappenlijst & winkelmand thumbnails Anderen bekeken ook afbeeldingen 1536px x 984px 512px x 492px 2048px x 1496px 512px x 278px 1536px x 856px 128px x 128px 256px x 192px 16

17 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 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