De 8 belangrijkste websitetrends voor 2022

Blog
j

22 februari 2022

Ieder jaar verandert weer wat hot en trending is. In 2022 zien we ook veel nieuwe en terugkerende trends. Dit zijn dé trends die jouw website populair gaan maken:

Wil jij dat wij deze trends toepassen op jouw nieuwe website? Neem dan contact op via het formulier onderaan de pagina in of klik hier voor meer manieren om contact op te nemen.

Parallax

Parallax was vroeger ook al een hype, echter werd het toen overal gebruikt waar het kon. Parallax creëert een illusie van diepte door verschillende afbeeldingen op verschillende snelheid te laten bewegen op de achtergrond. Dit jaar wordt parallax weer net op een andere manier toegepast. Omdat het vroeger op zo veel plekken terugkwam werd het onoverzichtelijk en druk. De nieuwe trend is meer gefocust op het subtiel toepassen van parallax. Dit kan door bijvoorbeeld een achtergrondafbeelding op een net iets langzamer tempo te verplaatsen of veranderen. Dit creëert geen afleiding zoals parallax die vroeger werd toegepast.

Scrollytelling

Scrollytelling is een manier om een verhaal te vertellen terwijl er tijdens het scrollen animaties plaats vinden. Die animaties hebben het doel om de gebruiker een gevoel van interactie te geven en de gebruiker in het verhaal vast te houden door die interactie. Scrollytelling kan op verschillende manieren plaats vinden zoals: afwisselende tekst, veranderende afbeeldingen, interactive achtergronden, achtergrond animaties en meer. Een van de meest voorkomende effecten die worden gebruikt zijn het in en uit laten vloeien van elementen wanneer ze in beeld of uit beeld gaan. Scrollytelling kan compleet worden aangepast aan de wensen of doel van de website. Scrollytelling kan bijvoorbeeld worden gebruikt bij Journalisme, Brand storytelling, Product pages, Online Stores, Creative portfolios, Chronologische verhalen en meer.

Scrollytelling

Parallax was vroeger ook al een hype, echter werd het toen overal gebruikt waar het kon. Parallax creëert een illusie van diepte door verschillende afbeeldingen op verschillende snelheid te laten bewegen op de achtergrond. De trend die er nu aan komt is wel anders dan hoe het eerst was. Omdat het vroeger zo veel werd toegepast kwam het onoverzichtelijk en druk over. De nieuwe trend is meer gefocust op het subtiel toepassen van parallax. Dit kan door bijvoorbeeld een afbeelding die op de achtergrond is getoond op een net iets langzamer tempo te verplaatsen of veranderen. Dit creëert geen afleiding zoals parallax vroeger werd toegepast.

Aangepaste cursor

De meest voorkomende manier om een klik interactie uit te lokken bij de gebruikers is met een button. Een nieuwe manier is door een aangepaste cursor toe te passen. Bijvoorbeeld door van de cursor een button te maken wanneer de cursor over een clickable object gaat. Er wordt zo rechtstreeks feedback aan de gebruiker doorgegeven wanneer de cursor wordt bewogen.  Los van dit voorbeeld zijn er nog meer voorbeelden waarbij het aanpassen van de cursor de ervaring van de websitebezoekers kunnen veranderen.

Headers zonder afbeeldingen

De meeste websites hebben een hero image bovenaan de pagina. Hero images geven een eerste indruk over de website. De hero images trekken vaak de meeste aandacht wat leidt tot minder focus voor de boodschap die erbij hoort. Als er dus een niet passende afbeelding wordt gebruikt als Hero image zal dit een negatief effect hebben op de websitebeleving. Een manier om dit te voorkomen is als de hero image wordt vervangen door een kleiner product of helemaal wordt weggehaald. Dit zal meer aandacht geven aan de tekst en visuele stijl waarin die tekst is gepresenteerd en mogelijk een duidelijker beeld geven dan een hero image die net niet passend is.

Headers zonder afbeeldingen

De meeste websites hebben een hero image bovenaan de pagina. Hero images geven een eerste indruk over de website. De hero images trekken meestal de meeste aandacht wat leidt tot minder aandacht voor de boodschap die erbij hoort. Als er dus een niet juiste afbeelding wordt gebruikt als Hero image zal dit ook een negatief effect hebben op de website. Een manier om dit te voorkomen is als de hero image wordt vervangen door een kleiner product of helemaal wordt weggehaald. Dit zal meer aandacht geven aan de tekst en stijl waarin die tekst is gepresenteerd en mogelijk een duidelijker beeld geven dan een hero image die net niet goed is.

Pagina laad snelheid

Google is continu bezig met het optimaliseren van de zoekmachine. In 2021 heeft Google het algoritme aangepast. Hierdoor blijft het belangrijk om rekening te houden met de laadt snelheid van de webpagina´s. Uit een van de onderzoeken is gebleken dat 53% van de mobiele gebruikers een website wegklikt als de pagina langer dan 3 seconden nodig heeft om te laden. Met de tool Google PageSpeed Insights kan de websitesnelheid gemeten worden.

Glassmorphism

Glassmorphism een trend die al wat langer bestaat maar steeds meer toegepast zal worden. Glassmorphism is de optische illusie om een glas achtig effect te creëren. De optische illusie ontstaat door een combinatie van transparantie, vervaging en een schaduw van een object. Er kan eventueel ook nog een subtiele beweging worden toegepast om het glas een 3D effect te geven. Dit effect kan worden gebruikt in een logo, illustraties of in hele blokken op webpagina’s.

Glassmorphism

Glassmorphism een trend die al wat langer bestaat maar steeds meer toegepast zal worden. Glassmorphism is de optische illusie om een glas achtig effect te creëren. De optische illusie ontstaat door een combinatie van transparantie, vervaging en een schaduw van een object. Er kan eventueel ook nog een subtiele beweging worden toegepast om het glas een 3D effect te geven. Dit effect kan worden gebruikt in logo, illustraties of in hele gedeeltes op de webpagina.

Dark mode

Steeds meer apparaten hebben de mogelijkheid om een dark mode toe te passen. Het is momenteel meer een unieke toevoeging omdat het met name beter te lezen is in donkere ruimtes en verder niet veel toevoegt voor de gebruiker. Let er wel op dat een dark modus een paar nadelen heeft. Het is voor bepaalde oogafwijkingen en mensen met kleurenblindheid moeilijker te lezen in vergelijking met een lichtere modus. Echter is dark mode een unieke manier om jouw website mee te onderscheiden aangezien de meeste websites een lichtere achtergrond hebben. Het is voor de toekomst belangrijk om rekening te houden met websitebezoekers die een dark modus willen. Zij kunnen momenteel steeds gemakkelijker een dark modus forceren door middel van hun systeem of browser. Het is daardoor dus een overweging om de website bezoekers te kunnen laten kiezen op de website of om de kleuren van de website zo uit te kiezen dat de kleuren duidelijk leesbaar zijn op beide versies.

Interactive fonts / Kinetic Typography

Kinetic Typography is de trend waarbij tekst beweegt en vervormd. Het werd vroeger gebruikt om een verhaal te vertellen met animerende tekst maar tegenwoordig is er veel meer mogelijk. Kinetic Typography kan op verschillende manieren worden toegepast. Het aanpassen van het font wanneer er een interactie is met de website bezoeker maar ook het compleet vervormen van de tekst bij het scrollen zijn twee manieren waarbij Kinetic Typography toegepast kan worden.

Het aanpassen van fonts bij een interactie met de website bezoeker kan zijn aandacht trekken, een specifieke toon zetten, belangrijke gedeeltes extra aandacht geven en de gebruiker door de pagina begeleiden.

Interactive fonts / Kinetic Typography

Kinetic Typography is het principe waarbij tekst beweegt en vervormd. Het werd vroeger gebruikt om een verhaal te vertellen met animerende tekst maar tegenwoordig is er veel meer mogelijk. Kinetic Typography kan op verschillende manieren worden toegepast. Het aanpassen van het font wanneer er een interactie is met de gebruiker maar ook het compleet vervormen van de tekst bij het scrollen zijn twee manieren waarbij Kinetic Typography toegepast kan worden. Het aanpassen van fonts bij een interactie met de gebruiker kan zijn aandacht trekken, een specifieke toon zetten, belangrijke gedeeltes extra aandacht geven en de gebruiker door de pagina begeleiden.

Weten wat we voor jou kunnen doen?

Neem dan contact met ons op via onderstaand formulier.