10+ webdesign trends voor 2020

Niet alleen de digitale wereld verandert elke dag, grafisch design verandert net zo snel mee. Daarom is het belangrijk om op de hoogte te blijven van de laatste trends. Wist je bijvoorbeeld dat de gradient weer helemaal terug is en voorlopig ook nog blijft? Vorig jaar deelden we 5 webdesign trends voor 2019. Vandaag delen we 10+ webdesign trends voor 2020.

In de intro verklapten we al dat gradients weer terug zijn en voorlopig het schip nog niet gaan verlaten. Gradients blijven aan populariteit winnen en we zien deze ook steeds vaker terug in de designs en websites die wij maken. Daarnaast wordt het steeds normaler om een asymmetrische opmaak aan je website toe te voegen. Elementen op de website staan dan niet meer in één lijn. Je gaat creatief om met de ruimte die je op je website hebt. Deze trend zien we in 2020 ook weer terug.

Naast de trends die we meenemen uit voorgaande jaren, zijn er ook een genoeg nieuwe trends en ontwikkelingen die we in 2020 gaan zien. Dit zijn de 12 trends voor 2020:

1. Bold fonts
2. Opvallende kleuren
3. Mouseover effects
4. SVG-animaties
5. Minimalistisch design
6. Open composities
7. Storytelling door motion design
8. Mobile first
9. Mobiel menu
10. Illustraties
11. Achtergrondvideo
12. 3D-design

Dikgedrukte fonts (of ook wel ‘loud and proud typography’ genoemd) bestond al veel eerder, maar deze trend maakt in 2020 een opmars. Het is een opvallende manier om jouw boodschap over te brengen. Dus wil je dat bezoekers iets niet over het hoofd zien? Zet het in een bold font. Chain wil bijvoorbeeld ‘De wereld van Chain’ benadrukken en daarom staat ‘Chain’ in een dikgedrukt font. Maar ook ‘vacatures en projecten’ in de header worden uitgelicht met een bold font.

Naast opvallende lettertypen, kun je in 2020 ook losgaan met opvallende kleuren. De ‘bold colours’ trend maakt het namelijk mogelijk om door middel van felle kleuren je website te onderscheiden. Ga bijvoorbeeld eens voor twee felle kleuren als achtergrond in plaats van wit of lichtgrijs. Of laat opvallende kleuren in je huisstijl terugkomen. Zo koos onze klant Immens voor oranje en combineerde Ocean Recruitment roze en blauw. Maar je kunt natuurlijk ook voor contrasterende kleuren kiezen, of je hele website in een bepaalde kleur stylen. Wij verwachten in 2020 meer opvallende kleuren te gaan gebruiken voor onze klanten.

Kleine effecten op je website kunnen een twist geven aan de ervaring van een bezoeker op jouw website. Daarom worden zogeheten ‘mouseover effects’ of ‘hover effects’ al langer gebruikt op websites. Wanneer je met je muis over een element beweegt, verandert of beweegt er iets. Een knop krijgt bijvoorbeeld een andere kleur of een volledige rij begint te bewegen. Een voorbeeld van een mouseover effect kun je op de website van Smart Talent vinden. De blokken op deze website veranderen bij beweging van kleur, er komt een lijn tevoorschijn en de foto wordt beter zichtbaar. In 2020 zullen hover effecten steeds meer worden gebruikt op websites om gebruikers te triggeren.

Deze trend voor 2020 is nog maar net in opkomst, maar wint nu al aan populariteit. SVG-animaties zijn een relatief nieuwe en innovatieve manier om jouw website te onderscheiden van je concurrent. Een SVG-animatie is een afbeelding die voor een deel geanimeerd is; een element uit de afbeelding kan bewegen. Je kunt ze bijvoorbeeld continu laten bewegen of combineren met een mouseover effect, zoals onderstaande ‘Submit button’.

Bron submit button: Tamino Martinius

Minimalistische designs zullen in 2020 vaker terugkomen op websites. Daarmee bedoelen we aan de ene kant designs waarbij weinig elementen en poespas worden getoond, het ‘less is more’ principe. Aan de andere kant betekent het ook dat je de inhoud zo duidelijk neerzet, dat een bezoeker meteen weet op welke pagina hij terecht kan voor zijn of haar vraag en niet urenlang hoeft te zoeken. Directpay heeft op haar homepage een aantal blokken neergezet, waarmee de bezoeker direct kan zien wat voor hem van toepassing is.

Het gebruik van open composities in grafische designs neemt ook toe, omdat het visueel aantrekkelijke en creatieve websiteontwerpen creëert. Een open compositie creëert de illusie dat de webpagina buiten je beeldscherm nog verder gaat. Het speelt in op jouw fantasie. In onderstaand voorbeeld kun je goed zien dat de letters aan de rechterkant uit beeld verdwijnen en ook dat de afbeelding stopt. Het is aan jouw fantasie om te bedenken hoe de afbeelding en tekst verder gaan.

Bekijk website: Titan Viita Watches

Storytelling wordt steeds belangrijker online: je vertelt een boodschap door middel van een persoonlijk verhaal. Ook online komt storytelling vaker terug. Maak het verhaal visueel aantrekkelijk en bewegend en je bent bezig met storytelling door motion design; een trend waarvan wij verwachten dat deze in 2020 gaat groeien. Een mooi voorbeeld is de website van het festival Solar Weekend. Hierin laten zij het verhaal van de afgelopen 15 jaar in beeld zien.

Steeds meer verkeer op jouw website gaat via mobiel. Dat betekent dat het in 2020 nog belangrijker wordt om een goede mobiele (responsive) website te hebben. Denk dus goed na welke elementen wel en niet belangrijk zijn om getoond te worden op mobiel in vergelijking tot desktop. Een mobile-first gedachte is hierbij belangrijk. Bij onze klant Checkmark kun je het verschil tussen de desktop en mobiele weergave van de vacatures goed zien.

Desktop weergave van de vacaturepagina op Checkmark.nl vergeleken de mobiele weergave van de vacaturepagina.

Met de verschuiving naar mobiel, wordt een mobiel menu ook steeds belangrijker. Het volledige menu wordt niet meer bovenin getoond, maar zit verstopt achter een zogeheten ‘hamburger’. In 2020 gaan we dit niet alleen op mobiel zien, maar ook voor desktop wordt het mobiele menu steeds populairder. Dat sluit ten eerste aan op de trend om je website minimalistisch te houden en je kunt het menu op een opvallende manier tonen wanneer een bezoeker erop klikt. Zelf gebruiken wij het hamburgermenu op onze website en ook Esler heeft een mobiel menu op de desktop website.

Afbeeldingen en video zijn manieren om een pagina op te leuken of ze ondersteunen de tekst en laten zien wat je vertelt op de webpagina. Maar dat kan in 2020 ook anders: illustraties (ook wel tekeningen) worden namelijk steeds vaker gebruikt ter ondersteuning van de boodschap. Een voorbeeld van illustraties op je website is Webcasso. Daarnaast kun je ze inzetten om op een unieke manier karakter te geven aan jouw bedrijf.

Een trend die wij nu al steeds meer toepassen voor onze klanten en die in 2020 nog vaker voor zal komen, is het gebruik van video op je website. Vaak wordt in de header van een website een afbeelding geplaatst, maar aangezien video steeds belangrijker wordt, zullen de headerafbeeldingen in 2020 plaatsmaken voor headervideo’s als sfeermaker. Deze video’s spelen op de achtergrond af, terwijl er content overheen wordt getoond. Dat wordt bijvoorbeeld op de website van onze klant Dag1 al toegepast.

3D-elementen zijn langzaam maar zeker een comeback aan het maken in webdesign. Jaren geleden werkten we bijvoorbeeld al met schaduwen achter elementen op de website om diepte te creëren. 3D komt terug. Daarom verwachten we in 2020 meer 3D-webdesigns te gaan maken. Diepte kan in 2020 nog steeds door middel van schaduwen worden gecreëerd, maar het kan tegenwoordig ook meer lijken op een film of game. Kijk bijvoorbeeld eens naar de website van Campo Alle Comete: het websitedesign is 3D en je kunt er als het ware doorheen bewegen.

Spreekt één van deze trends jou aan en ben je benieuwd hoe we dat op jouw website kunnen toepassen? Kom gerust eens langs of neem contact met ons op. Dan gaan we graag een keer samen brainstormen over de designmogelijkheden. Je kunt ons ook op LinkedIn volgen of je inschrijven voor onze nieuwsbrief om op de hoogte te blijven van deze of andere trends.