5 webdesign trends voor 2020

aron van dijk
Aron van Dijk
Marketeer
Datum: 11 november 2019
Leestijd: 8 minuten

Het einde van het jaar is weer in zicht en dat betekend: plannen maken en doelen stellen voor het volgende jaar. Voor ons zijn nieuwe webdesign trends hierin natuurlijk erg belangrijk. Vandaag delen we de vijf belangrijkste met je!

Kleur & Brutalisme

Opvallen is net als in 2019 een ding. Waar het vorig jaar vooral ging om zo gek mogelijk met vreemde retro kleuren en een ouderwetse look gaat het in 2020 meer om felle, gave kleuren. Dit kan natuurlijk een wapen zijn om op te vallen tussen de concurrentie. Vooral diepe kleuren op de achtergronden worden populair. Niet langer dus een witte achtergrond voor je website, maar een mooie diepe kleur, waar een felle kleur goed op af steekt. Hierdoor kun je bepaalde elementen zoals knoppen de aandacht laten trekken met een felle kleur, en jezelf onderscheiden van de concurrentie door de achtergrond van de website in een eigen kleur uit te voeren.
Dit kan natuurlijk helpen om bij bezoekers een bepaalde associatie met het merk op te laten wekken. Door deze trend kan het websiteontwerp eenvoudig en overzichtelijk blijven, terwijl deze wel een uniek gevoel geeft. Een mooie trend wat ons betreft! Een goed voorbeeld is de website van Tony’s Chocolonely. Eigenlijk is de homepage best simpel, maar door de herkenbare blauwe kleur geeft het gelijk een vertrouwd gevoel. Je krijgt meteen de associatie van het merk mee, terwijl de website wel overzichtelijk en duidelijk blijft.
Webdesign Trends 2020 Voorbeeld 1

Grote letters

Waar de trend vorige jaar nog de populaire serif fonts waren, gaan we in 2020 voor grote, bold lettertypes. Het is niet helemaal nieuw om grote letters te gebruiken op je website, maar komend jaar zullen de letters vooral dikker en strakker worden. Zo kiezen veel merken voor een of enkele woorden die gelijk zichtbaar maken waar de website over gaat. Door dit toe te passen met een mooi dik lettertype ziet de website er eigentijds uit. Doordat variabele lettertypen steeds makkelijker zijn toe te passen, zie je dit ook op meer websites terug te komen. Het is dan ook niet langer een probleem om grote letters ook op mobiel of tablet toe te passen

Door het goed toepassen van H1 en H2 tags kunnen enkele, grote titels ook goed bijdragen aan de vindbaarheid van je website! Een goed voorbeeld van het goed toepassen van deze trend is de website van CANN (een persoonlijk favoriet!). De verschillende smaken worden door grote, dikke letters gepresenteerd. Binnen één oogopslag zie je waar deze sectie over gaat. Elke smaak heeft een eigen achtergrond kleur waardoor de kleur trend van zojuist ook wordt toegepast. 

Webdesign Trends 2020 Voorbeeld Cann

Animaties & dynamische illustraties

Natuurlijk is video nog altijd enorm populair. Toch blijft het voor webdesigners lastig video’s toe te passen, in verband met de laadtijden. Omdat bewegend beeld toch enorm de aandacht trekt en dingen makkelijker duidelijk kan maken, worden hiervoor oplossingen bedacht. Animaties, gifs en dynamische illustraties zijn hier voorbeelden van.  

Animaties zijn heel divers. Zo hebben we de bekende hover effecten op bijvoorbeeld afbeeldingen, overgangen tussen pagina’s en bewegende objecten op de achtergrond. Dit soort onderdelen zijn natuurlijk ook niet heel wenselijk voor de laadtijd, maar het is niks in vergelijking met een full hd achtergrond video. Animaties kunnen een website persoonlijk maken en het verhaal van een merk verduidelijken.

Ook kunnen animaties makkelijk zijn om dingen uit te leggen. Zo kun je verschillende eigenschappen van een product animeren of laten zien hoe een product werkt. Ook kunnen animaties in knoppen ervoor zorgen dat bezoekers verleid worden ergens op door te klikken of een product in het winkelmandje te plaatsen. Heb je pagina’s met een flinke laadtijd? Dan kan een leuke animatie ervoor zorgen dat een bezoeker niet weg klikt, maar zijn aandacht nog wat langer vasthoudt.

Een goed voorbeeld van het juist toepassen van animaties is de pagina van de nieuwe Apple Airpods. Apple past hierbij animaties op verschillende manieren toe. Door deze duidelijke animaties zien we hoe het product werkt, wat de verschillende producteigenschappen zijn en hoe dit product zich onderscheidt van de concurrentie. Animaties kunnen echter ook veel simpelere voorbeelden zijn, door bijvoorbeeld bewegende icons of simpele gifjes. 

Webdesign Trends 2020 Voorbeeld Apple

Asymmetrie

Veel websites zijn gebaseerd op rijen en kolommen. Hierin is vaak de keuze een, twee of drie kolommen. In de meeste gevallen zijn deze kolommen gelijk, dus twee keer 50% of drie keer 33%. De afgelopen tijd, en we verwachten dus in 2020 nog meer, zie je steeds vaker asymmetrische kolommen. Weer een middel om te onderscheiden en minder voorspelbaar voor de dag te komen dus!

Vaak is een asymmetrisch geheel fijner voor het oog, in de fotografie bekend als de gulde snede. Het is echter wel van groot belang om asymmetrie goed toe te passen, om een chaotisch geheel te voorkomen. Het klinkt een beetje verwarrend, maar asymmetrie kan dus wanneer het goed uitgevoerd is, in balans zijn.

Het is hierbij belangrijk om ervoor te zorgen dat de verschillende delen van de pagina met elkaar in balans zijn. Bijvoorbeeld door telkens gebruik te maken van grotere afbeeldingen, welke perfect zijn uitgebalanceerd met tekst en witruimte. Het oog van de bezoeker zal hierbij altijd eerst op de afbeeldingen vallen, voordat ze over zullen schakelen naar de tekst. Een goed voorbeeld van deze trend is de website van Dropbox. Meer van de vandaag besproken trends komen hier trouwens terug!

Webdesign Trends 2020 Dropbox

Voorbereiden voor stemherkenning

Nu het gebruik van Siri, Google Home en Cortana steeds populairder worden, is stemherkenning steeds belangrijker. Het wordt steeds gemakkelijker om je apparaten opdrachten voor je uit te laten voeren, vooral bijvoorbeeld tijdens het koken of autorijden. Websiteontwikkelaars spelen hierop in door websites te optimaliseren voor stemherkenning, ook omdat deze dan beter vindbaar worden en kunnen worden gekoppeld aan de bekende spraak-systemen.

We hebben je al eerder verteld dat spraakherkenning een trend zou worden, maar het lijkt nu pas echt op gang te komen. Vorig jaar werden twee keer zoveel slimme systemen verkocht, en er wordt verwacht dat 55% van de huishoudens in 2022 een slimme luidspreker in huis zal hebben. 65% van de jongeren gebruikt al minstens een keer per dag een spraakcommando naar een apparaat.

Het is dus belangrijk om hier rekening mee te gaan houden om zo op de toekomt te zijn voorbereid. Je kunt je website voorbereiden voor stemherkenning door meer gebruik te maken van longtail zoekwoorden, meer te typen in spreektaal en featured snippets te gebruiken. We helpen je hier uiteraard graag mee!

Webdesign trends 2020: de conclusie

Uiteraard is het elk jaar weer belangrijk dat je website er eigentijds uitziet. Dit jaar zijn felle kleuren en brutalisme hierin belangrijk, om op deze manier onderscheidend te zijn. Ook het gebruik van grote lettertypes helpt hierbij. Je website krijgt hierdoor een eigen look en je bezoeker kan zich hiermee identificeren. Door dynamische content als gifs en animaties toe te passen, hou je de aandacht van de bezoeker vast. Ook kan je ze door de juiste knoppen of kolommen te laten bewegen, naar bepaalde pagina’s toe leiden. Door het goed toepassen van asymmetrie bereik je hetzelfde, je kunt het gedrag van de bezoeker beïnvloeden en deze zo naar de door jou gewenste pagina’s leiden. Door het voor te bereiden op stemherkenning blijf je op de toekomst voorbereid en loop je dus straks niet achter op je concurrenten!

Bereid je goed voor op 2020 en trek weer de aandacht van je (potentiële) klanten. Deze trends kunnen je hier bij helpen! 

aron van dijk
Aron van Dijk
Marketeer

Inspelen op deze trends?

Heb je inspiratie gekregen, heb je zelf een trend ontdekt of wil je één van de trends toepassen op jouw website? Neem dan gerust contact op!
aron@onlinevisual.nl

010 26 13 015

Start je project

Weten wat wij voor jou kunnen betekenen? Vul onderstaand formulier in en start je project!
Teddy2.png

Looking for Tall, Dark & Handsome?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.