Webdesigntrends 2021: Scrollytelling, 3D-effecten & meer interactie

Sonja Hoffmann Laatst bijgewerkt op 14.07.2021
10 Min.
Web Design Trends-2021
Laatst bijgewerkt op 14.07.2021

Na een jaar als dat we net achter de rug hebben, is het bijna utopisch om vooruit te blikken op de komende trends. Wie had immers in 2020 kunnen denken hoe snel de wereld kan en zou veranderen? En hoe snel we ons kunnen aanpassen aan de veranderingen. Laten we samen een blik werpen op de webdesigntrends van 2021!

Het nieuwe normaal heeft ons allemaal stevig in zijn greep: technologie is belangrijker voor ons geworden en steeds meer in ons dagelijks leven geïntegreerd. Als gevolg daarvan moet onze technologie in een richting gaan die meer personalisering, integratie en interactie mogelijk maakt. En dat voor ons allemaal. 

Lockdown, thuiskantoor en dergelijke hebben onze focus meer verschoven naar het digitale. Deze trend veroorzaakt echter ook een snelle groei in digitale producten. Hetzelfde geldt voor de sector van de e-commerce. Dit alles vereist meer individualiteit en vaardigheid om zich ten opzichte van een groter aantal concurrenten te kunnen positioneren.

Op dit moment is het belangrijk om de aandacht te richten op de eindgebruikers. Het gaat erom dat ze verbaasd worden, geïntegreerd worden en het internet gepersonaliseerd wordt. En om de focus daarbij altijd op de maximale functionaliteit te leggen.

In het nieuwe jaar zien we dus meer mogelijkheden voor personalisatie. We zien vaker de mogelijkheid om te schakelen tussen de Dark/Light Mode of zelfs de kleuren van een ontwerp zelf aan te passen.

We zien ontwerpen die meer gedurfd en minder symmetrisch zijn. De tegen-trend naar de integratie van organische kleuren en elementen blijft. Wij bereiken meer persoonlijkheid door collages, gemengde media en de integratie van animatie-effecten. Laten we de webdesigntrends van 2021 nu eens in detail bekijken!

1. Scrolling

Parallax & Parallax Scroll animaties

Parallax, vooral met eenvoudige beelden, gebruiken we al enkele jaren. Onlangs hebben we complexe parallax scroll animaties toegevoegd. Als deze op de juiste manier gebruikt worden, veranderen ze jouw website van een vlakke 2D-achtige achtergrond in een interactieve digitale wereld - vergelijkbaar met een theaterpodium.

Wat is het parallax effect?

Parallax effecten ontstaan wanneer elementen zich op verschillende afstanden van elkaar bevinden. Als deze bewegen door te scrollen, nemen we hun beweging als verschillende snelheden waar.

Let op: Voor gebruikers die aan duizeligheid lijden, kan te veel beweging op je website ongemak veroorzaken.

Een paar tips over hoe je het Parallax effect succesvol kunt integreren:

  • Zorg ervoor dat belangrijke informatie altijd duidelijk wordt gepresenteerd en niet wordt overtroeft door een effect.
  • Let erop dat de gehele functionaliteit van je site op alle apparaten behouden blijft - zelfs onder suboptimale omstandigheden, zoals een slechte internetontvangst.
  • Minimaliseer het gebruik van parallax effecten.
  • Overweeg een optie om het effect uit te schakelen.
Web Design Trends-2021

De website voor het spel Firewatch gebruikt acht verschillende PNG-afbeeldingen in de header, die het gevoel van een echt landschap overbrengen, omdat ze samen geanimeerd zijn. In de mobiele versie is het parallax-effect echter vervangen door een statische afbeelding.

Scroll animaties

Uitgebreide scroll animaties zijn ook niet geheel nieuw, maar hebben tot nu toe minder aandacht gekregen, waarschijnlijk niet in de laatste plaats omdat de compositie ervan tekenvaardigheid vereist. Zoals altijd geldt ook hier: minder is meer. Scroll animaties geven je website een harmonieuze flow, mits ze goed ingezet zijn. 

Web Design Trends-2021

ToyFight is een creatief bureau gevestigd in Manchester. Door het slimme gebruik van scroll-getriggerde animaties voegt het bureau levendigheid en persoonlijkheid toe aan hun website. Zelfs op kleinere toestellen werken de animaties - ook al wordt de laadtijd enigszins beïnvloed.

Web Design Trends-2021

Het bedrijf Prevint biedt een totaalconcept tegen geseksualiseerd geweld. Door het minimale gebruik van scroll animaties worden de drie belangrijkste voorzorgsmaatregelen voor preventie gevisualiseerd. Bijzonder hier is het gebruik van verticaal en horizontaal scrollen: de hoofdnavigatie bevindt zich op een verticaal niveau, terwijl horizontaal scrollen dieper ingaat op het betreffende onderwerp.

De navigatiepijlen onderaan het scherm zorgen voor extra oriëntatie. In de mobiele versie gebeurt de navigatie alleen door op de buttons te klikken.

Horizontaal scrollen

Hoewel de meningen over horizontaal scrollen in het verleden sterk uiteenliepen, zien we dat websites er steeds vaker gebruik van maken. Vooral vanuit het oogpunt van de User Experience werd het gebruik ervan tot nu toe als nogal dubieus beschouwd.

Web Design Trends-2021

De website van Home Société, die als een one pager opgebouwd is, werkt volledig horizontaal georiënteerd. De sticky navigation, die we gewoonlijk bovenaan vinden, bevindt zich aan de linkerkant. Het werkt op dezelfde manier met Anchor Links als in een verticaal georiënteerde One Pager. Op mobiel wordt de pagina verticaal weergegeven.

Web Design Trends-2021

De website van Kwok Yin Mak is een design portfolio dat door alle geïntegreerde pagina's horizontaal scrollt. Het verschil met Home Société is het gebruik van Infinite Scrolling: als je aan het eind van een pagina komt, word je ongemerkt teruggebracht naar het begin. Deze pagina maakt op mobiele apparaten ook geen gebruik horizontaal scrollen.

Een paar tips over hoe je horizontaal scrollen succesvol kunt integreren:

  • Geef je gebruikers een plan B, zoals pijlen of een sticky menu, om op je site te navigeren.
  • Bedenk welke inhoud op jouw pagina profiteert van horizontaal scrollen.
  • Probeer je zoveel mogelijk op één richting vast te leggen. Als je te vaak van richting verandert, brengt dit je gebruikers in verwarring.
  • Wees voorzichtig met de mix van lange teksten en horizontaal scrollen. Deze opmaak kan je teksten minder leesbaar maken.
Welk lettertype past bij mijn website?

Een geschikt lettertype maakt je website niet alleen visueel veel interessanter. Fonts hebben een cruciale invloed op het al dan niet negeren of lezen van tekstgedeelten. In dit artikel laat ik je zien hoe je het perfecte lettertype voor je website vindt!

Scrollytelling

Scrollytelling betekent visuele storytelling door middel van geanimeerd scrollen. Dit geeft de website persoonlijkheid en een gevoel van interactiviteit. Lange inhoud kan makkelijker worden verwerkt. Verhalen worden op een interessantere manier opgebouwd en aantrekkelijkere gecommuniceerd. Het internet wordt steeds meer gebruikt als medium voor interactieve storytelling. 

Web Design Trends-2021

De New York Times hanteert hier een relatief minimalistische aanpak. De header image bestaat uit een parallax effect gevolgd door veel tekst. Dit is verpakt in duidelijke paragrafen en wordt visueel ondersteund door parallax secties in comic style.

Best practices, tips & guidelines in webdesign

Wat maakt een goed webdesign? En wat definiëren we eigenlijk als een ontwerpnorm? De belangrijkste tips voor succesvolle websites vind je in mijn artikel over best practices in webdesign.

Web Design Trends-2021

Een interessant voorbeeld is ook Webflow. De website nodigt je uit voor een reis door de kunstgeschiedenis en gaat op zoek naar de webdesigntrends van de toekomst.

Web Design Trends-2021

Op mobiele apparaten verliest het effect niet zijn aantrekkingskracht.

Web Design Trends-2021

canals-amsterdam.nl combineert scrollytelling met horizontale navigatie, animatie en parallax. Een bijzonder detail: het Sticky Menu verandert zijn achtergrondkleur afhankelijk van de kleur van de huidige positie. Meer informatie over dit onderwerp is te vinden in de Scrollytelling Guide.

Scrolling Cards

Met Scrolling Cards bedoelen we verticaal of horizontaal scrollen, dat in het volgende venster in elkaar grijpt voordat we verder navigeren. Je kunt dit visueel benadrukken, bijvoorbeeld door gekleurde scheidingen, die het gevoel van kaarten overbrengen, zoals in het voorbeeld van Green Meadow.

Web Design Trends-2021

Andere bijzondere kenmerken zijn de tekstanimaties die steeds opnieuw worden geladen, evenals het Infinite Scrolling, dat ons het gevoel van een oneindige website geeft.

2. Ontwerpcomposities en lay-out

Integratie van de fysieke kenmerken van het te verkopen product

Web Design Trends-2021

Ora London verkoopt onder andere nagellak. Voor de design lay-out van hun website gebruiken ze de textuur van hun product.

Web Design Trends-2021

Op de website van Main Squeeze Juice staan gekleurde vlekken die kunnen lijken op een uitgewassen versie van hun vruchtensappen. Dit effect wordt ook gebruikt voor sommige headings.

Web Design Trends-2021

Ora The Floral Agency heeft haar website visueel uitgelicht met bloemen uit hun assortiment. 

Neumorphism

Neumorphism of neomorfisme is al geruime tijd een trend. Maar waarom de minimalistische designs in de creatieve scene met afkeer behandeld werden, is vooral te wijten aan deze twee redenen:

  1. Neumorphism is moeilijk te reproduceren. Als het ontwerp niet mooi gemaakt is, ziet het er al snel vrij onprofessioneel uit.
  2. Door zachte schaduwen en een laag contrast kunnen elementen in het neomorfisme ontwerp problemen bij de eindgebruiker veroorzaken. 

In 2021 zal de neomorfisme trend een nog grotere vlucht nemen. De template Neu Vision toont een functionele integratie van Neumorphism.

Web Design Trends-2021
Tutorial: zo maak je neomorfisme-elementen

Met de tool Neumorphism.io kun je zelf met Neumorphism aan de slag. De overeenkomstige CSS-code is in het pakket opgenomen. Meer informatie over dit onderwerp vind je in dit artikel.

Abstracte composities, collage & mixed media

Zoals al genoemd, mogen websites meer persoonlijkheid tonen. Een manier om dit te bereiken is door middel van abstracte composities of collages. Het mixen van verschillende media - zij het handgetekende illustraties gekoppeld aan perfecte geometrische vormen - is ook toegestaan.

Web Design Trends-2021

City Circus gebruikt collages op hun hele website.

Vervaging en Frosted Glass Effect

Het Frosted Glass Effect is ideaal om tekst op afbeeldingen leesbaar te maken. Het kan ook worden gebruikt als een hover-effect. Een tutorial over hoe je het Frosted Glass Effect in CSS kunt implementeren, vind je hier.

Web Design Trends-2021
Bron: Codepen.io

3. Kleuren

Organisch en onopvallend

Web Design Trends-2021

De website pureorganix.ca gebruikt weinig en heldere, natuurlijke kleuren. Organische tinten zijn er al een tijdje en zullen ook in 2021 een thema blijven.

Zwart Wit

Web Design Trends-2021
Website: UX Databank

De volledige afwezigheid van kleur zorgt ervoor dat je website er minimalistisch, overzichtelijk en duidelijk uitziet. De serieuze touch die door het weglaten van vriendelijke tinten ontstaat, heeft UX Database goed in balans gebracht door illustraties te gebruiken.

UX Design & Web Usability

Waarom zou je als webdesigner geïnteresseerd zijn in Usability en User Experience? En hoe bereik je echt toegevoegde waarde voor je gebruikers door een goede UX? Dat en meer vertel ik in dit artikel.

4. 3D

Icons en afbeeldingen

Net als bij Virtual Reality (VR) wachten we al een hele tijd op de grote doorbraak van 3D-objecten. Zoals aan het begin van elk jaar wordt verwacht dat 3D-elementen en VR vanaf nu een grotere rol zullen spelen. Dit zal ook voor 2021 niet anders zijn.

3D-elementen zullen in 2021 steeds vaker worden gebruikt: bijvoorbeeld als vervanging voor 2D icons en illustraties, om producten weer te geven, en als geometrische ontwerpelementen.

We zullen 3D ook zien als een interactief onderdeel van de website, zoals bij het bureau Dogstudio.

Web Design Trends-2021

Of als een statisch of geanimeerd element, zoals in het volgende voorbeeld te zien is.

Web Design Trends-2021
Website: https://www.yaya.co/

E-commerce

Augmented reality is in het verleden al sporadisch voor e-commerce doeleinden gebruikt. Zoals bij de IKEA app.

Web Design Trends-2021

Diesel daarentegen vertrouwt meer op de interactieve 3D-variant.

Web Design Trends-2021

Beide benaderingen zijn zinvol voor het betreffende product. Het virtueel kunnen testen van meubels in je toekomstige woning vermindert niet alleen de kans op een slechte aankoop. De app is ook leuk en biedt inspiratie voor het decoreren en winkelen.

Diesel daarentegen probeert een soort 3D-gevoel te creëren door eindgebruikers in staat te stellen om het product te onderzoeken en virtueel te voelen voordat zij het kopen.

In het verleden was de integratie van augmented/virtual reality-elementen en 3D-elementen vaak erg duur en daarom aan grotere bedrijven voorbehouden. Met de nieuwe tools is de integratie van augmented reality (AR) nu ook voor kleinere bedrijven mogelijk geworden.

Hier zijn twee voorbeelden:

5. Contents

Het web wordt persoonlijker, interactiever en past zich aan ons aan

Een voorbeeld voor interactiviteit biedt Google met zijn Blob Opera. De eigen creaties kunnen ook worden opgenomen en zo met iedereen worden gedeeld.

Web Design Trends-2021

Op Madwells contactpagina is elk grafisch element interactief.

Web Design Trends-2021

Met veel persoonlijkheid biedt Sennep zijn diensten aan.

Web Design Trends-2021

Webdesign for Causes

Bovendien heeft juist 2020 aangetoond dat we allemaal met elkaar kunnen netwerken en zelfs deels moeten. Het web is menselijker geworden. Webdesign for Causes wordt steeds relevanter. Ethische websites, groene websites, websites die zich voor onszelf en onze medemens inzetten (om maar een paar onderwerpen te noemen) zijn het afgelopen jaar sterk in belang toegenomen. We kunnen ervan uitgaan dat deze trend zich in ieder geval in 2021 sterk zal voortzetten.

Conclusie

In contact blijven met vrienden van over de hele wereld, op afstand werken, producten en diensten online verkopen - dit is niets nieuws. En toch was dat tot nu toe meer de realiteit voor een minderheid van de bevolking. 

Veel bedrijven en mensen hebben het onderwerp tot nu toe nogal traditioneel benaderd: we hebben weliswaar de mogelijkheden voor de aanwezigheid op het web en voor netwerken, maar we gebruiken ze alleen in tweede instantie. Het persoonlijke contact stond op de voorgrond. 

De functionaliteit van onze online producten is daarom heel belangrijk, ook omdat de concurrentie veel groter is. En in de toekomst kunnen we het ons niet langer veroorloven om onderwerpen als toegankelijkheid te negeren.

Natuurlijk kan een videogesprek niet in de plaats komen van een belangrijke persoonlijke ontmoeting. Maar misschien leren we door de huidige situatie om onderscheid te maken tussen wat echt belangrijke vergaderingen zijn en wat ook met van een telefoontje gedaan kan worden. Deze aanpak wordt vaak weerspiegeld in de kwaliteit van de digitale aanwezigheid. 

Zinnen als "Als iemand het wil weten, belt hij ons of vraag het" heb ik in het verleden vaker gehoord bij het plannen van online projecten. Met de nieuwe focus op isolement en homeoffice hebben we die luxe niet meer.

Daarom blijven ook in 2021 mobiel design, performance, usability en dergelijke belangrijke factoren bij het maken van je website.

Web Design Trends-2021
Twitter

Door de tweet te laden, accepteert u het privacybeleid van Twitter.
Meer informatie

Inhoud laden

PGJsb2NrcXVvdGUgY2xhc3M9InR3aXR0ZXItdHdlZXQiIGRhdGEtd2lkdGg9IjU1MCIgZGF0YS1kbnQ9InRydWUiPjxwIGxhbmc9ImVuIiBkaXI9Imx0ciI+UGVvcGxlIG9mdGVuIGZvcmdldCBhYm91dCBjb2duaXRpdmUgaW1wYWlybWVudC4gIE5vLCB0aGF0JiMzOTtzIG5vdCBhbiBpbnRlbnRpb25hbCBwdW4uIDxicj5OaWNlIGV4dGVuc2lvbiBvZiA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL01pY3Jvc29mdD9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5AbWljcm9zb2Z0PC9hPiBpbmNsdXNpdmUgZGVzaWduIHdlIGRpZCBhdCB0aGUgPGEgaHJlZj0iaHR0cHM6Ly90d2l0dGVyLmNvbS9Nb0pHb3ZVSz9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5ATW9KR292VUs8L2E+LiAoYXBvbG9naWVzIHRvIGxhcnJ5IG1pbGVzLCB0b21hc3oga29sZWNraSwgamVuIGxlbW9uIGV0IGFsIGNhbiYjMzk7dCBmaW5kIHlvdSBvbiB0d2l0dGVyISkgPGEgaHJlZj0iaHR0cHM6Ly90LmNvL3NkU0hQMDRGeWYiPnBpYy50d2l0dGVyLmNvbS9zZFNIUDA0RnlmPC9hPjwvcD4mbWRhc2g7IE1hcmsgTWNFbGhhdyAoQG1hcmttY2VsaGF3KSA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL21hcmttY2VsaGF3L3N0YXR1cy85ODkwNDk5MzM4MTc5NjI0OTc/cmVmX3NyYz10d3NyYyU1RXRmdyI+QXByaWwgMjUsIDIwMTg8L2E+PC9ibG9ja3F1b3RlPjxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL3BsYXRmb3JtLnR3aXR0ZXIuY29tL3dpZGdldHMuanMiIGNoYXJzZXQ9InV0Zi04
Jouw vragen over de webdesigntrends 2021
Verklap aan ons jouw vragen en voorspellingen over de webdesign trends van 2021 hieronder in de commentaren - we zijn benieuwd. Wil je op de hoogte blijven van nieuwe berichten rondom WordPress? Volg RAIDBOXES dan op Twitter Facebook en via onze newsletter.

Na haar studie Game Design en Creative Writing in het groene Auckland heeft Sonja Hoffmann zich gespecialiseerd in web- en app-desgign en de ontwikkeling daarvan. Haar focus ligt op gamification en het verkennen van gebruikersmotivatie en ervaring, gekoppeld aan haar passie en nieuwsgierigheid voor technologische trends.

Gerelateerde artikelen

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.