Basisprincipes voor een harmonieus webdesign

Sonja Hoffmann Bijgewerkt op 21.10.2020
7 Min.
Webdesign basisprincipes
Laatst bijgewerkt op 21.10.2020

Zoals het gezegde luidt: er is geen tweede kans op een eerste indruk. Je bekijkt een onbekende website en beoordeelt binnen enkele seconden of deze site "goed" of "slecht" is. Vooral bij eigen creaties is het oneindig moeilijk om een objectieve analyse uit te voeren. Gelukkig zijn er beproefde ontwerpprincipes die je als leidraad kunt gebruiken. Een overzicht.

Wat is "goed" webdesign eigenlijk?

Webdesign is vrij complex: het vereist meer dan alleen oog voor een goede typografie en een gevoel voor een aantrekkelijke visuele lay-out. Webdesign biedt een ongelooflijke variëteit aan mogelijkheden om jezelf creatief uit te drukken. Maar het biedt ook minstens evenveel mogelijkheden om te verdwalen in het ontwerpproces. Vooral als je diep geworteld bent in het ontwerpproces is het niet gemakkelijk om door de bomen het bos te zien. Het resultaat kan een ontwerp zijn dat we als "slecht" ervaren.

Onze evaluatie is vaak intuïtief, dus het is moeilijk uit te leggen waarom hetzelfde ontwerpelement perfect past op de ene website, terwijl het er op de andere website verloren uitziet en niet op zijn plek lijkt.

Wat maakt een succesvolle website?

Goede websites presenteren informatie duidelijk en efficiënt, zodat gebruikers intuïtief hun weg vinden op de site. In de meeste gevallen slaagt een gebruikersgerichte website door een uitgebalanceerde interactie van typografie, interactieve elementen en veel visuele fine-tuning. 

En omdat dat al niet ingewikkeld genoeg is, worden we ook nog eens beperkt door wat de browsers aan onze potentiële gebruikers kunnen bieden. En mogelijk ook door de technische vaardigheden van de ontwikkelaar of de tool, die we gebruiken om de betreffende website te maken. 

Je moet ook rekening houden met de huidige trends en de huisstijl van jouw klant. Webdesign is in principe de som van UX-, UI- en grafisch ontwerp, de CI en de huidige trends, waarbij rekening met de technische voorwaarden gehouden moet worden.

Het maken van een website is een vrij omvangrijk project. Geen wonder dat er meestal een heel team achter zit. Vaak hebben individuen (en helaas ook teams) de neiging om meer aandacht te besteden aan de gebieden waar ze bijzonder sterk in zijn. Andere gebieden krijgen daarentegen minder - of in extreme gevallen helemaal geen - aandacht. Dit zorgt voor een onbalans, waardoor je het gevoel krijgt dat een website kwalitatief minderwaardig en disharmonisch is.

"Goed" webdesign is het resultaat van een evenwichtige balans tussen de verschillende ontwerpgebieden en de technische voorwaarden.

Omdat een uitvoerige beschrijving van alle gebieden voor dit artikel te veel zou zijn, richt ik me hier hoofdzakelijk op het visuele design. 

Contrast, whitespace en kleur

Contrast gaat vaak hand in hand met de keuze van de primaire kleuren van het ontwerp en de witruimte in de compositie. Echter, whitespace betekent hier niet noodzakelijkerwijs de ruimte die wit is gelaten. Het verwijst eerder naar de ruimtes tussen de elementen. Deze tussenruimte wordt ook wel "negative space" genoemd en kan overigens wel gekleurd zijn.

Veel witruimte maakt een pagina meestal opgeruimder en duidelijker. Deze aanpak gaat vaak hand in hand met minimalisme. Dit betekent dat alles wat overbodig is en geen herkenbare waarde toevoegt aan het ontwerp, consequent uit de lay-out wordt verwijderd. Of het nu gaat om tekst, decoratieve elementen of een overvloed aan CTA's.

Tip

Bij het plannen van contrast en kleur moet je ook rekening houden met het volgende: moeilijk leesbare inhoud kan ertoe leiden dat mensen met een visuele beperking (bijv. kleurenblindheid) deze inhoud helemaal niet kunnen zien.

Vooral bij de trend om de kopteksten van websites te vullen met grote panoramabeelden vinden we vaak tekstoverlappingen, die moeilijk te ontcijferen zijn.

Een succesvol voorbeeld voor veel whitespace en contrast

Basisprincipes voor een harmonieus webdesign
Basisprincipes voor een harmonieus webdesign

https://aiven.io/

Een zwak voorbeeld van contrast

Hier is een voorbeeld dat vooral bij de mobiele versie een contrastprobleem geeft. De call-to-action verdwijnt volledig tegen de onrustige achtergrond.

why-ux-fails
https://www.opitz-consulting.com/

Soms is het voor ontwerpers niet zo eenvoudig om de juiste kleuren voor een ontwerp te filteren. Gelukkig zijn er ook hier tools die ons snel verschillende combinaties laten testen - voordat we veel tijd besteden aan het maken van een dure lay-out.

Kleurenleer: deze hulpmiddelen helpen jou bij de kleurkeuze

Material Design Color Tool

Material Design Color Tool creëert Low Fidelity Wireframes met een standaard van twee primaire kleuren.

materiaal-ontwerp-kleuren-tool

Adobe Color Wheel

Adobe Color Wheel helpt jou niet alleen om verschillende kleurenpaletten te creëren, maar haalt ook de gebruikte kleurenpaletten uit bestaande ontwerpen. Sinds kort is dit ook mogelijk voor kleurverloop.

adobe-kleur-wiel

Bij de selectie van geschikte kleuren is het de moeite waard om het merk van de klant goed te bekijken: welke kleurenpaletten zijn al in gebruik? In hoeverre mag ik daarvan afwijken?

Ook de basis van de kleurentheorie is onvermijdelijk: passend bij de specifieke branche van jouw klant kan een kleur met het juiste psychologische effect gekozen worden. Het is niet toevallig dat blauw vaak wordt gebruikt in meer serieuze branches - zoals verzekeringen, consulting en vergelijkingswebsites. Blauw geeft vertrouwen en heeft een kalmerend effect. Maar men moet hier niet te algemeen zijn, want zelfs nuances van dezelfde kleur kunnen heel andere emoties oproepen.

Ken je de 60-30-10 regel?

Dit wordt aanbevolen als een gouden regel voor het gebruik van kleurenpaletten. Het toegepaste principe luidt: de hoofdkleur beslaat ongeveer 60 procent van de lay-out, een complementaire kleur maakt 30 procent uit en een derde kleur voegt met 10 procent extra highlights toe. Deze ordening heeft een bijzonder evenwichtig effect op de gebruiker.

Symmetrische of asymmetrische rangschikking van de ontwerpelementen

In haar artikel “The Principles of Design and Their Importance” legt auteur en ontwerper Cameron Chapman haar twee belangrijkste benaderingen over balans in webdesign uit. Ze onderscheidt de inhoud op basis van de opvallendheid - met andere woorden: of deze nu meer of minder prominent aanwezig zijn. 

De volgende uitdaging is dan ook om de inhoud zo te ordenen dat deze een gevoel van evenwicht overbrengt. De ontwerpbeslissing om "symmetrisch of asymmetrisch te rangschikken" kan hierbij helpen.

Hoe werken beide benaderingen?

In de symmetrische benadering worden elementen met een vergelijkbaar belang bij elkaar gerangschikt. Bij de asymmetrische benadering wordt daarentegen prominentere en minder opvallende inhoud samengevoegd. 

De indeling kan bijvoorbeeld clean worden gehouden. De elementen zijn duidelijk van elkaar gescheiden, zoals in Couro Azul het geval is. Vaak wordt dergelijke inhoud iets off-center geplaatst om het zwakkere element wat meer ruimte te geven en een evenwicht te creëren.

Couro Azu

Zero maakt gebruik van hetzelfde principe - echter met een meer vrije ordening. Door het vele gebruik van witruimte lijkt het elegant en eigentijds.

Deze aanpak werkt zeer goed op grotere schermen (vanaf tabletformaat). Kleinere apparaten, zoals smartphones, hebben daarentegen baat bij duidelijk gescheiden modules die onder elkaar staan.

Prioriteiten definiëren en stellen

Voordat we beginnen met het design van een website moet duidelijk vastgesteld worden welke boodschap gecommuniceerd moet worden. Vaak brengt duidelijkheid in het marketingconcept ook duidelijkheid in de design lay-out.

Als de Key Messages eenmaal zijn vastgesteld, is het belangrijk om ze te markeren met behulp van kleur en/of typografie.

Hoe beide er gecombineerd uit kunnen zien, zie je in dit voorbeeld:

cowboy
https://cowboy.com

Er zijn echter ook veel mogelijkheden voor de uitvoering. De inhoud kan immers niet alleen door middel van gedurfde (bold) typografie en kleur worden benadrukt. Ook door middel van beelden - zoals bij Jamie Oliver's Restaurant - en door een samenspel van verschillende principes breng je geselecteerde inhoud doelgericht in beeld.

Jamie Oliver's Restaurant

Proportie, saamhorigheid en hiërarchie

De inhoud van een pagina moet zo worden gepresenteerd dat de hiërarchie zinvol is. Daarom plaats je het belangrijkste bovenaan. Met afnemende belang moet je je een weg naar beneden werken. Je moet jezelf dus afvragen: welke informatie is het belangrijkst voor de bezoeker van mijn site? Wat is alleen maar aanvullende informatie? 

Dit is ook de reden waarom het navigatiemenu in de meeste gevallen bovenaan staat. Naast het feit dat het een UI-patroon is, is het gewoon een van de belangrijkste aspecten van een site. Het menu is immers niets meer dan een overzicht van de kerninhoud die je daar aanbiedt. Als het ware de inhoudsopgave van je website.

Visuele hiërarchie: wat echt belangrijk is

Hiërarchie kan ook worden gecreëerd door zogenaamde beweging. Hier rangschikken we de inhoud van de site zo, dat het oog erdoorheen wordt geleid. Dit kan bijvoorbeeld worden bereikt door gebruik te maken van vormen en ordening. Dit portfolio is een interessant voorbeeld van hoe dat eruit zou kunnen zien:

portfolio

Het oog wordt van links naar rechts door het scherm geleid. Punt 01 heeft hier duidelijk de grootste hiërarchie - hoewel alle elementen even groot zijn en er op het eerste gezicht gelijk uitzien. 

Verhouding speelt dus ook een rol: elementen van dezelfde grootte, kleur en vorm geven ons in principe het gevoel bij elkaar te horen en dezelfde functie te hebben. Dit is vooral belangrijk bij interactieve elementen.

Het bovenstaande voorbeeld illustreert dat een consistent ontwerp in hoge mate kan bijdragen aan visuele harmonie: 

  1. Voor alle foto's worden gelijke vormen gebruikt,
  2. alle foto's matchen samen met de kleuren, 
  3. in totaal worden slechts twee verschillende lettertypes en lettergroottes gebruikt, 
  4. er wordt slechts één kleur gebruikt voor de typografie en de scheidingstekens,
  5. de scheidingstekens vormen een terugkerend ontwerpelement - en ze verenigen het visuele beeld en de beide kopteksten.

Basisprincipes in webdesign - Conclusie

Ondanks alle bovengenoemde basisprincipes zijn er regels die gebroken moeten worden. Dit is de enige manier om interessante, nieuwe ontwerpen te maken!

De benaderingen die ik hier kort heb gepresenteerd zijn natuurlijk niet nieuw. Het zijn eerder variaties van wetenschappelijk en/of psychologisch onderzoek die op onze huidige communicatiemedia overgebracht zijn. Ik vind het persoonlijk belangrijk om deze theorieën en methoden te kennen. Vaak implementeren we regels toch al intuïtief, omdat ons creatieve oog dat "geleerd" heeft.

Daarnaast helpt kennis over verschillende benaderingen in design om jouw eigen projecten te evalueren. Zie het als een checklist waarop je kunt terugvallen als je merkt dat iets visueel niet helemaal werkt. Vaak vind je niet de nodige afstand tot je eigen project om dat objectief in te schatten. 

De hier aangegeven ontwerpprincipes zijn verre van volledig. Als je je verder in het onderwerp wilt verdiepen, kun je deze artikelen en e-boeken eens bekijken: 

Wat is jouw mening over de designprincipes? Welke vragen heb je voor Sonja? Gebruik de commentaarfunctie. Wil je op de hoogte blijven van nieuwe artikelen over webdesign en ontwikkelingen voor bureaus en freelancers? Volg ons dan op TwitterFacebook of via onze Nieuwsbrief.

Na haar studie Game Design en Creative Writing in het groene Auckland heeft Sonja Hoffmann zich gespecialiseerd in web- en app-desgign en de ontwikkeling daarvan. Haar focus ligt op gamification en het verkennen van gebruikersmotivatie en ervaring, gekoppeld aan haar passie en nieuwsgierigheid voor technologische trends.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een opmerking

Je e-mail adres wordt niet gepubliceerd. Verplichte velden zijn met * gemarkeerd.