Design guidelines

Workshop : Prototyping

Aanleiding

De design onderzoeken en het gebruikersonderzoek komt hier samen in een eerste versie van de design guidelines. Alle designen regeltjes en inzichten die opgedaan zijn vanuit diverse inspiratie bronnen worden samengevoegd tot een handleiding om de uiteindelijke design uit te voeren. Ook wordt er gekeken naar een aantal bestaande bronnen vanuit guidelines zoals Google Material Design.

Onderzoeksvraag:
Welke design eisen moet het Koffiekaartje aan voldoen?

Doelen

  • Lettertype grootte vastleggen
  • Grid vastleggen
  • Hoof- en steunkleuren selecteren

Resultaten

Het grid is ontstaan op basis van het stappen systeem uit het design pattern onderzoek. Omdat een vijftienpuntsgrid beter aansluit bij mijn ontwerp maak ik niet gebruik van dezelfde intervallen als Airbnb.

De lettergroottes zijn afkomstig van Google’s ontwerpsysteem Material Design. Ik gebruik overal Google Fonts in mijn ontwerpen omdat het gemakkelijk online te implementeren is en er geen copyrightrecht op rust. Ik gebruik Google Fonts bewust en wil vervolgens¬† bij Horekaartje verschillende fonts gebruiken die passen bij het concept. Koffiekaartjes hebben namelijk een eleganter lettertype dan Bierkaartjes. Omdat het kopen van de rechten op lettertypen veel geld kan kosten, is het goedkoper om de gratis lettertypen van Google te gebruiken. Google heeft ook een tool genaamd Type Machine waarmee je de optimale lettergrootte voor elk lettertype kunt berekenen. Deze tool converteert lettergroottes naar de nieuwste webvereisten van Google Material.

Foto: Lettertype font-size advies voor het Merriweather en Inter lettertype

In de guidelines staan nu de kleuren en de lettertypes van het concept Koffiekaartje. Per Horekaartje concept gaat dit nog verschillen. Bij een Bierkaartje hoort namelijk een andere huisstijl dan bij een Koffiekaartje. De kleuren zijn een verbetering van de huidige Koffiekaartje kleuren. Deze zagen er echter nogal wat outdated uit en oogde erg grauw. Door het contrast een beetje terug te draaien krijg je een mooi eigentijds pastelkleurtje wat zorgt voor wat frisheid.\

Foto: Basis guidelines

Conclusie

Er is een lijst met font-sizes ontstaan via de Google  tool die gelijk via SCSS ingeladen kunnen worden. Dit documentje vormt een goede basis voor het uiteindelijke ontwerp. Zo kan er gemakkelijk een meerder pagina ontwerp gebouwd worden wat dezelfde look &  feel heeft. Wellicht moet tijdens het ontwerp proces nog wat getweaked worden omdat bepaalde groottes of kleuren niet mooi ogen.

Bronnen

Material Design, Google 2021

Geraadpleegd 2 december 2021 van https://material.io/