De homepage van Mailchimp maakt gebruik van een duidelijke hiërarchie. De aandacht gaat eerst naar de titel, de afbeelding, de korte tekst en stopt uiteindelijk bij de call-to-action knoppen.
# Grafisch ontwerp: 4 basisprincipes die je moet kennen

Grafisch ontwerp
Geplaatst op: 4 maart 2022, aangepast op: 7 oktober 2023

Hoe zet je grafisch ontwerp efficiënt in? In dit artikel behandelen we een aantal basisprincipes die je als ontwerper zeker moet kennen.

Basisprincipes grafisch ontwerp

Grafisch ontwerp is veel meer dan het maken van mooie plaatjes. Grafische vormgeving gebruikt artistieke en technische vaardigheden om een boodschap over te brengen. Tekst, afbeeldingen en in sommige gevallen zelfs video zijn allemaal elementen die je kunt gebruiken in je ontwerp. Maar hoe zet je deze elementen efficiënt in? In dit artikel behandelen we een aantal basisprincipes die je als ontwerper zeker moet kennen. Ook laten we een aantal voorbeelden zien van deze principes.

## Hiërarchie

Met hiërarchie geef je de elementen uit je ontwerp een bepaalde volgorde, van het meest belangrijk naar het minst. De elementen die het belangrijkst zijn vallen zo het meeste op, degene die minder belangrijk zijn krijgen minder aandacht. Met hiërarchie kun je de elementen zo positioneren om zo de aandacht van de gebruiker te sturen.

Hiërarchie kan bijvoorbeeld worden aangegeven door typografie. Een titel van een document kan in dikke grote letters worden afgedrukt, terwijl een bijschrift van een foto in een kleinere lettergrootte wordt geprint. Maar ook kleurgebruik, of de grootte van elementen kunnen hiërarchie aangeven.

### Mailchimp

De homepage van Mailchimp maakt gebruik van een duidelijke hiërarchie. De aandacht gaat eerst naar de titel, de afbeelding, de korte tekst en stopt uiteindelijk bij de call-to-action knoppen.

## Contrast

Contrast is het verschil tussen tegenstellingen. Een goed voorbeeld hiervan is het verschil tussen twee kleuren (zwart en wit) of grootte (klein en groot). Contrast is belangrijk bij het bepalen van een logische hiërarchie en kan daarnaast een ontwerp stukken aantrekkelijker maken.

### Contrast door grootte

Zoals eerder gezegd kan er contrast gecreëerd worden door elementen van verschillende groottes te voorzien. Een grote afbeelding naast een kleine button zal extra opvallen. Ook maakt het verschil in grootte het geheel interessanter om naar te kijken.

#### Elliot Jay Stocks

Goed voorbeeld van contrast door grootte: de tekst in de titel is vele malen groter dan alle andere tekst op de website van Elliot Jay Stocks.

### Kleurcontrast

Door verschillende kleuren op elkaar te leggen kan er ook contrast ontstaan. Een donkere kleur is beter leesbaar op een lichtere achtergrond en zorgt zo voor meer kleurcontrast. Ook kan er gevarieerd worden met de verzadiging (de felheid van een kleur). Lees meer over kleurverzadiging in ons artikel over kleurenleer.

Door voor meer of juist minder kleurcontrast te kiezen kan de ontwerper bepaalde elementen uit lichten. Als een bepaalde kleur opvalt tegen zijn achtergrond zal dit meer de aandacht eisen. Door hier bewust mee om te gaan kan de aandacht van de kijker worden gestuurd.

#### Team TDA

De blauwe kleur op de website van Team TDA valt goed op tegen de grijze achtergrond en de zwarte tekst.

### Vormcontrast

Ook door verschillende vormen te combineren kan er een contrast ontstaan. Scherpe hoeken contrasteren bijvoorbeeld met ronde vormen en organische vormen hebben een andere vorm dan geometrische vormen. Door deze tegengestelde vormen naast elkaar te plaatsen ontstaat vormcontrast. Ook met deze vorm van contrast kunnen er bepaalde elementen worden uitgelicht en gebruikt worden om de aandacht te trekken, of een bepaalde tegenstelling te versterken. Hier lees je meer in ons artikel over de betekenis van vormen.

#### Figma

In deze testimonial valt de afbeelding op door zijn ongewone vorm.

## Witruimte

Witruimte is de (lege) ruimte om elementen heen. Door elementen dichter bij elkaar te zetten, of juist extra ruimte tussen elementen te laten, kunnen elementen gegroepeerd worden. Door elementen te groeperen wordt het ontwerp duidelijker en wordt deze makkelijker te scannen. Aan de andere kant kun je met (wit)ruimte ook aangeven dat elementen juist niet bij elkaar horen. Door voldoende ruimte tussen grafische elementen te laten ontstaat er een scheiding.

Ook kan er met witruimte focus gegeven worden op een bepaald element. Door veel ruimte om een onderdeel te laten wordt de aandacht als het ware hierheen getrokken.

Witruimte is niet altijd wit. Het kan een andere kleur krijgen of zelfs een achtergrondafbeelding zijn. Zolang er elementen van elkaar gescheiden worden met een ruimte spreken we van witruimte.

Meer weten over witruimte en webdesign? Bekijk onze voorbeelden van witruimte op websites.

Website lumicast 21903

### Lumicast

De website van Lumicast maakt handig gebruik van witruimte. Om de titel zit veel witruimte, waardoor de tekst beter opvalt.

## Herhaling

Herhaling is het opnieuw gebruiken van een eerder gebruikt element. Herhaling komt veel voor in bijvoorbeeld muziek, waardoor de muziek een ritme krijgt. Hetzelfde geldt voor grafisch ontwerp: door iets te herhalen wordt het voorspelbaar en is het prettiger om naar te kijken. Herhaling zorgt ervoor dat informatie geordend en consistent wordt getoond. Teveel herhaling kan saai ogen, dus is het belangrijk een balans te creëren tussen voorspelbaarheid en een interessant ontwerp.

### Spoorwegmuseum

De attracties van het Spoorwegmuseum zijn in 3 blokken gezet met exact dezelfde vormgeving. Hierdoor ziet de pagina er voorspelbaar uit.

## Basisprincipes grafisch ontwerp

Tot slot de basisprincipes waarmee je een gebalanceerd ontwerp kunt maken:

- Hiërarchie: hiermee geef je gewicht aan je verschillende elementen en geef je ze een bepaalde volgorde.
- Contrast: door eigenschappen van je grafische elementen expres van elkaar te laten verschillen krijgen bepaalde elementen meer aandacht dan andere.
- Witruimte: met ruimte tussen elementen kun je elementen groeperen of juist van elkaar scheiden.
- Herhaling: door herhaling van grafische elementen maak je het ontwerp voorspelbaar en prettiger om naar te kijken.

## Meer artikelen

## SEO tips voor webdesigners

## De betekenis van kleuren op je website

## Grafisch ontwerp: 4 basisprincipes die je moet kennen

## 10 grafieken die laten zien hoe moeilijk designers het soms hebben

#### Tags

#### Kleuren

#### Websites

#### Artikel categorieën