De belangrijkste trends in webdesign ANNO 2023

Het lijkt erop dat techniek en design steeds vaker hand in hand gaan. Onderwerpen zoals PageSpeed, schaalbaarheid en toegankelijkheid zorgen ervoor dat we als designer niet alleen bij ons eigen eilandje kunnen blijven dobberen, maar dat we onbekend terrein moeten verkennen en begrijpen. Daarom zijn een  aantal webdesign trends ditmaal iets meer techy dan normaal gesproken, maar zeker niet minder interessant!

Onze webdesign trends voor 2023 zijn:

1. Fluid typography
2. Lottie animaties
3. Neo Minimalisme
4. Webdesign voor een betere PageSpeed
5. Abstracte achtergronden en illustraties
6. Webdesign accessibility update

Trend 1: Fluid typography

Een goede typografie is onmisbaar voor een gebruiksvriendelijke website. Dat lijkt vanzelfsprekend maar vaak genoeg gaat dit goed mis. Niet alleen de juiste structuur en consistentie is belangrijk maar ook de leesbaarheid van het gebruikte lettertype. De leesbaarheid wordt namelijk grotendeels bepaald door het gekozen lettertype en het formaat. Het vinden van het ideale lettertype is niet altijd even overzichtelijk, het aanbod qua fonts is namelijk bijna eindeloos. Wij gebruiken het liefst Google Fonts, ook lekker voor je PageSpeed;)

Font-size

Om structuur in de content van het webdesign te creëren gebruiken we verschillende tekstgroottes (font-sizes) voor titels. Deze titels, ook wel headings genoemd, geven structuur aan de website door content op te splitsen in verschillende delen. Op deze manier wordt het voor gebruikers eenvoudiger en prettiger om teksten te begrijpen en te lezen. De juiste content-structuur is ook noodzakelijk voor een toegankelijke website en een goede SEO (Een goede Search Engine Optimization score zorgt voor een betere ranking in organische zoekresultaten).

Responsive

Iedere moderne website wordt tegenwoordig responsive gebouwd, dit betekent dat de website automatisch schaalt naar het gebruikte schermformaat. Dit zorgt ervoor dat de content op ieder scherm goed leesbaar is en dat alles werkt zoals het moet werken. Het is te makkelijk om dit hele proces over te schutting van de developer te gooien. De UX- en UI-designer zijn medeverantwoordelijk voor hoe de website op de juiste manier responsive schaalt. Houd hier dus rekening mee tijdens het designproces, zeker als het gaat om typografie.

Breakpoints

De meeste elementen van een responsive website schalen vloeiend over van het ene breakpoint (een vaste scherm breedte in pixels) naar het andere, een uitzondering is  de typografie. Deze schaalt niet vloeiend mee maar meer trapsgewijs en per breakpoint. Dit betekent dat er bijvoorbeeld een harde overgang is van een H1 titel op tablet naar mobiel. Of dit vloeiend gaat of trapsgewijs, is niet zo heel belangrijk. Wat wel belangrijk is, is dat tussen sommige breakpoints de tekstgrootte niet verandert. Je kunt  je voorstellen dat als een website een vrij grote  typografie gebruikt, dit op bepaalde schermformaten voor slecht leesbare resultaten zorgt.

Een oplossing zou zijn om met meer breakpoints te gaan werken om meer tussenstapjes te genereren. Dit zorgt er alleen wel voor dat de realisatie van een website complexer, duurder en een stuk lastiger te onderhouden is.

Vloeibaar

Een nieuwe ontwikkeling is fluid typography. Dit is simpelweg het schalen van teksten op basis van het schermformaat, meestal de breedte. Dit zorgt ervoor dat pagina’s veel meer in balans blijven en bijna geen onleesbare resultaten geven. Daarnaast ben je gelijk af van de harde overgangen van tekstgroottes bij een breakpoint. Wat wel goed afgestemd moet worden, is de minimale en maximale tekstgrootte. Als we dit niet doen, worden sommige teksten op mobiel te klein en op hele grote schermen te groot. Maar als dit lukt, is het resultaat erg fraai en vooral goed leesbaar.

Bijna de ultieme responsive website!

Zeker nu we langzaamaan steeds meer rekening moeten gaan houden met grotere schermen, waarbij de teksten vaak wel een tikje groter mogen zijn. Fluid typography wordt nog niet heel veel gebruikt, vooral omdat het pas recent door alle browsers wordt ondersteund. Daarnaast kan het zorgen voor problemen met de toegankelijkheid van je website als het niet op de juiste manier wordt geïntegreerd. Wij verwachten dat deze trend komend jaar een flinke vlucht gaat maken!

Trend 2: Lottie animaties

Way back in 2021 hebben we SVG (Scalable vector graphics) -animaties al even aangekaart als een upcoming webdesign trend die al je statische vector art tot leven brengt en hiermee je website uniek én een stuk dynamischer maakt. Inmiddels is dit een ontzettend populaire techniek die steeds vaker wordt gebruikt en gelukkig ook steeds beter wordt.

LottieFiles

Eén van de meestgebruikte methoden om SVG-animaties te realiseren is om je animatie te creëren in Adobe After Effects. Als je animatie klaar is om te testen, kun je met de LottieFiles plugin je animatie exporteren als code (JSON format). Dit format is programmeertaal onafhankelijk wat simpelweg inhoudt dat je de animaties op veel verschillende platformen kunt gebruiken, niet alleen op het wereldwijde web. Via de LottieFiles plugin kun je ook simpelweg de animatie exporteren naar je eigen LottieFiles library zodat je deze direct kunt testen, aanpassen en delen.

Om je animatie daadwerkelijk te gebruiken op je website of applicatie, kun je een embed code of een asset link genereren en deze aanleveren bij je favoriete developer.

Lottie animaties & PageSpeed

Ondanks dat Lottie animaties enorm lichtgewicht zijn, kunnen ze veel impact hebben op je PageSpeed score omdat er, even simpel gezegd, per animatie extra scripts worden ingeladen. Mocht je PageSpeed score droevig zijn en maak je gebruik van Lottie animaties, dan kunnen de volgende tips je score misschien verbeteren:

1. Houd je animatie simpel en subtiel. Beperk het aantal bewegende delen en hergebruik zoveel mogelijk elementen. Dit scheelt nou eenmaal veel regels aan code;
2. Plaats geen animatie above the fold (in je eerste scherm dus), dit zorgt door de extra laadtijd voor een lagere performance score;
3. Gebruik de ‘dotLottie player’ om gecomprimeerde versies van je animatie af te spelen.

SVG-animaties in de vorm van Lottie animaties zijn enorm populair en het gebruik hiervan zal voorlopig nog toenemen. Het enige grote nadeel is dus dat het impact kan hebben op je PageSpeed.

Hieronder een aantal voorbeelden van Lottie animaties:

Trend 3: Neo Minimalism

De afgelopen jaren zien we wereldwijd dat webdesign qua stijl meer en meer richting minimalisme gaat. Als we kijken naar de basisprincipes van minimalisme dan zien we dat deze voornamelijk bestaan uit beperkt aantal kleuren (meestal wit, grijs en zwart), de basisvormen (cirkel, vierkant, driehoek, hexagon, etc) en zo weinig mogelijk afleiding. Dit principe past natuurlijk ontzettend goed bij de manier waarop we websites het liefst bouwen; simpel, snel, gebruiksvriendelijk en een duidelijke focus op de content (user centered design).

Onderstaand voorbeelden van webdesigns in minimalisme stijl.

Largest Contentful Paint (LCP)

De LCP meet de laadsnelheid van het grootste content-element in je eerste scherm (bovenaan de pagina dus). Google gaat er vanuit dat dit ook het belangrijkste onderdeel is. Dit kan een afbeelding, video, animatie en tekst zijn. Oftewel hoe lang duurt het  voordat de gebruiker het belangrijkste stuk content in beeld heeft. Meestal staat er een grote afbeelding of video in de header waardoor deze als LCP wordt aangevinkt.

First Input Delay (FID)

De FID meet de tijd die de browser nodig heeft om jouw eerste interactie te kunnen uitvoeren. Zoals bijvoorbeeld hoelang het duurt voordat je op een button of menu-item kunt klikken tot het moment dat je ook daadwerkelijk wordt doorgestuurd. Het kan zijn dat de pagina nog niet volledig is geladen waardoor je moet wachten tot de volledige pagina is geladen.

Cumulative Layout Shift (CLS)

De CLS bekijkt of er tijdens het laden onderdelen op de pagina verschijnen die de layout van de pagina aantast. Dit betekent in eerste instantie dat je als gebruiker moet wachten, maar er is ook een kans dat je net op de verkeerde button klikt of dat deze net buiten je scherm belandt. Voorbeelden hiervan zijn het verschijnen van advertentie-banners waardoor de content naar beneden wordt gedrukt of het te laat inladen van het juiste font waardoor ook allerlei content wordt verschoven.
Dit klinkt allemaal erg technisch maar wat we sowieso kunnen vaststellen is dat veel van deze metingen ook worden beïnvloedt door de laadtijd. Wat we dus kunnen concluderen, is dat als wij de pagina zo lichtgewicht mogelijk kunnen maken, dit ten goed komt van je PageSpeed. 

Onze webdesign tips voor een betere PageSpeed

1. Vermijd sliders / carousels
   Sliders kosten laadtijd, niet alleen omdat er extra scripts worden ingeladen maar ook extra content, zoals foto’s en video’s. Ze worden gebruikt om veel informatie te tonen, maar dan in een compacte weergave. Een oplossing is om simpelweg minder informatie te tonen. Toon bijvoorbeeld alleen de laatste 3 actuele nieuwsberichten.
2. Vermijd grote foto’s, video’s en animaties in de header
   Bij het inladen van de pagina wordt er gekeken naar het grootste element op het eerste scherm, omdat dit logischerwijs ook het meest belangrijke element zou moeten zijn. Dit is in de meeste gevallen een grote foto of video in plaats van de  tekst. Aangezien een foto of video voor meer laadtijd zorgt, geeft dit een lagere score. Als je dus een foto, video of animatie gebruikt, zorg er dan voor dat deze zo lichtgewicht als mogelijk zijn. Kijk uit met animaties, die kunnen namelijk behoorlijk wat van je score afknabbelen. Zeker op mobiel!
3. Verminder het aantal functionaliteiten
   Probeer niet te veel verschillende functionaliteiten op één pagina te gebruiken. Functionaliteiten zoals Live chats, I-frames, Facebook & instagram feeds, advertentie banners, sliders en formulieren kunnen bij elkaar opgeteld voor extra page lood zorgen.
4. Gebruik Google Fonts
   Het is soms lastig om van je huisstijl te moeten afstappen en een bijpassend lettertype te vinden in de Google Fonts bibliotheek. Toch is het zeker de moeite waard. Google Fonts hebben een betere laadtijd en zijn ook nog eens licentievrij! Probeer ook om zo min mogelijk font-varianten te gebruiken, of maak gebruik van een ‘Variable font’, dan hoef je maar één font file in te laden.
5. Optimaliseer je mobiele weergave
   Zoals je eerder kon lezen valt de mobiele score vaak lager uit omdat er rekening gehouden wordt met de beperkte bandbreedte van 3G en 4G internet. Een aantal quick wins kunnen zijn:
   – Bouw een optie in om specifiek voor mobiel een kleinere headerafbeelding te kunnen uploaden;
   – Verberg minder belangrijke afbeeldingen, toon bijvoorbeeld geen foto’s bij nieuwsberichten;
   – Vervang animaties door een statische afbeelding;
   – Vervang sliders door simpele contentblokjes zonder functionaliteit.

De Google PageSpeed is niet heilig, maar het helpt enorm mee om het web sneller en gebruiksvriendelijker te maken. Webdesigners kunnen daar ook zeker een steentje aan bijdragen. Daarom hoort deze webtrend absoluut thuis in het rijtje webdesign trends voor 2023.