# Layout
# Grid systemen
# 12 kolommen
Om elementen binnen een pagina te layouten kunnen we gebruik maken van een grid, bv. een 12 kolommen grid. Dit helpt ons om de elementen proper te verdelen over een aantal kolommen. Je kan dit principe op heel veel bekende websites terugvinden.
Met een grid van 12 kolommen, kan je bv. je layout opdelen in een zijbalk van 4 kolommen met algemene content binnen 4 kolommen.
Een nadeel van het 12 kolommen systeem is de deelbaarheid door 5. We kunnen geen 5 even grote elementen naast elkaar hebben binnen het grid.
# Adobe XD
Binnen Adobe XD kan je de layout per artboard aanzetten en instellen.
# Figma
Binnen Figma kan je de layout per frame aanzetten en instellen.
# Web
Om een grid layout in code om te zetten gaat men vaak werken met een grid systeem dat al bestaat, zoals bv. Bootstrap 4, waarbij je met CSS classes elementen een plek in het grid kan geven. Het voordeel hiervan is dat deze ook al perfect responsive zijn en je dus minder media queries gaat moeten schrijven.
# CSS Grid
Binnen CSS is er ook een relatief nieuwe property, nl. display:grid. Hiermee kan je de elementen (children) binnen een parent in een grid layouten.
Hoewel dit vrij nieuw is, wordt de ondersteuning beter en zal het dus de komende jaren meer en meer worden gebruikt.
# Gestalt principes
De Gestalt-principes zijn ontstaan in het begin van de 20e eeuw en beschrijven hoe je brein omgaat met visuele informatie. Ons brein heeft de aangeboren neiging om alles wat we zien te organiseren in groepen of samenhangende vormen. We kunnen ook bij UI design en layout van deze principes gebruik maken.
# Proximity
Wanneer objecten dichter bij elkaar liggen dan andere, gaat we ze beschouwen als “bij elkaar horend”
# Similarity
Wanneer elementen op elkaar lijken voelt het alsof ze hetzelfde zijn en/of doen. Vooral grootte, vorm en kleur geven het gevoel van gelijkheid. Door elementen verschillend te maken, kan je dus meer onderscheid maken en is de UI sneller te scannen. Daarnaast kan je door consistent te zijn (bv. elke primaire actie dezelfde kleur van knop) ook de UI gebruiksvriendelijker maken.
# Continuation
Ons brein gaat objecten die een lijn of curve volgen en dicht bij elkaar liggen bekijken als “meer gegroepeerd”. In het onderstaande voorbeeld kunnen we door de items tegen elkaar te zetten ervoor zorgen dat de gebruiker alles in één lijn scanned/leest.
# Closure
Zelf wanneer een vorm incompleet is, kan ons brein deze zelf opvullen. Dit helpt vaak om de betekenis ervan te versterken.
# Symmetry
Wanneer elementen symmetrisch zijn opgebouwd gaan we ze bekijken als “bij elkaar horend”. Het zorgt ook voor stabiliteit en orde. Let op: het asymmetrisch maken van bepaalde zaken is daarom zeker niet slecht, het kan juist zorgen voor meer dynamiek.
# Common Fate
Wanneer elementen in dezelfde richting bewegen, gaan we ze bekijken als “bij dezelfde groep horend”. Denk bv. aan een carrousel waarbij alle elementen dezelfde kant op bewegen.
# Figure Ground
Het menselijk oog kan waarnemen wat op de voorgrond staat en wat op de achtergrond staat. Door te werken met zaken zoals transparante overlays, shadows, blur, … kan je diepte gaan simuleren.
# Common Region
Objecten die binnen dezelfde container worden geplaatst beschouwen we als “bij elkaar horend”. Dit is gelijkend op het Proximity principe.
