Dé webdesign trends voor 2021

Door: Lennart de Ridder • oktober 2020

Het internet is de afgelopen tien jaar enorm gegroeid en veranderd: we hebben de heerschappij van mobiel gezien, de introductie van AR, VxR, AI, AMP en vele andere acroniemen. Hoe opwindend al deze nieuwe technologie ook is, waar we deze veranderingen echt zien en voelen, zien we ze terug in de webdesign trends.

Dé webdesign trends voor 2021

In enkele jaren zijn webdesign trends gestegen naar ongebreidelde creativiteit, waarbij rasters en traditionele stockfoto’s achterhaald zijn door levendige illustraties, gedurfde kleurenschema’s en asymmetrische lay-outs. Bezoekers zien talloze websites wat betekent dat bedrijven blijven proberen telkens de aandacht te trekken met nieuwe webdesign trends die ook nog eens zorgen voor conversie.

In de webdesign trends van 2021 zullen deze twee kanten van de medaille – esthetiek en technologie – als nooit tevoren samenkomen.

1. Mixen van foto’s en afbeeldingen

Het gebruik van echte foto’s vermengd met illustraties of afbeeldingen creëert een individuele boodschap van de site. Ongeacht of u een foto van een product of een persoon maakt, het helpt de branding te behouden en het is ook een geweldige manier om u te onderscheiden van de rest. Overlappende of overlappende afbeeldingen met een foto creëren een speciaal visueel effect.

Dergelijke collages zijn universeel:

  • Ze kunnen worden gebruikt om aantrekkingskracht toe te voegen.
  • Ze verdunnen complexe attributen, waardoor abstracte concepten kunnen worden overgebracht.
  • Dit is een manier om afbeeldingen aan te passen en persoonlijkheid toe te voegen.

 

Hoe de flexibiliteit van deze trend maximaal benutten? Stem de stijl van de illustraties en afbeeldingen af op uw merkidentiteit. Dit heeft grote invloed op hoe de gebruiker de foto’s interpreteert. Bijvoorbeeld:

  • voor speelse foto’s op het gebied van entertainment, kunt u karikatuurafbeeldingen kiezen;
  • complexe geometrische vormen zijn geschikt voor een online winkel met klassieke kleding;
    restaurantsites kunnen perfect worden gecombineerd met afbeeldingen in retrostijl.

2. Artificial Intelligence

Artificial Intelligence (AI) dringt steeds meer door in alle domeinen van ons leven, inclusief marketing. Wanneer u AI op uw site implementeert, kunt u aanzienlijk meer gegevens gebruiken om aan de behoeften van gebruikers te voldoen.

In de context van webdesign heeft de toevoeging van kunstmatige intelligentie meer betrekking op ontwikkeling dan op het uiteindelijke resultaat. AI is de mogelijkheid om gerichte en gepersonaliseerde pagina’s te maken die zijn gericht op een specifieke context. AI helpt onder meer:

  • informatie verzamelen over lezers;
  • automatiseer de selectie van afbeeldingen;
  • testen uitvoeren;
  • plaats aandachtselementen op de meest geschikte plaatsen.

 

De gebruiker verwacht elke dag meer en meer personalisatie op onbewust niveau. AI is de beste manier om een bezoeker van een webpagina precies te geven waar hij naar op zoek is.

3. Vervaagde trends

Webdesign is een zeer intensieve fase van websiteontwikkeling. Allereerst kun je er veel elementen aan toevoegen die de aandacht trekken. Het belangrijkste is om niet alles tegelijk toe te voegen, om geen chaos in de interface te creëren. Maar je moet als designer ook ‘oude’ trends volgen, om er voor te zorgen dat de site er niet oud uitziet.

Duidelijke geometrie. Jarenlang hebben veel ontwerpers hun toevlucht genomen tot het gebruik van rechte hoeken en uitgebalanceerde vormen. Tegenwoordig is de gebruiker dat wel een beetje beu, want de sites zien er erg uniform uit. Daarom verliest elk duidelijk geverifieerde illstratie met de komst van asymmetrie zijn relevantie.

Heldere, verzadigde kleuren. Een ander element van webdesign dat snel aan populariteit verliest. Ten eerste zorgen ze voor meer vermoeidheid van de ogen. Ten tweede vallen ze niet samen met de algemene kleurentrends in andere gebieden. Daarom vervang deze felle kleuren voor pasteltinten.

Video en animatie als onderdeel van het ontwerp. Veel sites hebben animaties toegevoegd om hun site op te vrolijken. Een bijzonder populaire trend was de toevoeging van video in plaats van afbeeldingen op de achtergrond van het hoofdscherm. Dit verminderde de snelheid van het laden van de site aanzienlijk. Totdat dit probleem is opgelost, blijft de trend van de video ergens steken.

4. Dark mode

Webdesigns in de donkere modus zien er niet alleen ultramodern uit, maar ze zijn ook prettig voor de ogen en laten kleuren en ontwerpelementen opvallen.

Soms hebben de meest visueel verbluffende trends op het gebied van webdesign een praktisch begin. Donkere thema’s zijn beter voor OLED-schermen – ze besparen stroom en verlengen de levensduur van het scherm – maar dat hulpprogramma weerhoudt ze er niet van om er goed uit te zien. Donkere achtergronden verbeteren de zichtbaarheid van andere accentkleuren voor een echt dynamisch ontwerp.

Toevallig past de ontwerpesthetiek van de donkere modus ook perfect bij andere heersende 2021-ontwerptrends, waaronder donkere en humeurige kleurenschema’s in combinatie met gloeiende neons en futuristische maar donkere cyberpunk- en dystopische stijlen.

5. Schaalbare vectorafbeeldingen

Multimedia-inhoud zoals GIF-, PNG- en videoformaten zorgen al jaren voor meer betrokkenheid en behouden de bezoekers op de webpagina’s. Maar multimedia-inhoud was enigszins anti-mobiel. Multimedia-inhoud leidt tot latentie, vooral op mobiele apparaten. Merken hebben hiervoor oplossingen nodig, aangezien internetgebruikers voornamelijk mobiele gebruikers zijn geworden.

Hiermee kwam SVG om de hoek kijken – schaalbare vectorafbeeldingen. SVG is geen pixel maar een vector gebaseerde afbeelding in een xml-taal. Het voordeel van het ontwikkelen van een webontwerp met de SVG-benadering is dat wanneer ontwerpers pictogrammen, logo’s en andere illustraties maken, deze ontwerpelementen er sterk geoptimaliseerd uitzien, ongeacht de schermresoluties. Bovendien kunnen ontwerpers ze opslaan als superkleine bestandsgroottes en gemakkelijk bewerken en aanpassen wanneer dat nodig is. SVG kan een belangrijke bijdrage leveren aan de schaalbaarheidsaspecten van sites en apps.

6. Duimvriendelijk ontwerp

Het mag inmiddels geen nieuws meer zijn dat elk jaar het aantal mobiele gebruikers groter wordt. Hierbij moet ook zeker rekening gehouden worden met het design. Plaats je het menu bovenin, of wil je onderscheidend zijn door dit onderin te plaatsen. Voordeel hiervan is dat je bezoeker hem bovenin verwacht, waar je dan weer slim een Call To Action (CTA) kan plaatsen die extra aandacht krijgt.

Nog altijd wordt er veel onderzoek gedaan hoe de mobiel gebruikt wordt en met welke vingers wij navigeren. De meeste mensen houden hun mobiel met één hand vast en gebruiken hun telefoon slechts met één vinger. Het laat zich niet moeilijk raden dat de duim verreweg het meest gebruikt wordt. Enkele jaren geleden was dit al bijna 50%, maar steeds meer mensen gaan over tot de duim om te navigeren.

Als de vraag komt of het mobiele menu onderin geplaatst mag worden wordt vaak conservatief gedacht.’ Je verwacht hem toch bovenin?’ of ‘Ik wacht wel tot meer mensen dat hebben’. Echter is er ook nog een alternatief mogelijk:

Het logo inclusief het hamburger menu (zoals drie streepjes vaak genoemd worden omdat ze het uiterlijk hebben van de hamburger) kan gewoon bovenin blijven staan. Overige items die je daar dan vaak terug ziet zijn het telefoon icoon en vaak nog een envelop icoon om te mailen. Deze items kunnen ook vast onderaan het scherm gemaakt worden.

Combineer dit dan met bijvoorbeeld de winkelwagen en de zoekfunctie en de gebruiker heeft alle gemakkelijke functies voor je website letterlijk onder de duim zitten. Tevens creëer je rust in de menubalk, wat het ontwerp en gebruiksvriendelijkheid ten goede komt.

Ik verwacht dat het aankomende jaar steeds meer mobiele ontwerpen voorzien zijn van handige koppelingen onderaan het scherm. Overigens heb ik dit al in een eerdere webtrend van 1 a 2 jaar geleden benoemd en geplaatst.

De webdesign trends voor 2021

7. Zwevende elementen en zachte schaduwen

Een andere manier om meer diepte aan het ontwerp van je website te geven is het gebruik van zwevende elementen. Daarnaast laat je een foto of illustratie meer naar de voorgrond komen en je webdesign krijgt hierdoor dus automatisch meer aandacht. Uiteraard wekt een video op de achtergrond van je website de meeste aandacht, maar helaas zorgt dit nog steeds voor een enorme laadtijd. Dit is tevens een flinke conversie killer.

Persoonlijk vind ik het altijd heel netjes om een dikke rand (border) rond een foto te gebruiken van minimaal tien pixels, waardoor deze foto nog meer aandacht krijgt. Gebruik hierbij een subtiele bocht van tien graden op de hoeken en plaats hier een hele lichte schaduw achter. Op een witte achtergrond krijgt zo’n blok met een witte border (wat normaal gesproken niet zichtbaar is) door de zachte schaduw een zwevend effect.

Uiteraard is bovenstaande ook mogelijk bij het gebruik van titels die net een beetje aandacht nodig hebben. Gebruik de schaduw echter wel heel zacht – en zorg er niet voor dat er een dikke zwarte rand zichtbaar wordt – want hierdoor wordt de leesbaarheid minder.

Gerelateerde blogs

Door: Lennart de Ridder • 2 jaar geleden

10 innovatieve webdesign trends voor 2019

Door: Lennart de Ridder • 1 jaar geleden

Top 11 UI- en UX-trends om winst te maken in 2019

Door: Lennart de Ridder • 3 jaar geleden

9 hypermoderne webdesigntrends voor 2018