Na een jaar als dat van zojuist 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 zal 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.
Tussen dimensie en interactie
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!
Web Design Trends 2021: Scrollen
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?
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.
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.
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.
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.
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.
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 zo veel mogelijk in één richting te blijven. Te vaak van richting veranderen zal je gebruikers in verwarring brengen.
- Wees voorzichtig met de combinatie van lange teksten en horizontaal scrollen. Deze lay-out kan de teksten minder leesbaar maken.
Welk lettertype past bij mijn website?
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.
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
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.
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.
Andere bijzondere kenmerken zijn de tekstanimaties die steeds opnieuw worden geladen, evenals het Infinite Scrolling, dat ons het gevoel van een oneindige website geeft.
Webdesign Trends 2021: Spannende Layouts
Integratie van de fysieke kenmerken van het te verkopen product
Ora London verkoopt onder andere nagellak. Voor de design lay-out van hun website gebruiken ze de textuur van hun product.
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.
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:
- Neumorphism is moeilijk te reproduceren. Als het ontwerp niet mooi gemaakt is, ziet het er al snel vrij onprofessioneel uit.
- 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.
Tutorial: zo maak je neomorfisme-elementen
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.
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.
Webdesign trends 2021: kleuren
Organisch en onopvallend
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
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
Web Design Trends 2021: 3D Effecten
Icons en afbeeldingen
Net als bij virtual reality (VR) wachten we al lang 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. Voorspeld wordt dat dit in 2021 niet anders zal zijn.
3D-elementen zullen in 2021 steeds meer worden gebruikt: bijvoorbeeld ter vervanging van 2D-pictogrammen en -illustraties, om producten voor te stellen en als geometrische ontwerpelementen.
We zullen 3D ook zien als een interactief onderdeel van de website, zoals bij het bureau Dogstudio.
Of als een statisch, of beter gezegd geanimeerd element, zoals te zien is in het volgende voorbeeld.
E-commerce
Augmented reality is in het verleden sporadisch gebruikt voor e-commerce doeleinden.
Diesel daarentegen vertrouwt meer op de interactieve 3D-variant.
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:
Web Design Trends 2021: Content
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.
Op Madwells contactpagina is elk grafisch element interactief.
Met veel persoonlijkheid biedt Sennep zijn diensten aan.
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.
"*" geeft verplichte velden aan
Conclusie over de webdesigntrends 2021
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 on-lineproducten is daarom bijzonder belangrijk – ook omdat de concurrentie veel groter is. En in de toekomst kunnen we het ons niet langer veroorloven onderwerpen als toegankelijkheid buiten beschouwing te laten.
Natuurlijk kan een videogesprek een belangrijke persoonlijke ontmoeting niet vervangen. Maar misschien leren wij door de huidige situatie onderscheid te maken tussen wat echt belangrijke vergaderingen zijn en wat eventueel ook met behulp van een telefoontje kan worden gedaan. Deze aanpak komt vaak tot uiting 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 zullen mobiel ontwerp, prestaties, gebruiksvriendelijkheid en dergelijke ook in 2021 belangrijke factoren blijven bij de creatie van je website.
Jouw vragen over de webdesigntrends 2021
Vertel ons jouw vragen en voorspellingen over de webdesigntrends 2021 hieronder in de comments – we zijn benieuwd. Wil je op de hoogte blijven van nieuwe WordPress artikelen? Volg Raidboxes dan op Twitter, Facebook en via onze nieuwsbrief.
