Het is weer volop vakantie en dat betekent: plannen maken en doelen stellen om de “back to school” periode goed te starten. Voor ons zijn nieuwe webdesign trends hierin natuurlijk erg belangrijk. Vandaag delen we de vijf belangrijkste met je!

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.

 

Webdesign Trends 2020 Voorbeeld 1

Dit kan natuurlijk helpen om bij bezoekers een bepaalde associatie met het merk op te laten wekken. Door deze trend kan het website-ontwerp 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.

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.

 

Webdesign Trends 2020 Voorbeeld Cann

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.

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.

Webdesign Trends 2020 Voorbeeld Apple

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.

cre
Creatie Maakt Alles
's-Hertogenbosch, Netherlands
5/5 - 1 aanbeveling
BrandingWeb DesignGraphic DesignWeb DevelopementSocial MediaAdvertisingMarketing
Ontdek het agentschaparrow_forward
revi
REVITALIZE
Amsterdam, Netherlands
5/5 - 9 aanbevelingen
BrandingWeb DesignGraphic DesignAdvertising
Ontdek het agentschaparrow_forward
faam
NAAM en FAAM
Rotterdam, Netherlands
5/5 - 3 aanbevelingen
SEOBrandingWeb DesignGraphic DesignSocial MediaEventAdvertisingMarketing
Ontdek het agentschaparrow_forward
fan
Skybox Design Agency
Amsterdam, Netherlands
5/5 - 2 aanbevelingen
BrandingWeb DesignGraphic DesignE-CommerceAdvertising
Ontdek het agentschaparrow_forward
pig
PigWorks
Amsterdam, Netherlands
5/5 - 3 aanbevelingen
BrandingWeb DesignGraphic DesignAdvertising
Ontdek het agentschaparrow_forward
zuur
Zuurstof | Bureau voor marketing en communicatie
Amsterdam, Netherlands
5/5 - 8 aanbevelingen
BrandingWeb DesignGraphic DesignDataWeb DevelopementMobile MarketingAdvertising
Ontdek het agentschaparrow_forward
soft
Softmedia Interactive
Eindhoven, Netherlands
5/5 - 3 aanbevelingen
Web DesignGraphic DesignWeb Developement
Ontdek het agentschaparrow_forward
alien
AlienTrick
Hengelo, Netherlands
5/5 - 0 aanbeveling
SEOBrandingWeb DesignGraphic DesignE-CommerceAdvertising
Ontdek het agentschaparrow_forward
boe
Boerenjongens
Haaglanden, Netherlands
5/5 - 2 aanbevelingen
BrandingWeb DesignGraphic DesignSocial MediaAdvertising
Ontdek het agentschaparrow_forward
elephant
digitaal bureau Elephant
Dordrecht, Netherlands
5/5 - 0 aanbeveling
SEOWeb DesignWeb DevelopementE-Commerce
Ontdek het agentschaparrow_forward
fra
Frismedia
Utrecht, Netherlands
5/5 - 2 aanbevelingen
SEOManagementBrandingWeb DesignGraphic DesignDataWeb Developement
Ontdek het agentschaparrow_forward
vsia
Visia Media
Heerlen, Netherlands
5/5 - 8 aanbevelingen
BrandingWeb DesignMarketing
Ontdek het agentschaparrow_forward
evers
Evers + de Gier
Rotterdam, Netherlands
5/5 - 6 aanbevelingen
BrandingWeb DesignGraphic Design
Ontdek het agentschaparrow_forward
fact
First Aid Marketing
Haaglanden, Netherlands
5/5 - 4 aanbevelingen
SEOWeb DesignContent Marketing
Ontdek het agentschaparrow_forward
giving
GivingBrandsEnergy
The Hague, Netherlands
5/5 - 4 aanbevelingen
BrandingWeb DesignGraphic DesignAdvertising
Ontdek het agentschaparrow_forward
benge
Bengelmedia
Amsterdam, Netherlands
5/5 - 4 aanbevelingen
Web DesignGraphic DesignEventE-CommerceAdvertisingMarketing
Ontdek het agentschaparrow_forward
lounge
IM Lounge
Amsterdam, Netherlands
5/5 - 1 aanbeveling
Web DesignEventE-CommerceAdvertisingMarketing
Ontdek het agentschaparrow_forward
curieu
Curiosity Amsterdam
Amsterdam, Netherlands
5/5 - 0 aanbeveling
Web DesignGraphic DesignEventE-Commerce
Ontdek het agentschaparrow_forward
team
Whello Amsterdam | Digital Marketing Agency
Amsterdam, Netherlands
5/5 - 31 aanbevelingen
SEOWeb DesignGraphic DesignContent MarketingE-CommerceMarketing
Ontdek het agentschaparrow_forward
voor
Counter Content
Zaandam, Netherlands
5/5 - 3 aanbevelingen
BrandingWeb DesignContent MarketingSocial MediaEvent
Ontdek het agentschaparrow_forward
moqo
Moqod
Bussum, Netherlands
5/5 - 1 aanbeveling
Product DesignWeb DesignGraphic DesignWeb DevelopementMobile DevelopmentE-Commerce
Ontdek het agentschaparrow_forward
mind
Rocket Minds
Schiedam, Netherlands
5/5 - 6 aanbevelingen
SEOWeb DesignGraphic DesignSocial MediaE-mail MarketingE-Commerce
Ontdek het agentschaparrow_forward
strat
Stratego Branding
Tilburg, Netherlands
5/5 - 8 aanbevelingen
SEOBrandingWeb DesignGraphic DesignAdvertising
Ontdek het agentschaparrow_forward
proj
Studio Projectie B.V.
Leiden, Netherlands
5/5 - 3 aanbevelingen
SEOBrandingWeb DesignMarketing
Ontdek het agentschaparrow_forward
zuid1
ZUID Creatives
Tilburg, Netherlands
5/5 - 1 aanbeveling
SEOBrandingWeb DesignGraphic DesignSocial MediaAdvertisingWeb & Software Development
Ontdek het agentschaparrow_forward
media
Mediatastisch
Echt, Netherlands
5/5 - 2 aanbevelingen
SEOBrandingWeb DesignGraphic Design
Ontdek het agentschaparrow_forward
stur1
Stuurmen
Eindhoven, Netherlands
5/5 - 1 aanbeveling
BrandingWeb DesignGraphic DesignE-Commerce
Ontdek het agentschaparrow_forward
bazen
Online Bazen
's-Hertogenbosch, Netherlands
5/5 - 13 aanbevelingen
Web DesignWeb DevelopementContent MarketingSocial MediaE-CommerceAdvertising
Ontdek het agentschaparrow_forward
west
West Point Digital
Amsterdam, Netherlands
5/5 - 1 aanbeveling
Web DesignGraphic DesignContent MarketingE-mail MarketingE-Commerce
Ontdek het agentschaparrow_forward
stil
Stijlbreuk
Tilburg, Netherlands
5/5 - 5 aanbevelingen
BrandingWeb DesignGraphic DesignWeb DevelopementSocial MediaE-CommerceAdvertising
Ontdek het agentschaparrow_forward
as
airsolid
Utrecht, Netherlands
5/5 - 3 aanbevelingen
BrandingWeb DesignGraphic Design
Ontdek het agentschaparrow_forward
inno
Innovative Brands
Amsterdam, Netherlands
5/5 - 13 aanbevelingen
SEOBrandingWeb DesignWeb DevelopementSocial MediaEventE-Commerce
Ontdek het agentschaparrow_forward
chee
Smaac
's-Hertogenbosch, Netherlands
5/5 - 5 aanbevelingen
BrandingProduct DesignWeb DesignGraphic DesignSocial MediaAdvertising
Ontdek het agentschaparrow_forward
waa
PXL.Widgets
Haarlem, Netherlands
5/5 - 7 aanbevelingen
SEOWeb DesignGraphic DesignE-mail MarketingE-Commerce
Ontdek het agentschaparrow_forward
goo
Novicom Marketing Group
Tilburg, Netherlands
5/5 - 6 aanbevelingen
BrandingWeb DesignGraphic DesignSocial MediaEventE-CommerceAdvertisingMarketing
Ontdek het agentschaparrow_forward
vance
Vance
The Hague, Netherlands
5/5 - 0 aanbeveling
SEOWeb DesignAdvertising
Ontdek het agentschaparrow_forward
inc
INC strategisch ontwerpbureau
Enschede, Netherlands
5/5 - 12 aanbevelingen
BrandingWeb DesignGraphic Design
Ontdek het agentschaparrow_forward
sept
Dutchgraph
Nijmegen, Netherlands
5/5 - 4 aanbevelingen
BrandingWeb DesignGraphic DesignAdvertising
Ontdek het agentschaparrow_forward
plan
Plans & Pixels
Rotterdam, Netherlands
5/5 - 0 aanbeveling
Web DesignGraphic DesignE-mail MarketingAdvertising
Ontdek het agentschaparrow_forward
kite
Kitemedia
Utrecht, Netherlands
5/5 - 0 aanbeveling
BrandingWeb DesignGraphic Design
Ontdek het agentschaparrow_forward
resu
eResults
Utrecht, Netherlands
5/5 - 0 aanbeveling
SEOWeb DesignSocial Media
Ontdek het agentschaparrow_forward
line
OnlineVisual
Rotterdam, Netherlands
5/5 - 9 aanbevelingen
SEOBrandingWeb DesignGraphic DesignE-CommerceAdvertising
Ontdek het agentschaparrow_forward
dg1
DG Internetbureau
Rotterdam, Netherlands
5/5 - aanbeveling
BrandingWeb DesignGraphic DesignE-Commerce
Ontdek het agentschaparrow_forward
ond
Webwonders
Eindhoven, Netherlands
5/5 - 1 aanbeveling
SEOWeb DesignGraphic DesignSocial Media
Ontdek het agentschaparrow_forward
ordi1
Lab701 Social Media Factory
's-Hertogenbosch, Netherlands
5/5 - 12 aanbevelingen
SEOWeb DesignSocial MediaMarketing AutomationEventAdvertising
Ontdek het agentschaparrow_forward
pap2
Your Personal Agency
Haarlem, Netherlands
5/5 - aanbeveling
Web DesignAdvertising
Ontdek het agentschaparrow_forward
ness
Brandness
Rijen, Netherlands
5/5 - 8 aanbevelingen
BrandingWeb DesignGraphic DesignE-CommerceAdvertising
Ontdek het agentschaparrow_forward
fish
Fishpool Marketing
Amsterdam, Netherlands
5/5 - 6 aanbevelingen
SEOWeb DesignWeb Developement
Ontdek het agentschaparrow_forward
wild
Wild Digital
Rotterdam, Netherlands
5/5 - 4 aanbevelingen
BrandingWeb DesignGraphic DesignE-CommerceDesign
Ontdek het agentschaparrow_forward
imc
Impact Media Concepts
Nuenen, Netherlands
5/5 - 3 aanbevelingen
SEOBrandingWeb DesignContent MarketingSocial Media
Ontdek het agentschaparrow_forward
banana
no.dots
Eindhoven, Netherlands
5/5 - 1 aanbeveling
Influencer MarketingWeb DesignWeb DevelopementSocial MediaE-mail MarketingE-Commerce
Ontdek het agentschaparrow_forward
omd
OMD Branding
Rotterdam, Netherlands
5/5 - 11 aanbevelingen
SEOBrandingWeb DesignE-mail MarketingEvent
Ontdek het agentschaparrow_forward
medi
Mediatastisch
Echt, Netherlands
5/5 - 2 aanbevelingen
Web DesignGraphic Design
Ontdek het agentschaparrow_forward
Zware Jongens
Amsterdam, Netherlands
5/5 - 5 aanbevelingen
BrandingWeb DesignGraphic DesignAdvertising
Ontdek het agentschaparrow_forward
schermafbeelding-2020-06-04-om-14-54-34
Online Bazen
's-Hertogenbosch, The Netherlands
4,5 - 13 aanbevelingen
TrendingSalesWeb DesignSocial MediaE-mail MarketingE-CommerceAdvertisingMarketing
Ontdek het agentschaparrow_forward
schermafbeelding-2020-06-04-om-14-44-23
Wirelab
Amsterdam, The Netherlands
5 - 5 aanbevelingen
BrandingWeb DesignWeb DevelopementMobile DevelopmentWeb & Software DevelopmentMarketing
Ontdek het agentschaparrow_forward

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. Website ontwikkelaars 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!

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!

Bron en met toestemming: Online Visual