Wil je weten wat hip is in de wereld van webdesign? Hier zijn de belangrijkste webdesigntrends voor 2022 die je zeker moet kennen. Veel plezier!

Sommige bedrijven gaan voor een traditionele stijl. Anderen willen bijblijven op het gebied van design. Het maakt niet uit tot welke groep jij behoort en voor wie je je websites ontwerpt: het kan nooit kwaad om te weten welke trends in webdesign momenteel in trek zijn. 

De laatste jaren is een goede gebruikerservaring een van de webdesigntrends bij uitstek. En een focus op een betere UX moet en kan altijd worden geïntegreerd – ongeacht welke brandingstrategie je klanten volgen.

Headers: Grote video's & sterke typografie

Video's in bioscoopstijl 

Video's als schermvullende headers zijn in de mode. Met nieuwe, meer webvriendelijke formaten (zoals WebM) kunnen video's op grote schaal worden geïmplementeerd zonder de laadtijd te verkorten. Het bijzondere aan Cinema Style Video: Wie je website bezoekt, ziet niet alleen een aantrekkelijke video, maar zit meteen in de actie. Het bedrijf 11coffee heeft dit heel goed gedaan. 

Als je naar de video kijkt, heb je het gevoel dat je in een café zit. Je krijgt meteen een gevoel van de drukte. En je krijgt ook een idee van de producten die ter plekke worden aangeboden. Je kunt een persoonlijke band opbouwen met de medewerkers en het merk voordat je ze leert kennen.

Het bijzondere van deze stijl is dat bezoekers van je website onmiddellijk worden geïntegreerd. Dit helpt om de afstand tussen website en bezoeker, of product en klant te verkleinen. Bovendien minimaliseer je het gebruik van tekst op je website.

Een video die op zo'n belangrijke plaats wordt gebruikt, moet voorzien zijn van een fallback-image. Zo worden bezoekers bij twijfel niet begroet door een schermvullende foutmelding bij een slechte internetverbinding, maar zien ze tenminste een afbeelding.

Oversized typografie

Deze benadering biedt het tegenovergestelde van het volledig scherm. Oversized fonts kunnen worden ondersteund door visuals als slogans, zoals Best Boutique Hotels Worldwide.

Webfonts kunnen net zo te vinden zijn als het enige visuele element in de header van je website. In het voorbeeld van Onomatet fungeert de typo niet als een kop, maar als een navigatie-element.

Deze stijl kan onder bepaalde omstandigheden zeer minimalistisch zijn. In dit voorbeeld concentreert het zich op de essentie en voorkomt het dat bezoekers overweldigd worden door prikkels.

Laten we dit eens vergelijken met de video header van daarnet: Via de video worden nabijheid en persoonlijkheid opgebouwd. We ontwikkelen empathie met het product en de werknemers. Met behulp van het sobere en minimalistische gebruik van typografie wordt een koele afstand gecreëerd. En tegelijkertijd een soort elegantie. Het ontwerp voelt over het algemeen pragmatischer aan. 

Lay-out en visuele elementen in webdesign

Diagonale lijnen

Lijnen zijn al lang een populair visueel element in webdesign. Met het gebruik van diagonale lijnen kun je je ontwerp interessanter maken. Diagonale lijnen zijn meer "open" dan horizontale lijnen. Dat komt omdat diagonale lijnen inhoud met elkaar verbinden in plaats van deze te scheiden. 

Ze helpen dus enorm om door je inhoud te navigeren. Met behulp van diagonale lijnen kun je het oog van je doelgroep leiden. Navigeer ze naar de relevante delen van je website.

Kris Real Estate heeft wat mij betreft een wat krampachtige aanpak. Visueel vind ik de rode lijn die de muisaanwijzer achterlaat interessant. Het leidt echter af van de belangrijke inhoud – en een toegevoegde waarde is mij (nog) niet duidelijk.

Scrollbare tekstelementen

Scroll-effecten kunnen goed worden geïntegreerd met oversized kopteksten. Er zijn veel verschillende benaderingen hier.

De Peppasauce website bestaat bijna volledig uit een grote typo die beweegt als je scrollt. Dit geeft het anders nogal statische gevoel van de website mobiliteit.

Met Dot To Dot zien we een menu dat horizontaal scrollt.

In tegenstelling tot de twee voorgangers, gebruikt Pierre Grosjean scrollbare tekst als achtergrondelement. Zo kun je je website meer dynamiek geven zonder je bezoekers visueel te overbelasten.

Schaduwen en zwevende elementen

Flat design is blijven bestaan en vindt vandaag de dag nog steeds zijn plaats in webdesign. Flat Design evolueerde later naar Flat Design 2.0, waarbij vlakke graphics meer diepte krijgen door het gebruik van schaduwen.

In de toekomst zal deze stijl ons blijven vergezellen. Door verschillende soorten schaduwen te gebruiken, kun je je 2D-ontwerp ook het gevoel van verschillende lagen geven. Op die manier kun je belangrijke elementen naar de voorgrond halen. Dit kan goed gecombineerd worden met zwevende objecten. 

Hiermee kun je de diepte van 3D-ruimtes creëren door de rangschikking en het gebruik van 2D-elementen. Twee goede voorbeelden hiervan zijn My Mortgage Hub en Luminous.

Elementen die elkaar overlappen

We zagen in het vorige deel hoe je diepte kunt creëren met verschillende lagen en schaduwen. Een andere manier om met 2D design te spelen is door elementen over elkaar te plaatsen. 

Onder bepaalde omstandigheden kun je de fysische eigenschappen van je elementen opheffen. Achtergrondelementen liggen dan voor een voorgrondelement. Dit effect kan opzettelijk zijn, maar het kan ook tot verwarring leiden.

We vinden een goed gesorteerde aanpak bij The Stylist Group.

Wanneer de objecten elkaar overlappen, moet je ervoor zorgen dat er geen inhoud verloren gaat en dat alle teksten leesbaar blijven. Je kunt deze stijl prachtig implementeren met behulp van CSS Grid.

Interactieve webelementen

Een andere manier om de afstand tussen bezoekers en websitebeheerders te overbruggen is het gebruik van interactieve elementen.

Dit hoeft niet uitgebreid te zijn. De eerste vraag zou zijn: Wat biedt toegevoegde waarde voor jouw doelgroep? Bied een vragenlijst aan om je product aan te passen aan de voorkeuren van je doelgroep.

Interactieve elementen kunnen echter ook humoristisch zijn en geen directe toegevoegde waarde bieden, zoals op de website How Many Plants. Hier verandert de muisaanwijzer in een gieter en kun je met de muis over de planten gaan.

Duidelijke en opvallende call-to-action

Hier is nog een trend in webdesign die zich richt op de gebruikerservaring. In de toekomst moeten call-to-actions duidelijk en prominent aanwezig zijn. Buttons blijven ook vrij groot en volumineus, zodat we ze op mobiele apparaten zonder problemen kunnen bereiken.

Progressieve formulieren

Deze webdesigntrend komt ook de gebruikerservaring ten goede. Progressieve formulieren zijn formulieren die zijn opgedeeld in verschillende, duidelijke stappen. Ze zorgen ervoor dat je gebruikers niet meteen afhaken als ze grotere formulieren zien. 

Als bepaalde informatie eenmaal is ingevoerd, is het ook moeilijker om de geboekte vooruitgang te verlaten dan om het formulier te voltooien.

Concept & strategieën voor je website

Show donʼt tell

Een principe dat ik al lang ken op het gebied van creatief schrijven, zal in de toekomst ook van invloed zijn op webdesign. Met het "show don't tell" principe, maak je je merk of product begrijpelijk door de structuur en het gebruik van visuele elementen. In plaats van met veel woorden te goochelen, laat je je doelgroep via de look and feel weten wat je aanbiedt en wie erachter zit. Als je dit met succes doet, hoef je niet meer veel tekst te schrijven en wordt de website overzichtelijker en innovatiever.

We volgen dit concept vaak met scrollytelling. Hier vertellen we verhalen die zich zowel in beeld als in woord ontvouwen – vergelijkbaar met een digitale reis door de website. 

Het gebruik van full-screen video's ondersteunt de visuele weergave van je merk: je vertelt een verhaal over je merk of product zonder woorden te gebruiken.  

Google heeft een aantrekkelijke website ontwikkeld voor local guides. Het onderstreept elke stap met een animatie en legt op een begrijpelijke manier uit welke acties mogelijk zijn.  

Positief ontwerp met een humoristische twist

Na twee jaar van verontrustend nieuws, zoeken we naar een evenwicht. Webdesign wordt steeds humoristischer en gemakkelijker te verteren. Zelfs zogenaamd serieuze bedrijven mogen zich richten op positief design.

Kleine verrassingen doen ons glimlachen tijdens onze reis door het web. Bij Luminous krijgen we bijvoorbeeld bezoek van een schuwe kat die uit de rechterrand van het scherm gluurt.  

Lokale SEO

Als je merk een fysieke winkel heeft, houd het dan bij zoekwoorden en inhoud die gerelateerd zijn aan de omgeving. Op die manier word je gevonden en vermeld bij een zoekopdracht naar "service XY bij mij in de buurt". 

Lokale SEO bestaat al heel lang. In het begin werd het echter voornamelijk op de desktop gebruikt. Intussen speelt het ook een belangrijke rol voor mobiele apparaten. De Local SEO Guide bied je een uitgebreid inzicht.

Meer webdesign trends 2022 

Volgens een onderzoek van GermanUpa staan chatbots, kunstmatige intelligentie en AR/VR bovenaan de lijst van de meest irritante trends. Vooral met nieuwe technologieën moet je altijd bedenken voor wie je de website ontwerpt. Afhankelijk van de doelgroep kan het de moeite waard zijn om af te zien van bepaalde trends in webdesign.

Oud maar goud: trends die blijven

Wat we zullen blijven zien in 2022: 

• Gepersonaliseerde inhoud
• Lichte en donkere modus 
• Minimalisme 
• Accessibility
• Gebruikersgericht design
• Page Speed optimalisatie
• Micro interactions
• Mega footers