Basisprincipes voor een harmonieus webontwerp

Sonja Hoffmann Laatst bijgewerkt op 21.10.2020
7 Min.
Web design 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 website succesvol?

Goede websites presenteren informatie duidelijk en efficiënt, zodat gebruikers intuïtief hun weg door de site kunnen vinden. Meestal slaagt een gebruikersgerichte website door een goed uitgebalanceerd samenspel van typografie, interactieve elementen en veel visuele opsmuk. 

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 netter en overzichtelijker. Deze aanpak gaat vaak hand in hand met minimalisme. Dit betekent dat alles wat overbodig is en geen herkenbare toegevoegde waarde heeft voor het ontwerp, consequent uit de lay-out moet worden verwijderd. Of het nu gaat om tekst, decoratieve elementen of een stortvloed 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 webontwerp
Basisprincipes voor een harmonieus webontwerp

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.

waarom-ux-faalt
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 maakt low-fidelity wireframes met behulp van twee primaire kleuren.

materiaal-ontwerp-kleur-tool

Adobe Color Wheel

Adobe Color Wheel helpt je niet alleen bij het maken van verschillende kleurenpaletten, maar haalt ook de gebruikte kleurenpaletten uit bestaande ontwerpen. Sinds kort is dit ook mogelijk op basis van kleurverlopen.

adobe-kleuren-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 ontwerpelementen

In haar artikel "The Principles of Design and Their Importance" legt auteur en ontwerper Cameron Chapman uit wat voor haar de twee belangrijkste benaderingen zijn voor evenwicht in webdesign. Volgens deze onderscheidt zij inhoud naargelang deze opvalt - dat wil zeggen, of deze meer in het oog springt of minder in het oog springt. 

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. 

Zo kan bijvoorbeeld de lay-out schoon worden gehouden. De elementen zijn duidelijk van elkaar gescheiden, zoals het geval is bij Couro Azul. Vaak wordt dergelijke inhoud iets uit het midden geplaatst om het zwakkere element wat meer ruimte te geven en een evenwicht te creëren.

Couro Azu

Zero, daarentegen, gebruikt hetzelfde principe - maar met een vrijere opstelling. Door het gebruik van veel witruimte ziet het er elegant en eigentijds uit.

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

Maar ook hier zijn er veel mogelijkheden voor uitvoering. Inhoud kan niet alleen worden benadrukt door middel van vette typografie en kleur. Ook door middel van beelden - zoals bij het restaurant van Jamie Oliver - en door een samenspel van verschillende principes, kunt u geselecteerde inhoud in beeld brengen.

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 wij de inhoud van de pagina zodanig dat het oog erdoor wordt geleid. Dit kan bijvoorbeeld worden bereikt met behulp van vormen en schikkingen. Deze portefeuille is een interessant voorbeeld van hoe iets dergelijks 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. 

Verhoudingen spelen dus ook een rol: elementen van dezelfde grootte, kleur, vorm geven ons in principe het gevoel dat ze bij elkaar horen en dezelfde functie hebben. Dit is vooral belangrijk voor interactieve elementen.

Het hierboven gegeven voorbeeld illustreert dat een consistent ontwerp in hoge mate kan bijdragen tot 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 basisbeginselen zijn regels er om gebroken te 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 uw mening over de ontwerpprincipes? Welke vragen heb je voor Sonja? Voel je vrij om de commentaarfunctie te gebruiken. Wilt u op de hoogte blijven van nieuwe artikelen over webdesign en -ontwikkeling voor bureaus en freelancers? Volg ons dan op Twitter, Facebook 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.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.