Webdesign trends: 10 trends die moderne websites vormgeven

1. Minder ontwerpen binnen het klassieke grid

Een strak grid blijft een uitstekend hulpmiddel om structuur te creëren, maar hoeft niet langer zichtbaar te bepalen hoe een website eruitziet.

Steeds vaker zien we ontwerpen waarbij tekst, afbeeldingen en grafische elementen gedeeltelijk buiten hun klassieke kolommen treden. Elementen overlappen elkaar, afbeeldingen lopen door tot tegen de schermrand en grote typografie krijgt soms bewust meer ruimte dan het onderliggende grid voorziet.

Dat geeft ontwerpers meer vrijheid en maakt websites minder voorspelbaar.

Het grote verschil met het vroegere off the grid-design is dat de chaos meestal maar schijn is. Achter een uitgesproken compositie zit nog altijd een duidelijke structuur die ervoor zorgt dat de website op verschillende schermformaten correct blijft functioneren.

Op mobiel kan dezelfde compositie bijvoorbeeld opnieuw veel strakker worden opgebouwd. Dat is belangrijk, want een spectaculair desktopdesign dat op een smartphone onbruikbaar wordt, schiet zijn doel voorbij. Meer daarover lees je in ons artikel over mobiele optimalisatie.

2. Typografie wordt een grafisch element

Een titel hoeft niet langer alleen informatie over te brengen. Typografie kan een belangrijk onderdeel van de volledige visuele identiteit worden.

Enorme koppen, uitgesproken lettertypes, onverwachte combinaties en tekst die bijna als illustratie wordt gebruikt: designers durven opnieuw veel meer met letters te experimenteren.

Dat zagen we enkele jaren geleden al ontstaan met zogenaamde brutale typografie. Vandaag is de toepassing verfijnder geworden.

Grote letters worden gecombineerd met veel witruimte, fotografie of subtiele animaties. Variable fonts maken het bovendien mogelijk om gewicht, breedte en andere eigenschappen dynamisch aan te passen.

Beweging in typografie

Ook bewegende tekst blijft interessant. Een woord kan tijdens het scrollen verschuiven, een titel kan geleidelijk verschijnen of letters kunnen subtiel reageren op de beweging van de muis.

Maar beweging moet een functie hebben.

Wanneer iedere titel beweegt en elk woord reageert op de cursor, wordt een website snel vermoeiend. Goede typografische animatie ondersteunt de hiërarchie en helpt de aandacht sturen.

Het gekozen lettertype zelf blijft natuurlijk minstens even belangrijk. In ons artikel over onze favoriete fonts voor branding en webdesign bekijken we enkele lettertypes die we zelf graag gebruiken.

3. Scrollytelling maakt van een pagina een verhaal

Scrollytelling was al één van de opvallendste webdesign trends toen we dit artikel oorspronkelijk schreven. Intussen is de techniek alleen maar interessanter geworden.

Het principe blijft eenvoudig: de scrollbeweging van de bezoeker bepaalt hoe een verhaal zich ontvouwt.

Tekst kan verschijnen terwijl een afbeelding op zijn plaats blijft staan. Een product kan tijdens het scrollen van vorm veranderen. Grafieken kunnen zich geleidelijk opbouwen of verschillende hoofdstukken kunnen visueel in elkaar overvloeien.

Hierdoor voelt een pagina minder aan als een verzameling afzonderlijke blokken.

De bezoeker wordt door een verhaal geleid.

Dat werkt bijzonder goed voor portfolio’s, productlanceringen, jaarverslagen, storytelling en websites waarbij een concept moeilijk in één beeld kan worden uitgelegd.

Scrollytelling hoeft trouwens niet spectaculair te zijn. Een subtiele verandering van beeld of achtergrond terwijl iemand door een tekst beweegt, kan al voldoende zijn om een verhaal veel sterker te maken.

4. Micro-interacties maken websites tastbaarder

Een knop die subtiel reageert wanneer je erover beweegt. Een icoon dat verandert nadat je erop klikt. Een formulier dat onmiddellijk laat zien dat een invoer correct is.

Het zijn kleine details, maar samen bepalen ze hoe een website aanvoelt.

Micro-interacties geven feedback. Ze bevestigen dat een actie geregistreerd werd en helpen bezoekers begrijpen wat er gebeurt.

Daarmee sluiten ze aan bij wat vroeger vaak delight werd genoemd: kleine onverwachte details die een digitale ervaring aangenamer maken.

Het verschil is dat dergelijke interacties vandaag steeds minder als versiering worden bekeken. Een goede micro-interactie combineert vorm en functie.

Denk bijvoorbeeld aan:

• een menu-icoon dat vloeiend verandert wanneer het menu geopend wordt;
• een knop die visueel bevestigt dat een formulier verzonden wordt;
• een subtiele animatie die toont welk onderdeel van een pagina actief is;
• een afbeelding die reageert op de positie van de cursor.

De kunst zit in de dosering. Niet ieder element hoeft te bewegen om een website interactief te laten aanvoelen.

5. Sterke kleuren en gradients zijn terug – maar gecontroleerder

Minimalisme betekende lange tijd: veel wit, neutrale kleuren en een beperkt kleurenpalet.

Dat beeld is veranderd.

Felle accentkleuren, diepe achtergronden, gradients en onverwachte kleurcombinaties worden opnieuw volop gebruikt. Niet noodzakelijk over de volledige website, maar bijvoorbeeld om een belangrijk onderdeel extra aandacht te geven.

Kleur wordt zo een manier om hiërarchie te creëren.

Een uitgesproken achtergrond kan het begin van een nieuw hoofdstuk aangeven. Een contrasterende kleur kan een call-to-action onmiddellijk herkenbaar maken. Een gradient kan diepte toevoegen zonder daarvoor extra afbeeldingen nodig te hebben.

Dat betekent niet dat iedere website neonkleuren nodig heeft. De juiste kleuren moeten in de eerste plaats bij de identiteit van het merk passen. In ons artikel over kleurgebruik in branding gaan we dieper in op de invloed die kleur heeft op de uitstraling en herkenbaarheid van een merk.

6. Gelaagdheid brengt opnieuw diepte in webdesign

Jarenlang draaide digitaal design sterk rond vlakke interfaces. Elementen kregen hun eigen blok, afbeeldingen stonden netjes naast tekst en iedere sectie had een duidelijk begin en einde.

Vandaag worden die grenzen opnieuw losser.

Fotografie kan onder tekst doorlopen. Een grafisch element kan verschillende secties met elkaar verbinden. Transparante vlakken, subtiele texturen en overlappingen zorgen voor diepte.

Dat betekent niet dat we terugkeren naar de drukke websites van vroeger.

Integendeel.

De interessantste ontwerpen combineren gelaagdheid met voldoende rust. Hierdoor kan een website visueel rijk zijn zonder onoverzichtelijk te worden.

Ook fotografie speelt daarin een belangrijke rol. In plaats van tien afzonderlijke afbeeldingen te tonen, kan één sterk beeld onderdeel worden van de volledige compositie.

7. Toegankelijkheid wordt onderdeel van het ontwerp

Een website ontwerpen voor zoveel mogelijk gebruikers is geen tijdelijke designtrend.

Toegankelijkheid hoort steeds meer vanaf het begin bij het ontwerpproces.

Dat betekent onder andere voldoende kleurcontrast, leesbare tekst, duidelijke focus states, alternatieve teksten voor relevante afbeeldingen en interfaces die ook met een toetsenbord bruikbaar blijven.

De internationale Web Content Accessibility Guidelines (WCAG) bieden daarvoor concrete richtlijnen.

Interessant is dat toegankelijk design vaak gewoon beter design oplevert.

Een duidelijke navigatie helpt niet alleen iemand die een screenreader gebruikt. Goed contrast helpt ook iemand die buiten in fel zonlicht naar een smartphone kijkt. Grote klikbare zones zijn nuttig voor mensen met een motorische beperking, maar maken een mobiele website voor iedereen prettiger.

Toegankelijkheid en gebruiksvriendelijkheid liggen daardoor veel dichter bij elkaar dan soms wordt gedacht.

8. Performance beïnvloedt het design

Een prachtige website die vijf seconden nodig heeft voordat ze bruikbaar wordt, is geen goede website.

Technische prestaties worden daarom steeds vroeger meegenomen in het ontwerpproces.

Moeten we echt drie verschillende lettertypes laden? Heeft die achtergrondvideo voldoende toegevoegde waarde? Is een complexe animatie op mobiel nodig? Kan die enorme afbeelding efficiënter worden geladen?

Het zijn technische vragen die ook het ontwerp beïnvloeden.

Google gebruikt onder andere de Core Web Vitals om laden, responsiviteit en visuele stabiliteit meetbaar te maken.

Wie zijn eigen website wil onderzoeken, kan daarvoor ook Google Lighthouse gebruiken. In ons artikel over Google Lighthouse leggen we uit wat de verschillende scores betekenen en hoe je mogelijke problemen opspoort.

Performance betekent overigens niet dat iedere website zo kaal mogelijk moet worden. Animaties, video, grote fotografie en interactieve effecten kunnen perfect deel uitmaken van een snelle website.

Het gaat om bewuste keuzes en een goede technische uitvoering.

9. Design wordt minder perfect

Naast technisch perfecte interfaces zien we tegelijkertijd een tegenovergestelde beweging.

Websites mogen opnieuw menselijker ogen.

Korrel, texturen, handgetekende illustraties, imperfecte vormen, collages en retro-elementen brengen karakter in digitale ontwerpen. Ook de nostalgische invloeden die enkele jaren geleden sterk opkwamen, zijn niet volledig verdwenen.

Alleen worden ze minder letterlijk toegepast.

Een website hoeft niet volledig op Windows 95 of een tijdschrift uit de jaren zeventig te lijken om nostalgisch aan te voelen. Een korrelige foto, karaktervol serif-lettertype of onverwachte kleurencombinatie kan al voldoende zijn.

Dat is deels een reactie op de enorme hoeveelheid technisch correcte maar visueel gelijkaardige websites.

Templates en steeds krachtigere ontwerptools maken het eenvoudiger dan ooit om een verzorgde website te bouwen. Juist daardoor wordt een herkenbare eigen stijl belangrijker.

10. AI verandert het ontwerpproces, niet de basisprincipes

Geen overzicht van moderne webdesign trends kan nog rond artificiële intelligentie heen.

AI kan helpen bij het genereren van concepten, afbeeldingen, teksten, code en variaties op bestaande ontwerpen. Daardoor kunnen bepaalde onderdelen van het creatieve proces veel sneller verlopen.

Maar snelheid is niet hetzelfde als kwaliteit.

Een website moet nog altijd vertrekken vanuit een doelgroep, een merkidentiteit en een concreet doel. AI weet niet automatisch welke informatie voor jouw klant het belangrijkst is, waarom iemand voor jouw onderneming kiest of welke visuele keuzes geloofwaardig bij je merk passen.

Daarom zien we AI vooral als een extra gereedschap binnen het creatieve proces.

Het kan ideeën versnellen en nieuwe mogelijkheden openen, maar strategie en creatieve richting blijven essentieel. Ook binnen grafische toepassingen geldt hetzelfde principe, zoals we uitgebreider bespreken in ons artikel over AI en grafisch ontwerp.

Niet iedere webdesign trend moet je volgen

Een nieuwe website hoeft geen verzameling te zijn van alles wat op dat moment populair is.

Horizontaal scrollen kan fantastisch werken voor een portfolio en bijzonder irritant zijn op een informatieve website. Grote typografie kan een merk veel karakter geven, maar werkt niet wanneer de leesbaarheid eronder lijdt. Een indrukwekkende scrollanimatie heeft weinig waarde wanneer ze de website trager of moeilijker bruikbaar maakt.

Trends zijn vooral interessant omdat ze nieuwe mogelijkheden tonen.

De vraag is vervolgens welke daarvan iets toevoegen aan jouw website.

Dat is uiteindelijk ook het verschil tussen een website die alleen modern oogt en een website die modern werkt.

Een goed webdesign blijft langer mee dan een trend

Als we terugkijken naar de oorspronkelijke versie van dit artikel uit 2022, is dat misschien wel de interessantste conclusie.

Sommige technieken die toen als trend werden beschreven zijn verdwenen. Andere zijn ondertussen zo normaal geworden dat we ze nauwelijks nog als trend beschouwen.

Gebruiksvriendelijkheid, responsive design, sterke typografie, snelheid, toegankelijkheid en een duidelijke visuele identiteit blijven echter overeind.

Daarom ontwerpen we bij The Other Concept een website niet rond één bepaalde trend. We kijken naar wat een merk nodig heeft en combineren vormgeving, content en techniek tot een geheel dat ook na enkele jaren nog overtuigend moet werken.

Want uiteindelijk hoeft een goede website niet voortdurend de nieuwste trend te volgen. Ze moet vooral duidelijk, herkenbaar, snel en prettig in gebruik zijn.

Merk je dat je huidige website visueel of technisch achterop begint te lopen? In ons artikel over waarom bezoekers een website verlaten vind je een aantal signalen die kunnen aangeven waar het misloopt.