7 webdesign trends voor 2023

Voor nieuwe en re-design websites

Team Nijhuis

Webdesign en techniek trekken steeds meer naar elkaar toe. Waar webdesigners vroeger nog volledig hun gang konden gaan, moet er tegenwoordig rekening gehouden worden met zaken als:

  • Toegankelijkheid
  • Schaalbaarheid
  • Pagina snelheid; en meer van dat soort zaken.

Uiteraard moest daar vroeger ook rekening mee gehouden worden, maar toen waren bepaalde factoren veel minder belangrijk. Dat betekent automatisch dat er soms keuzes gemaakt moeten worden in het ontwerp op basis van conversie optimalisatie of bepaalde scores. Als bedrijf wil je graag een mooi visueel visitekaartje (zoals het vaak genoemd wordt). Maar is dat belangrijker dan een goed converterende pagina?

Webdesign anno 2023

Om websites nog gebruiksvriendelijker en toegankelijker te maken zullen er in 2023 wederom grote stappen gemaakt worden. Bij elk ontwerp is de uitdaging voor designers om de juiste overweging te maken bij het gebruik van animaties, grote foto’s en video’s. Dit hoeft uiteraard niet negatief te zijn, het kan ook een inspiratie zijn om met behulp van nieuwe ideeën tot een uniek design te komen.

Trends spelen daar een belangrijke rol in. Dit jaar zullen creatieve vormen en typografie waarschijnlijk de doorslag gaan geven. Ons team staat in ieder geval klaar om dit toe te passen bij nieuwe projecten.

In dit artikel staan de belangrijkste webdesign trends van 2023. Een aantal trends uit 2022 zullen ook komend jaar nog bruikbaar zijn en worden zelfs nog als trend voor dit jaar beschreven. Eind van het jaar kunnen we weer de balans opmaken welke overeind gebleven zijn en welke minder succesvol waren. Elk jaar blijft dit een leuk onderdeel bij het ontwerpen van een website.

Lees gerust eens het artikel door en bekijk welke trends van invloed kunnen zijn op jouw website design en hoe wij daar met een redesign of een compleet nieuw ontwerp in kunnen helpen.

Trend 1: Geoptimaliseerde mobiel vriendelijke ontwerpen

Het klinkt zo simpel, maar toch is een heel groot gedeelte van de websites mobiel niet in orde. Ruim 95% van Nederlanders tussen de 18 en 80 jaar beschikt over een smartphone en daarom is het belangrijker dan ooit om te zorgen dat jouw website hiervoor geschikt is.

Veel mensen gebruiken hun telefoon om reserveringen te maken, informatie te verzamelen en producten online te kopen. Als dit voor jouw bedrijf niet op de juiste manier is ingericht kunnen consumenten snel naar de concurrent gaan.

En dat wil je niet, want eenmaal ‘kwijt’ is het lastig om ze weer te verleiden tot een bezoek aan jouw website of webshop.

Het belangrijkste om je website voor mobiel gebruik te optimaliseren, is er voor te zorgen dat je website ‘duimvriendelijk’ is. Om elke gebruiker een positieve ervaring te geven moet je nadenken over de grootte van de buttons in jouw ontwerp, aangezien veel mensen hun smartphones met hun duimen bedienen in plaats van met hun wijsvingers. Ook hierin zie je steeds meer dat menu items die op desktop bovenaan staan, verdwijnen naar de onderkant op mobiel. Simpelweg omdat dit sneller en gemakkelijker met de duim te bedienen is.

Je moet er voor zorgen dat je website altijd zo gebruiksvriendelijk mogelijk is, welke schermgrootte je websitebezoeker ook gebruikt. Steeds meer bedrijven zijn zich bewust geworden dat ze online (en met name op mobiel) niet de gebruikerservaring kunnen bieden die bezoekers wel verwachten. Alleen om die reden verwacht ik in 2023 dat hier veel aandacht aan besteed gaat worden.

Ga voor duimvriendelijke mobiele designs

Trend 2: Creatieve vormen en illustraties

Google speelt al jaren een belangrijke rol als het gaat om websites en daarom bouwen we het liefst een snelle website die SEO vriendelijk is, maar tevens gebruiksvriendelijk is voor de bezoeker waar hij/zij snel haar vraag of doel kan vinden. Om dit te bereiken gaat de webdesign stijl al jaren meer en meer richting het minimalisme. De juiste content is erg belangrijk. Content marketing wordt steeds belangrijker.

De basis hiervan bestaat uit een beperkt kleurenpalet met daarin zwart, grijs en wit, en simpele vormen zoals een vierkant, cirkel of driehoek. Als je dit samenvoegt heb je zo weinig mogelijk afleiding en zal de bezoeker dus snel en gemakkelijk vinden wat hij/zij wil.

Al eerder heb ik eens geschreven dat steeds meer websites en vooral webshops op elkaar gaan lijken. De binding die een bedrijf of merk wil met zijn/haar klanten gaat daardoor verloren. Dit is echter een logisch gevolg als je uitgaat van de basisprincipes zoals hierboven beschreven.

De aandacht komt steeds meer te liggen op goede content en een ijzersterke inhoud, waarbij het design dit meer moet gaan dragen en ondergeschikt is aan de boodschap.

Langzamerhand begint het neo-minimalisme de overhand te krijgen. Uiteraard is snelheid belangrijk, maar als je niet onderscheidend bent ten aanzien van je concurrent zal de bezoeker ook geen binding krijgen. Om het geheel prestatie/binding meer in balans te krijgen verdwijnen de basis kleuren en worden deze vervangen door opvallende kleuren. De standaard vormen verdwijnen steeds meer naar de achtergrond en worden vervangen door complexere vormen die voor een speels effect zorgen en kunnen bijdragen aan de branding van een merk.

Ook schreef ik vorig jaar al in het stuk ‘terug naar de basis’ over de factor typografie. Afstappen van de standaard lettertypes die veel websites gebruiken en kiezen voor een onderscheidend en krachtig font kan lonen. Mijn collega Nienke schreef al eens een mooi artikel over de 10 beste Google webfonts, die nog steeds prima gebruikt kunnen worden voor de platte tekst in je website, maar probeer deze te vermijden als het gaat om titels. Kies daar juist voor een onderscheidend en apart font.

De basis blijft uiteindelijk hetzelfde ‘less is more’, maar het karakter van je website kan wel een flink boost gebruiken.

Maak gebruik van creatieve vormen in je webdesign

Trend 3: Vloeibare typografie

Zoals hierboven beschreven gaat typografie een steeds belangrijkere rol spelen binnen een webdesign. Voor een gebruiksvriendelijke website is een goed lettertype onmisbaar. Dat sommige webfonts erg populair zijn heeft niet alleen te maken met het gemak van niet verder zoeken dan je neus lang is, maar ook omdat bewezen is dat deze fonts bij het grote publiek als ‘fijn leesbaar’ bestempeld worden.

Het formaat, regelafstand en consistentie bepalen voor het grootste gedeelte de leesbaarheid en daarmee het succes van een lettertype. Daarnaast helpt het gebruiken van Google Fonts ook voor je PageSpeed, waarmee je uiteindelijk ook techniek weer helpt met het kiezen hiervoor.

Schaalbaar

Al jaren is de mobiel in opkomst als het gaat om bezoekers. We zien al heel vaak dat het percentage bezoekers op mobiel veel hoger ligt dan het percentage op desktop. In deze tijd wordt elke website dan ook responsive gebouwd. Dit betekent niets meer dan dat de website schaalt naar elk gewenst schermformaat.

Je wilt tenslotte niet dat de gebruiker horizontaal en verticaal moet scrollen op mobiel. Of moeten inzoomen om bepaalde teksten te kunnen lezen. De designer is hierin net zo verantwoordelijk als de developer om op voorhand al rekening te houden hoe bepaalde elementen moeten schalen. Niet alleen elementen moeten perfect schalen.

De schaling van typografie werkt meestal anders dan die van elementen. Waar elementen schalen van het ene breakpoint naar het andere breakpoint, daar is dat bij typografie meer trapsgewijs. Dit gebeurt dus niet vloeiend en wordt per breakpoint bepaald. Zo is het dus goed mogelijk dat je op desktop grootte 64 hebt staan, op tablet 32 en op mobiel 16.

Op zich maakt dat niet veel uit, maar dat betekent wel dat tussen sommige breakpoints het formaat niet aangepast wordt. Uiteindelijk kan dit ervoor zorgen dat teksten/titels op bepaalde schermformaten niet of heel slecht leesbaar zijn. Dit wil je natuurlijk voorkomen en het zou zo moeten zijn dat je hetzelfde gaat creëren als bij elementen.

Een vloeibare typografie. Dit is niet iets wat nieuw is sinds dit jaar, maar wel iets waarvan ik verwacht dat het steeds meer toegepast gaat worden.

Tekstgroottes

Verschillende tekstgroottes voor titels zorgen ervoor dat de gebruiker een pagina makkelijker kan scannen. Denk hierbij aan een krant, waarbij je gemakkelijk de koppen boven een artikel scant zonder het hele artikel echt te lezen. Daarbij is de belangrijkste kop qua formaat het grootste. We delen dit op in H1 (het grootste formaat), H2, H3 etc. en noemen dit ‘headings’.

Als je op deze manier structuur aan je website geeft wordt het voor de gebruiker dus makkelijker om de content te begrijpen en lezen en zal hij/zij sneller vinden waar hij/zij naar op zoek is. Tevens zorgt een correcte content-structuur voor een toegankelijke website die invloed heeft op de organische zoekresultaten.

Vloeibaar

Om bijna geen onleesbare resultaten meer te krijgen en te zorgen dat je pagina meer in balans blijft op elk schermformaat is er een nieuwe ontwikkeling genaamd vloeibare typografie (fluid typography). Hierbij wordt de tekst niet op basis van breakpoints, maar op basis van schermformaat geschaald. Meestal wordt hier de breedte van het scherm voor gebruikt.

Grootste voordelen zijn dat je geen problemen krijgt dat je tekst of titel soms niet te lezen is en dat je geen harde overgang meer krijgt op desktop, tablet of mobiel. Het enige waar je als designer hierbij rekening moet houden is een minimale en maximale grootte. Je wilt tenslotte niet dat je tekst op mobiel zo klein wordt dat het niet meer leesbaar is. Door hier op een correcte manier mee om te gaan zorgt dit voor een bijna perfecte responsive website.

Aangezien vloeibare typografie nog niet veel gebruikt wordt verwacht ik door deze mogelijkheden dat dit aankomend jaar een vlucht gaat nemen. Belangrijk is daarbij wel dat het op de juiste manier geïntegreerd wordt binnen je website, anders kan het problemen opleveren met de toegankelijkheid.

Sinds kort wordt dit door alle browser ondersteund, dus het ideale moment om hier naar te kijken bij zowel bestaande als nieuwe websites. Mocht je dit interessant vinden voor je bestaande website, dan is het handig om ook gelijk naar de volgende trend te kijken.

Vloeibare typografie gebruiken

Trend 4: De stijl van afbeeldingen en Illustraties

Zoals ik in het begin al schreef is het belangrijk dat de bezoeker zich kan binden aan een merk. Dit betekent niet alleen onderscheidend zijn door kleuren en vormen, maar een ander belangrijk element hierbij is de fotografie. Stockfotografie kan in deze tijd echt niet meer en steeds meer bezoekers prikken hier zo doorheen.

Stockfotografie zorgt er uiteindelijk voor dat er minder vertrouwen is in jouw website en/of product wat invloed heeft op je conversie.

Om de bezoeker wel te geven wat hij verwacht moeten bedrijven een echte emotionele band ontwikkelen. Een website met een geheel eigen unieke uitstraling creëer je door onderscheidende foto’s en beelden te gebruiken die symbool staan voor het product of de dienst die je probeert te verkopen. Een goede fotograaf is daarbij essentieel om het juiste gevoel over te brengen. Te vaak gebeurt het nog dat een website voorzien wordt van schitterende content waarmee gescoord moet worden voor Google, maar waarbij de fotografie de content niet draagt en het geheel onsamenhangend wordt.

Dat fotografie een kostenplaatje met zich meebrengt spreekt voor zich, maar uiteindelijk zal het wel helpen om de perfecte gebruikerservaring te bieden. Ook kunnen deze unieke beelden helpen bij het effectiever overbrengen van complexe diensten. Daarbij kan de kleurtoon ook nog van invloed zijn op het gevoel dat je bij de bezoeker opwekt.

Gebruik je eigen mensen in webdesigns

Trend 5: Micro animaties en effecten

Een gemakkelijke manier om het menselijke oog naar een belangrijk element binnen jouw website te krijgen is door middel van micro animaties. Het is vaak nog steeds lastig om te zeggen dat beeldvullende foto’s bovenaan je pagina ‘de zogenoemde Hero image’ echt niet meer kunnen.

Het is voor de bezoeker een stuk duidelijker en gebruiksvriendelijker om je website te beginnen met een duidelijke boodschap.

  • Wat heb je de bezoeker te bieden;
  • Hoe doe je dat;
  • Wat doe je; en
  • Wie ben je.

Neem ze mee in het verhaal dat je wilt vertellen en het product dat je wilt verkopen.

Hierbij hoort dan uiteraard een perfecte CTA (Call To Action) Bedrijven kunnen bewegende elementen boven de vouw of in de hero picture integreren met behulp van Javascript, CSS 3, HTML5 en GIFS. Deze methode is geschikt om de aandacht van gebruikers te trekken voor belangrijke informatie zoals buttons. Uiteraard is het van belang dat deze op de juiste ‘subtiele’ manier ingezet worden door gebruik te maken van het korte tijdsvenster (50 milliseconden)

Lange laadtijden en onnodige, afleidende items zorgen er weer voor dat websitegebruikers je site verlaten in plaats van dat hun sitebezoek langer duurt. Dus wees voorzichtig met het gebruik hiervan, want zelfs korte animaties nemen veel dataverkeer in beslag en maken het laden van je pagina langzamer.

Gebruik een animatie dus alleen als het nodig is!

Maak gebruik van micro animaties en effecten om je content te versterken

Trend 6: Video(achtergronden)

Haaks op de vorige trend staat de video achtergronden die een steeds belangrijkere rol gaan spelen. Het gebruik van video-achtergronden kan helpen om visuele interesse en betrokkenheid toe te voegen aan een website of app-interface. Op pagina’s waar je minder mee wilt scoren in Google en meer op gevoel wilt inspelen kunnen deze zeker een toevoeging zijn.

Grafisch kunnen ze (mits van goede kwaliteit) ook echt een toevoeging zijn, maar leidt het niet te veel af van de boodschap die je wilt overbrengen? De balans daarin zoeken blijft lastig en zelf adviseer ik dan ook altijd om deze lager op de website te plaatsen.

Video achtergronden kunnen ook worden gebruikt om een bepaalde stemming of sfeer over te brengen. Tevens creëer je meeslepende interfaces.

Dat video steeds belangrijker gaat worden is een feit. Gebruikers kijken liever naar beeld dan dat ze een hele pagina gaan lezen. Net als bij fotografie is het ook hier belangrijk dat de kwaliteit en het gevoel van een bedrijf goed naar voren komt. Tegenwoordig wordt de kwaliteit van mobiele video steeds beter, waardoor het ook steeds gemakkelijker wordt om dit zelf te doen. Echter moet je dan wel de juiste apparatuur in huis hebben om dit daadwerkelijk een succes te laten worden en scoor je beste resultaten met een video die door professionals is gemaakt.

Een video in de achtergrond gebruiken

Trend 7: Herstel van de 404

Het is de pagina waarvan je wilt dat je bezoeker er niet op komt, de 404-foutpagina. Deze error geeft aan dat een bepaalde pagina niet bestaat of niet gevonden kan worden. Je komt hier bijvoorbeeld terecht door de URL foutief in te geven of op een verouderde link te klikken.

Vele jaren is deze pagina misbruikt door designers om een grappig plaatje te plaatsen of een luchtige quote op te vermelden, maar daar gaat steeds meer verandering in komen.

De 404 pagina’s van 2023 gaan helemaal voor entertainment. Je komt steeds vaker aantrekkelijke animaties tegen of interactieve minigames zodat bezoekers actief blijven op de website. Paaseieren zoeken en eigenzinnige 404’s duiken steeds vaker op. Het is wat een slechte ervaring kan veranderen in iets om te onthouden. Juist die ervaring zorgt voor een bredere impuls om positiviteit te creëren in momenten van frustratie.

De 404-pagina kan worden gebruikt om de persoonlijkheid van jouw merk/bedrijf te tonen. Een leuk ontwerp zal de wereld misschien niet veranderen, maar het kan een klein, goed ding zijn – digitale vreugde die de plaats inneemt van menselijke fouten.

Als je het helemaal goed wilt doen dan zorg je dat deze pagina ook een zoekveld heeft en populaire onderwerpen waar andere op zochten. Zo hoeft de bezoeker niet via omwegen en extra handelingen bij zijn/haar doel te komen en heb je tevens de mogelijkheid gehad om je bedrijf of merk te promoten.

De 404-pagina als onderdeel van jouw website

Benieuwd na het lezen van dit artikel of jouw website gebruiksvriendelijk en goed toegankelijk is, voldoet aan de laatste trends en/of je genoeg conversie krijgt? Twijfel je in de huidige periode of dit het moment is om te investeren in een nieuwe website? We helpen je graag met een geweldig design en zeer gebruiksvriendelijke website.

Reacties op deze blog

Nog geen reacties.

Schrijf een reactie

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Werk samen aan succes met online marketing bureau Team Nijhuis

Wij bestaan om onze klanten te laten groeien. Groei jij niet, dan groeien wij zelf ook niet. Jouw succes is ons visitekaartje en die moet geweldig zijn. Of je nu meer leads, meer omzet of juist daar wilt blijven staan waar je nu bent, wij helpen jou met het inzetten van internet marketing. Dat wat wij doen werkt, blijkt wel uit onze 220 tevreden klanten die ons met een 9,2 beoordelen.

Inmiddels zijn wij voor de vierde keer op rij een top drie digital marketing bureau van Nederland (Fonk2020). Onze kennis delen wij graag met jou en deze kennis houden we scherp door elkaar te trainen, maar ook in de schoolbanken plaats te nemen. Je bent immers nooit uitgeleerd. Alleen dan profiteer jij van de marketing die wij inzetten als online marketing bureau.

Jouw bedrijf kan groeien met online marketing

Ben jij benieuwd wat je nog kunt inzetten aan online marketing of wil je weten of jij wel alles eruit haalt wat erin zit? Met de Gratis Quickscan kijken wij naar jouw huidige inzet aan online marketing. Met de Quickscan geven wij aanbevelingen welke kansen en verbeterpunten er voor jouw bedrijf te benutten zijn.

Het start met onze gratis Quickscan!

Digitale marketing start met onze gratis Quickscan!

Klanten beoordelen Team Nijhuis met een 9.2/10 (72 beoordelingen ) Feedback Company

Maarten

Kan ik je helpen?

Quickscan aanvragen