Design Principles

Wanneer je begint met een design van een site, waar start je dan mee?

De bovenkant van een pagina
De layout
De features

Correct!

Bijvoorbeeld: Wanneer je een applicatie wilt bouwen om vliegtuigtickets te verkopen:

Start met een feature, niet met een layout

Start met een feature, niet met een layout

Bijvoorbeeld: Wanneer je een applicatie wilt bouwen om vliegtuigtickets te verkopen:

Start met een feature, niet met een layout

Alles hierrond kan je in het begin dus beschouwen als extra

Je hebt een feature in gedachten, wat doe je als volgende?

Ruwweg schetsen hoe de feature eruit gaat zien
Kleurenpallet, typografie en iconografie vastleggen

Correct!

Details komen later

Wanneer je met een dikke zwarte stift aan het schetsen bent, kan je je niet verliezen in details.

Details komen later

Eens je van ruw schetsen overgaat naar een meer high-fidelity wireframe, probeer dan je design goed te hebben nog zonder kleur

Wanneer schakel je van wireframing naar designen

Van zodra het idee helder genoeg is.
Wanneer de wireframes klaar zijn van alle pagina's

Correct!

Hoe ziet een eerste design er uit?

Correct!

Extra features komen later

Kies een persoonlijkheid

Kies een persoonlijkheid

Een serif font zorgt voor een elegante / klassieke look

Kies een persoonlijkheid

Een sans-serif font met afgeronde hoekjes zorgt voor een speelse look

Kies een persoonlijkheid

Een gewone sans-serif font zorgt voor een neutraal gevoel

Kies een persoonlijkheid

Blauw is de meest neutrale kleur van allemaal

Kies een persoonlijkheid

Goud kan duur uitstralen

Kies een persoonlijkheid

Roze wordt ervaren als speels

Wat is de meest neutrale kleur voor een download-knop?

Geen correct antwoord

Limiteer je eigen keuzes

Er bestaat een gigantisch spectrum aan mogelijkheden in ieder deelbeslissing bij het designen.

Is iets 24 pixels of 25 pixels?

Welk blauw is het beste?

Limiteer je eigen keuzes

Beslissingen nemen is ongelofelijk moeilijk als er meerdere goeie antwoorden mogelijk zijn.

Maak een systeempje wanneer er meerdere juiste antwoorden bestaan

Limiteer je eigen keuzes

Bij kleuren: Bepaal je kleurenpallet op voorhand: Ofwel bepaal je 10 verschillende shades van een kleur.

Of je gaat op zoek naar een goeie set kleuren via een tool zoals Adobe Color

Limiteer je eigen keuzes

Bij typografie: Gebruik een type scale generator of beperk zelf de mogelijke opties.

Wat is op de volgende slide de belangrijkste informatie?

Je krijgt maar 10 seconden om de slide te bekijken.

Wat was de belangrijkste informatie op de vorige slide?

Nu doen we even dezelfde oefening, maar de volgende slide is beter gedesigned

Nu krijg je maar 5 seconden...

Wat was de belangrijkste informatie op de vorige slide?

Wie legt dit verschil uit?

Typografie: Een titel kan minder hoog gaan in font-size door een grotere font-weight.

Aandacht controleren

Typografie: Aandacht wegtrekken van secundaire tekst kan adhv een

lichter kleur

Aandacht controleren

Typografie: Limiteer jezelf op

2 of 3 verschillende kleuren
2 font-weights
- 1 voor normale tekst (400 of 500)
- 1 voor zwaardere tekst (600 of 700)

Lichtere font-weights kunnen voor grote titels

Aandacht controleren

Aandacht controleren

Kleur: In plaats van vuurwerk toe te voegen, kan je ook kiezen voor het omgekeerde.

Aandacht controleren

Kleur: In plaats van vuurwerk toe te voegen, kan je ook kiezen voor het omgekeerde.

Aandacht controleren

Kleur in oppervlakte: grotere vlakken van hetzelfde kleur voelen donkerder:

Aandacht controleren

Kleur in oppervlakte: grotere vlakken van hetzelfde kleur voelen donkerder:

Gebruik geen lineaire schaal, kiezen tussen 16px en 20px is gemakkelijk.

Kiezen tussen 100px en 104px niet echt...

Ruimte- en afmetingen

Passen deze kleuren bij elkaar?

#03369E #507DD7 #9FB9ED

Ja
Nee

Correct!

Gebruik HSL notatie,

geen Hexadecimaal

Met saturatie-waarden experimenteren?

Of met de lightness experimenteren?

Start een kleurensysteem

Start bij het vastleggen van 8 tot 10 grijswaarden.

Dit hoeft niet van puur zwart (#000) naar puur wit (#FFF) te gaan.

Kies je hoofdkleur

Dit is het kleur die je wilt dat jouw product draagt. Dit kleur zal prominent aanwezig zijn.

Tip: kies een kleur die goed voelt om als achtergrond van een knop te gebruiken

Kies de donkerste en lichtste tint van dat hoofdkleur

Tip: een popup bericht met deze 2 tinten gecombineerd kan een handige manier zijn om deze kleuren te vinden.

Vind de tint ertussen

Tip: Hier is geen mathematische formule voor

Hoe vind ik een lichtere tint van de hoofdkleur?

Verander de Hue (HSL)
Verander de Saturation (HSL)
Verhoog de Lightness (HSL)
Alle bovenstaande

Correct!

Verander de Lightness

Dit spreekt het meest voor zich, hoe meer lightness, hoe lichter de tint!

Een probleem is hier wel dat lichtere kleuren wat flets er kunnen gaan uitzien.

Verander de Saturation

De kleurervaring betert als we de saturatie het laagste houden bij een lightness van 50%

Maar wat doen we als de hoofdkleur reeds een saturatie van 100% heeft?

Verander de Hue

Wanneer de hoofdkleur reeds een saturatie van 100% heeft, kan je ook het kleur lichter doen aanvoelen door de hue te veranderen richting 60 graden, 180 graden of 300 graden (wat er het

dichtste bij ligt)

Gebruik een combinatie

Enkele voorbeelden:

Voeg enkel accentkleuren toe wanneer je die nodig hebt.

https://coolors.co

Flipping the contrast

Wanneer witte tekst op een donkere achtergrond niet goed zit...

... gebruik dan een donkere tint voor de kleur en een lichte tint voor de achtergrond

Waarom diepte creeren

Diepte simuleren in je design is leuk om bepaalde zaken te gaan accentueren. Het geeft je ook meer speelruimte wat er allemaal mogelijk is op een 2-dimensioneel scherm.

Hoe dichter iets ligt bij een gebruiker, hoe meer het de aandacht trekt

Welk vlak is het dichtst bij de fotograaf?

Correct!