8 niet te missen webdesign trends in 2022

Donderdag 17 maart 2022

Nieuw jaar, nieuwe webdesign trends! Iedere dag gaan er wereldwijd naar schatting vijfhonderdduizend nieuwe websites online. Geen wonder dus dat webdesigners én ondernemers nadenken over hoe hun website er nu best uitziet anno 2022. Team Webhero selecteerde acht website-design trends die je niet mag missen.

Trend 1: Dark Mode

Dark mode maakt zijn opkomst! Dark mode aanbieden is één van de beste manieren om de user experience of gebruikservaring van je website te boosten. Zo hebben steeds meer applicaties, zoals apps en websites, de mogelijkheid om te switchen tussen light mode en dark mode. 

Wat is dark mode of donkere modus? Dark mode is een techniek waarbij de achtergrond van een scherm donker is en de teksten licht zijn van kleur. Bij light mode of lichte modus, vaak de standaardversie, is dit vanzelfsprekend omgekeerd. Hier is de achtergrond licht en zijn de teksten donker van kleur. 

Maar waarom zou je gebruik gaan maken van de dark mode? De meeste websites hanteren een lichte achtergrond en donkere teksten, daardoor is het gebruik van de dark mode vaak iets unieker. Ook is de dark mode een populair gegeven, steeds meer gebruikers wisselen af tussen de twee. Uit onderzoek is ook gebleken dat het gebruik van de dark mode minder vermoeiend is voor je ogen in een donkere en slecht belichte ruimte. In een goed belichte ruimte is de light mode dan weer beter voor de ogen. 

De optimale oplossing is dus om beiden aan te bieden. Voor websites zal beide modussen aanbieden nog niet voor iedereen een optie zijn. Dit omdat de ontwikkelingskosten om deze techniek toe te passen voor sommigen nog te hoog zullen zijn. 

Wel is er de mogelijkheid voor Webhero-klanten om je design regelmatig af te wisselen van een lichte modus naar een donkere modus aan de hand van de Webhero design voorkeuren of de design shaker. 

Tip: Vergeet niet dat het contrast tussen leestekst en de achtergrondkleur voldoende moet zijn om het leesbaar te maken!

Trend 2: Typografie: bigger, bolder, better 

Speel met typografie! 

Wat is typografie? Typografie is de kunst van het vormgeven, zetten en drukken van tekst, zowel voor functionele als esthetische doeleinden. Met andere woorden is typografie dus het het vormgeven van teksten. 

Maak typografie het visuele middelpunt of de focus van de website. Het kiezen van een lettertype helpt mee de toon te zetten voor wat het publiek van de website verwacht. Belangrijk bij typografie is dat soms hoe groter en gedurfder de typografie, hoe een grotere en langere nadruk of indruk een website kan nalaten. De typografie moet dus  de impact op de bezoekers maximaliseren. Daarom is het belangrijk om de juiste balans te vinden tussen de grootte en de schaal van de typografie.

Hoe speel je met typografie? Geef je tekst vorm op verschillende manieren. Zo kan je verschillende groottes, lettertypes, kleuren, vormen en vullingen door elkaar gebruiken. Ook kan je gebruik maken van animaties, contouren, flex-opties en nog veel meer.  Zo kan de typografie een grafisch element worden. 

Tip: Zorg ervoor dat je tekst niet overweldigend of onleesbaar wordt. 

Tip tip: Hou rekening met de gebruikservaring , zorg ervoor dat de typografie responsive is voor gebruik op andere toestellen zoals mobiel gebruik.   

Hoe geef ik mijn tekst vorm? Haal inspiratie uit de Webhero-designs:

Trend 3: Bye bye hero images

Geen hero image voor op je homepagina? Geen probleem! Ontwerp je homepagina zonder afbeelding en je bent helemaal trendy in 2022.

Wat is een hero image of helden afbeelding? Een hero image is een ontwerpterm die wordt gebruikt om een grote afbeelding, foto of video (soms in de vorm van een banner) bovenaan een website te beschrijven. Deze afbeelding wordt bij de boodschap van de website geplaatst en wordt ook wel hero header of heldenkop genoemd.

Tegenwoordig heeft bijna elke website een hero image naast zijn hero header. De trend voor 2022 is dan om te gaan focussen op de hero header in plaats van op de hero image.

Door de website eenvoudig te houden, wordt vaak de toon gezet waarom bezoekers in de eerste plaats op de website zijn en waarom ze moeten blijven scrollen. Het achterwege laten van een afbeelding zorgt dus ook voor een beetje mysterie, waardoor bezoekers worden verleid om te ontdekken wat er nog meer achter de website ligt. 

Door een ontwerp zonder afbeeldingen te gebruiken, krijg je ook de kans om andere technieken uit te proberen zoals animaties, zweeftoestanden, tekstelementen, typografieën, kleuren, vormen  en andere interactieve elementen. Gebruik dus een andere techniek om interesse te wekken en spring er tussenuit. 

Wees dus niet bang om out-of-the-box te denken en de hero image weg te laten!

Inspiratie nodig? Bekijk een voorbeeld van een Webhero-website:

Trend 4: Collagestijl

Een website in collagestijl? Het is allemaal mogelijk in 2022!

Elementen in collagestijl weergeven op de website kunnen ervoor zorgen dat ze een tastbaar gevoel geven, dat ze meer witruimte in een ontwerp openen en dat ze in staat zijn om meerdere afbeeldingen op te nemen en dus niet het gehele ontwerp rond één afbeelding concentreren. Ook zorgt het ervoor dat je een duidelijk overzicht of navigatie hebt van wat je op de website kan terugvinden.

Tip: Zorg er dus voor dat je vormen, patronen en kleuren door elkaar haalt om een beter collage-effect te creëren op de website. 

Weet je niet hoe? 

Trend 5: Split-screen

Split-screen design, een trend die weer zijn opmars maakt in de webdesign-wereld. 

Split-screen is een techniek om een website op te splitsen in twee onderdelen, of twee aparte “beelden”. Zo kan het scherm horizontaal maar ook verticaal gesplitst worden, waarbij elke zijde dezelfde of verschillende functionele klikmogelijkheden heeft. 

De split-screen techniek is eerst en vooral gekend voor zijn bruikbaarheid en responsieve redenen. Het is een handige techniek om toegankelijk te zijn op verschillende devices of  toestellen zoals desktops, laptops, smartphones en tablets. Als tweede geeft deze dubbele lay-out het design meer contrast, visueel belang en een natuurlijke scheiding van de inhoud op de website. Ook is het een goede manier om met kleuren te spelen. 

Hoe kan je je website gaan split-screenen? Ontdek het in een Webhero-design:

Trend 6: Lagen

Maak gebruik van overlappende elementen of lagen!

Wat bedoelen we met overlappende elementen of lagen? Elementen die op elkaar stapelen of elkaar overlappen. Deze kunnen een verbinding tussen ontwerpelementen maken en een diepte-effect creëren. 

Zo kan je een verscheidenheid aan elementen samenstellen op een manier die visueel interessant en zinvol is, waardoor je een visueel samenhangend geheel krijgt. Wat een ervaring oplevert. 

Meerdere contentlagen zijn dus een goede manier om onze ogen uit te dagen. Door elementen die we gewoon zijn te veranderen, gaan we visuele interesse creëren en hierdoor gaan gebruikers meer tijd besteden aan het verkennen van een website. Denk bijvoorbeeld aan fotogalerijen en typografische elementen die een ervaring creëren en het website-verhaal vertellen. 

Nog een voordeel van deze techniek is dat het makkelijker wordt om veel inhoud in een beperkte sectie of ruimte samen te voegen. Ideaal voor mobiel gebruik dus!

Hoe overlap je lagen of elementen? Kijk hoe Webhero het doet:

Trend 7: Parallax scrolling 

Para… wat? 

Parallax scrolling is een trend of techniek die wordt gebruikt tijdens het scrollen op websites. Hierbij wordt de achtergrondinhoud met een andere snelheid verplaatst dan de voorgrondinhoud. Deze techniek kan dus plaatsvinden wanneer allerlei fotolagen, illustratielagen en tekstlagen over elkaar schuiven tijdens het scrollen op een website. 

Wanneer je parallax op de juiste manier gebruikt, kan het je website dynamischer maken. Zo kan je met meerdere lagen werken die los van elkaar bewegen, en dit zorgt dan voor meer diepte en beleving. Pas wel op, wanneer je overbodig veel gebruik maakt van parallax, kan het ervoor zorgen dat je website chaotisch en onoverzichtelijk wordt. Less is more!

De Webhero designs maken reeds gebruik van parallax scrolling. Check it out:

Trend 8: Contrasterende kleuren

Maak gebruik van kleur! Meer specifiek, maak gebruik van contrasterende kleuren.

Gedurfde, heldere en verzadigde kleuren helpen je merk te onderscheiden van veel andere bedrijven die de afgelopen jaren voornamelijk zachte, neutrale kleuren hebben gekozen. 

Kleur is namelijk een basis-hulpmiddel dat helpt om de focus van de gebruiker te krijgen en emotie te stimuleren. Gebruik maken van kleur kan bevrijdend werken en creativiteit een boost geven. 

Wil je meer inspiratie? Bekijk dan de Webhero designs en websites hieronder. 

Meer Webhero designs

Meer Webhero websites