Website
Secure-Design-Webdesign-Trends-2020-header

10+ webdesign trends voor 2020

  • 26-08-19
  • Sven Versluijs
  • 7 minuten

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.

Deze 2019-trends gaan mee naar 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.

Webdesign trends 2020

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

1. Bold fonts

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.

Bold-font-Chain

2. Opvallende kleuren

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.

Ocean-opvallende-kleuren

3. Mouseover effects

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.

SD-Mouseover-effect-Smart-Talent-min-1

4. SVG-animaties

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

Submit button SVG

5. Minimalistisch design

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.

Directpay minimalistisch design

6. Open composities

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.

Open-composition

Bekijk website: Titan Viita Watches

7. Storytelling door motion design

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.

Storytelling motion design Solar-min (1)

8. Mobile first

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.

Schermafbeelding 2024-06-10 165809

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

9. Mobiel menu

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.

Mobiel-menu-desktop-Esler

10. Illustraties

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.

Webcasso-illustraties

11. Achtergrondvideo

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.

SD-Achtergrondvideo Dag1-min (1)

12. 3D-design

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.

3d design-min (1)

Deze trends voor jouw website

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.

Meer lezen? Bekijk deze gerelateerde blogs

Website
Uitgelicht

Website verbeteren met brainstorm technieken

  • Sven Versluijs
  • 8minuten

Hoe maak je een unieke website? Hoe verzin je nieuwe content of werk je corporate branding uit? Om t…

Verder lezen
Website
Maak de perfecte landingspagina met het AIDA-model

Maak de perfecte landingspagina met het AIDA-model

  • Twan Nieborg
  • 4minuten

Bij de lancering van een nieuwe campagne hoort natuurlijk ook een landingspagina. Maar hoe krijg je…

Verder lezen
Website
uitgelicht-test

10 Webdesign trends voor 2024

  • Sven Versluijs
  • 8minuten

Bij Secure Design Webdevelopment hebben wij het afgelopen jaar weer doeltreffende websites mogen ont…

Verder lezen
Website
UItgelicht-700×530

De FAQ-Pagina: hoe je lezersvragen omzet in SEO-kansen

  • Gino Schreve
  • 4minuten

“Veelgestelde vragen” op je website zijn handig voor je bezoeker. Maar wist je dat zo’n FAQ niet all…

Verder lezen
Marketing, Website
Uitgelicht_V6

“H-tags”: maak je website beter leesbaar en vindbaar

  • Baue Wals
  • 4minuten

De leesbaarheid én vindbaarheid van je website een boost geven, dat kun je zelf. Met “H-tags” sla j…

Verder lezen
Marketing, Website
Uitgelicht

Slimmer navigeren, hoger scoren: broodkruimels op je website

  • Baue Wals
  • 5minuten

Kleine dingen kunnen een groot verschil maken. Soms zijn ze zo klein als een broodkruimel. Hoe kan e…

Verder lezen
Marketing, Website
Uitgelicht-v2

Maak je website sneller met de Google PageSpeed Insights test

  • Sven Versluijs
  • 5minuten

Wat hebben je websitebezoekers en Google met elkaar gemeen? Beiden hechten enorm veel waarde aan de…

Verder lezen
Marketing, Website
blog-over-ons-header-small

Hoe schrijf je een goede ‘Over ons’ pagina voor jouw website

  • Sven Versluijs
  • 4minuten

In tegenstelling tot wat veel mensen denken is de 'Over ons' pagina één van de beter gelezen pagina'…

Verder lezen
Marketing, Website
UITGELICHT

Wat zijn leads en wat doe je ermee?

  • Sven Versluijs
  • 4minuten

In deze blog gaan we het hebben over leads. We leggen uit wat de term lead nou eigenlijk betekent, w…

Verder lezen
Marketing, Website
Uitgelicht-2021

De best gelezen blogs van 2021!

  • Robin van Aalst
  • 5minuten

We hebben het afgelopen jaar weer een aantal blogs geschreven. In onze nieuwste blog geven we een ko…

Verder lezen
Marketing, Website
Uitgelicht-yoast

Hoe werkt Yoast SEO?

  • Robin van Aalst
  • 3minuten

Als website wil je zo hoog mogelijk komen te staan in Google. Hiervoor heb je verschillende tools to…

Verder lezen
Marketing, Website
Uitgelicht

De waarde van conversie meten voor jouw bedrijf

  • Twan Nieborg
  • 3minuten

Conversie is een woord dat je vaak hoort wanneer mensen praten over online marketing. Maar wat houdt…

Verder lezen
Marketing, Website
Uitgelciht

Alle support op één plek met Secure Design Support!

  • Sven Versluijs
  • 4minuten

Bij de vorige updateronde hebben wij al onze relaties voorzien van onze Secure Design Support plugin…

Verder lezen
Website
Uitgelicht-blog

Page Speed: wat zijn de voordelen van een snelle webpagina?

  • Duncan Charité
  • 4minuten

Een snel ladende webpagina is een fijne ervaring voor iedere bezoeker. Maar naast gemak heeft het oo…

Verder lezen
Marketing, Website
Uitgelicht1blogs

De meerwaarde van blogs op je website

  • Gino Schreve
  • 3minuten

Of je bedrijf nou in webdevelopment zit of in de bouw; het schrijven van blogs heeft een grote meerw…

Verder lezen
Marketing, Website
UITGELCIHT

Wat is een WooCommerce webshop?

  • Duncan Charité
  • 4minuten

Een eigen webshop is een belangrijke toevoeging voor veel websites. Maar hoe plaats je nou zo'n wink…

Verder lezen
Website
Uitgelicht

Leer alles over verschillende cookies

  • Sven Versluijs
  • 4minuten

“Gaat u akkoord met de cookies”? Deze vraag is je vast wel eens opgevallen bij andere bedrijven. Maa…

Verder lezen
Website
Uitgelichte

7 webtrends van 2021

  • Sven Versluijs
  • 7minuten

2021 staat alweer voor de deur en de digitale wereld staat niet stil. welke nieuwe trends maken kome…

Verder lezen
Website
uitgelicht

Pas de afbeelding bij je link aan met Yoast SEO

  • Duncan Charité
  • 2minuten

Verschijnt er een verkeerde afbeelding als jij een link deelt op je social media kanalen en weet je…

Verder lezen
Website
auiteglicht

Koppeling tussen jobboards en Carerix

  • Robin van Aalst
  • 2minuten

Kost het jou ook veel tijd om vacatures te verspreiden op jobboards of loopt dit geregeld verkeerd?…

Verder lezen
Website
Whatsapp For Business Blog

WhatsApp for Business, zet jij het al in?

  • Robin van Aalst
  • 3minuten

WhatsApp heeft sinds kort een nieuwe versie van de app gelanceerd speciaal voor bedrijven. WhatsApp…

Verder lezen
Website
570 x 400

Je website vernieuwen, hoe pak je dit aan en wat zijn de do’s en don’ts?

  • Sven Versluijs
  • 4minuten

Wil je jouw website vernieuwen maar weet je niet goed hoe je dit aanpakt? Volg dan onderstaand stapp…

Verder lezen
Website
SECURE~2

Voorkom spam door je website met Google reCAPTCHA te beveiligen

  • Twan Nieborg
  • 5minuten

Je kent het vast wel, wéér spam in je e-mail. Irritant! Maar wist je dat dit kan komen door de formu…

Verder lezen
Website
Secure-Design-Featured-Snippets-uitgelicht

Jouw website bovenaan in Google met Featured Snippets

  • Gino Schreve
  • 4minuten

Wist je dat er een nóg betere ranking is in Google dan positie 1? Positie 0! Door in te zetten op he…

Verder lezen
Website
570×400-Google-for-Jobs-met-logo-grijs

Maak jouw website klaar voor Google for Jobs

  • Sven Versluijs
  • 5minuten

Eindelijk live: Google for Jobs. De geoptimaliseerde weergave van vacatures door en via Google. Hoe…

Verder lezen
Website
Uitgelicht-Leestip

Do’s & don’ts van pop-ups op je website

  • Duncan Charité
  • 3minuten

Dat pop-ups op je website heel waardevol kunnen zijn, vertelden we in onze vorige blog over pop-ups…

Verder lezen
Website
570×400-Google-Mijn-Bedrijf

5 tips om Google Mijn Bedrijf te optimaliseren

  • Sven Versluijs
  • 5minuten

Naast de vindbaarheid van jouw bedrijf verbeteren door middel van SEO of adverteren, kun je er ook v…

Verder lezen
Website
Google-Maps-Robin-uitgelicht

De mogelijkheden van Google Maps op je website

  • Robin van Aalst
  • 4minuten

Wil jij graag een Google Maps kaart op je website tonen? Bijvoorbeeld om te laten zien waar je bedri…

Verder lezen
Website
Animatievideo-uitgelicht

Stappenplan voor het maken van een goede animatievideo

  • Duncan Charité
  • 4minuten

Wij presenteren met trots: onze interactieve animatievideo! Maandenlang hebben we met bloed, zweet e…

Verder lezen
Website
Video-op-website-uitgelicht

Do’s en don’ts van video op je website

  • Gino Schreve
  • 4minuten

Wist je dat mensen elke dag gemiddeld 67 minuten naar video’s kijken? Je kunt er dus haast niet meer…

Verder lezen
Website
WhatsApp-uitgelichte-afbeelding

Direct contact met je kandidaten: solliciteren met WhatsApp

  • Gino Schreve
  • 2minuten

Solliciteren met een motivatiebrief en je cv is zó ouderwets. Dat moet en kan moderner. Met de komst…

Verder lezen
Website
UITGELCIht

Trek de aandacht met animaties op je website

  • Duncan Charité
  • 2minuten

Hebben we jouw aandacht? Mooi. Dan hebben we ons doel bereikt! Jij kunt ook de aandacht trekken van…

Verder lezen
Website
Groepsfoto-1920×700

Zo laat je online meer van jezelf zien

  • Sven Versluijs
  • 2minuten

Meer van jezelf laten zien? Daar bedoelen we natuurlijk geen gekke selfies of van-top-tot-teenfoto’s…

Verder lezen

Vragen over deze blog? Contact

     privacy statement.

    Kan ik je helpen?
    Sven Versluijs