De belangrijkste trends in webdesign voor 2024
Voor aankomend jaar zien we veel terugkerende webdesign trends waar het gaat om vormgeving. Daar staan we dit keer dus wat minder bij stil. Ditmaal kijken we vooral naar de (technische) veranderingen die de meeste impact hebben op het webdesign landschap en wat voor invloed dat heeft op het vakgebied, de gebruiksvriendelijkheid en de digitale voetafdruk die onze keuzes achter kunnen laten.
Webdesign trend 1
AI driven webdesign
AI in webdesign is bijna onmisbaar. Het wordt in de volledige breedte van het vak ingezet. AI wordt gebruikt om het webdesignproces te verbeteren, efficiënter en gebruiksvriendelijker te maken. Denk hierbij aan AI-gegenereerde beelden, teksten maar ook als inspiratiebron. Ook op detailniveau wordt AI veel toegepast, bijvoorbeeld in design tools zoals Figma. Hieronder een overzicht van veelgebruikte AI-functionaliteiten in ons werk.
AI-gegenereerde content
AI-tools kunnen content genereren of suggereren, zoals tekst, afbeeldingen en zelfs video’s, gebaseerd op de context van de website en de interesses van de gebruiker. Dit helpt bij het opzetten van een webdesign concept. De gegenereerde content wordt zelden één op één doorgevoerd, maar wordt vooral gebruikt als inspiratie voor een webdesign concept. Denk hierbij aan Midjourney, DALL-E 2 en ChatGPT.
Daarnaast kun je AI ook perfect gebruiken om bestaande beelden tot perfectie te kneden. Zo kun je met AI automatisch achtergronden uit foto’s verwijderen, of juist een leeg gedeelte opvullen met de juiste inhoud (Adobe Photoshop – content aware fill). Klusjes waar je vroeger uren aan kon spenderen, zijn nu zo gepiept.
Prototyping
Iedereen die werkt met prototyping tools weet dat het in elkaar klikken van een solide prototype op basis van een webdesign een flinke klus kan zijn. Zeker bij de complexere websites. Met verschillende AI-tools is dit tijdrovende klusje een stuk sneller gefixt! Denk hierbij aan de Figma AI-tool “Make prototype’ functie. Pure magie.
Structureren van je designs
Bijna alle design tools werken met lagen (layers) om de structuur van het design op te kunnen bouwen. Super handig natuurlijk, maar het wordt al gauw een rommeltje met een paar honderd verschillende lagen, die je uiteraard niet allemaal een juiste naam gaat geven. Met AI is dit een fluitje van een cent, tenminste voor de gebruikers van Figma’s AI. Die doet dit voor je. Met uiterste precisie én heel snel. De AI ziet ook het verschil in de componenten. Zo ziet de AI dat het bijvoorbeeld gaat om een ‘uitgelicht’ nieuwsitem. Een van betere ‘kleinere’ AI-functies voor de creatieve geesten.
Research
Voordat je start met het designproces is het belangrijk dat je uitgebreid onderzoek doet naar de organisatie waar je voor ontwerpt en dat je de briefing volledig uitkamt. Zeker als er vooraf een Discovery heeft plaatsgevonden is de beschikbare informatie erg veel. Dit kan veel tijd kosten. ChatGPT en Perplexity helpen je hiermee een handje om de informatie samen te vatten en op te sommen.
Webdesign trend 2
AI driven webdesign
Typografie in webdesign verwijst naar de kunst en techniek van het rangschikken van tekst op een website die zowel visueel aantrekkelijk, als gemakkelijk leesbaar is. Het omvat het kiezen van lettertypen, het bepalen van maten, spatiëring en lay-out om een harmonieuze en effectieve gebruikerservaring te creëren. Typografie is een cruciaal aspect van webdesign, omdat tekst een primair communicatiemiddel is op de meeste websites. Door het ontstaan van nieuwe technieken is er nog meer mogelijk op het gebied van esthetiek en gebruikerservaring. De belangrijkste trends rondom typografie op een rijtje:
Variable Fonts
Een variable font is een enkel lettertypebestand dat meerdere stijlen (zoals gewicht, breedte, en schuinte) kan bevatten. In plaats van verschillende bestanden voor elke stijl (bijvoorbeeld regular, bold, italic), bevat een variabele font al deze mogelijkheden in één bestand. Dit maakt het mogelijk om continu variërende typografie te gebruiken zonder de laadtijden te verhogen. Er zijn zelfs een aantal fonts waarbij zowel de font-dikte als de font-breedte volledig variabel zijn.
Variable fonts zorgen voor meer flexibiliteit en consistentie in ontwerp, omdat ontwerpers nauwkeurig kunnen afstemmen hoe de tekst eruit ziet op basis van verschillende omstandigheden, zoals schermgrootte of gebruikersvoorkeuren.
Responsive type scaling
Responsive type scaling houdt in dat de grootte van de tekst automatisch wordt aangepast aan de schermgrootte en resolutie. Dit betekent dat teksten op kleinere schermen groter worden weergegeven voor betere leesbaarheid, terwijl ze op grotere schermen kunnen worden aangepast om harmonieus binnen de lay-out te passen.
Dit kan worden bereikt door het gebruik van viewport-eenheden zoals vw (viewport width) en vh (viewport height), of door media-queries die specifieke typografische instellingen activeren afhankelijk van de schermgrootte.
Expressieve en Experimentele Typografie
Creativiteit in typografie is een belangrijk element van webdesign. Ontwerpers gebruiken typografie steeds meer als een visueel element, in plaats van enkel een middel om informatie over te brengen. Dit uit zich in asymmetrische plaatsingen, uitgesproken lettertypekeuzes en artistieke toepassingen van tekst.Interactie en animatie
Tekst die geanimeerd of interactief wordt gemaakt, trekt meer aandacht en creëert een bepaalde sfeer. Dit varieert van subtiele hover-effecten tot volledige typografische animaties die de leeservaring dynamischer maken.
Typografie en toegankelijkheid
Geavanceerde typografie houdt rekening met toegankelijkheid, door lettertypen te gebruiken die goed leesbaar zijn voor alle gebruikers, inclusief mensen met visuele beperkingen. Dit betekent fonts met voldoende contrast, geschikte lettergrootte en het vermijden van onduidelijke of moeilijk te lezen lettertypen.
Typografie moet ook geoptimaliseerd zijn voor schermlezers, met de juiste HTML-structuur om ervoor te zorgen dat alle gebruikers, ongeacht hun beperking, toegang hebben tot de inhoud. Zie ook trend 6 over toegankelijk webdesign.
Webdesign trend 3
Duurzaam webdesign
Duurzaam webdesign is een benadering van webontwikkeling en -design, dat gericht is op het minimaliseren van de ecologische en sociale impact van websites en digitale producten. Het houdt rekening met energieconsumptie, de levensduur van het ontwerp, de toegankelijkheid en de algehele duurzaamheid van het digitale ecosysteem. Hier zijn de belangrijkste principes van duurzaam webdesign:
Energie-efficiëntie
Duurzame websites zijn ontworpen om snel te laden, wat minder energie verbruikt. Optimalisatie van laadtijden wordt bereikt door niet te grote afbeeldingen te gebruiken, het aantal video’s te beperken, het aantal animaties te beperken, en het aantal complexe functionaliteiten te minimaliseren. De keuzes die tijdens de UX en UI fases worden gemaakt hebben een flink aandeel hierin.
Toegankelijkheid
Duurzame websites maken gebruik van een inclusief ontwerp: ze zijn toegankelijk voor alle mensen, ongeacht handicaps of beperkingen. Dit omvat het gebruik van de juiste HTML-structuur , tekstalternatieven voor afbeeldingen, en een ontwerp dat compatibel is met schermlezers en andere hulpmiddelen. Compatibiliteit met zoveel mogelijk verschillende apparaten speelt ook een rol. Door te zorgen dat websites goed functioneren op verschillende apparaten en op langzamere netwerken, verlengt duurzaam webdesign de levensduur van de website.
Tijdloze en flexibele webdesigns
Duurzaam webdesign maakt gebruik van modulaire en schaalbare ontwerpen, die gemakkelijk kunnen worden aangepast of uitgebreid zonder dat een volledige herontwikkeling nodig is. Dit verlengt de levensduur van de website. Software zoals Figma maakt het mogelijk om middels een goed designsysteem doorontwikkeling goed en efficiënt te kunnen uitvoeren..
Focus op gebruikerservaring
Het duurzame ontwerp is gericht op het bieden van een positieve en nuttige ervaring voor de gebruiker, zonder hen te overstelpen met advertenties of onnodige afleidingen. Ongewilde informatie kost tijd, energie en geeft een gebruiker een negatieve ervaring.
Waarom is duurzaam webdesign belangrijk?
- Milieueffect: Het internet is verantwoordelijk voor een aanzienlijk deel van het wereldwijde energieverbruik. Door websites energiezuiniger te maken, kan de ecologische voetafdruk van het internet worden verminderd.
- Kostenbesparing: Energie-efficiënte websites kunnen de kosten voor hosting en bandbreedte verlagen.
- Maatschappelijke verantwoordelijkheid: Duurzaam webdesign ondersteunt een bredere verantwoordelijkheid voor het milieu en de samenleving, wat kan bijdragen aan een positiever imago voor bedrijven en merken.
In essentie gaat duurzaam webdesign over het maken van bewuste keuzes die zowel de impact op het milieu verminderen als de gebruikerservaring verbeteren.
Webdesign trend 4
Bento box design
Bento box design is een ontwerpstijl die zijn naam ontleent aan de traditionele Japanse “bento box,” een lunchdoos met meerdere compartimenten voor verschillende soorten voedsel. In web- en app-design verwijst de term naar een lay-out die de inhoud in duidelijke, gescheiden secties of blokken verdeelt, vergelijkbaar met hoe een bento box verschillende gerechten organiseert.
Kenmerken van bento box design:
- Gesegmenteerde lay-out: De inhoud wordt georganiseerd in afzonderlijke vakken of blokken, die elk specifieke informatie of een functie bevatten. Dit maakt de lay-out overzichtelijk en gemakkelijk te navigeren.
- Visuele hiërarchie: Elk blok in de lay-out kan visueel worden benadrukt om gebruikers te helpen de belangrijkste informatie snel te vinden. Dit kan worden bereikt door variaties in grootte, kleur of typografie.
- Responsive design: Bento box designs zijn vaak responsive, wat betekent dat de blokken zich aanpassen aan verschillende schermformaten. Dit maakt het ontwerp geschikt voor zowel desktops als mobiele apparaten.
- Flexibiliteit: Omdat de lay-out uit verschillende blokken bestaat, kan het ontwerp eenvoudig worden aangepast of uitgebreid zonder dat de hele structuur opnieuw moet worden ontworpen.
Voordelen van bento box design:
De belangrijkste voordelen van bento box design, zijn gebruiksvriendelijkheid, aantrekkelijkheid en aanpasbaarheid. De duidelijke structuur maakt het voor gebruikers gemakkelijk om informatie te vinden en te navigeren door de inhoud. De georganiseerde en visueel gestructureerde presentatie is aantrekkelijk en modern vorm te geven. Tot slot kan je deze lay-out stijl eenvoudig aanpassen aan verschillende soorten inhoud of behoeften van een website of app.
Webdesign trend 5
Onderzoek & UX-driven webdesign
Onderzoek is een cruciale fase in het webdesignproces. Het is een fase waarbij diverse analyses worden uitgevoerd om de behoeften, doelen, en verwachtingen van een project te begrijpen, voordat het daadwerkelijke ontwerp- en ontwikkelingswerk begint. Het doel van deze fase is om een solide basis te leggen voor het project door duidelijke inzichten te verkrijgen in wat er moet worden bereikt, wie de doelgroep is, en welke uitdagingen er mogelijk zijn. Bij Stuurlui doen we dat vooronderzoek in vier sessies, tijdens de Discovery, die onderdeel vormt van onze strategiefase.
UX-driven webdesign komt voort uit de toenemende behoefte om gebruiksvriendelijke websites te maken. Het is een groeiend besef dat je als website-eigenaar niet alleen een zendende partij bent, maar dat je jouw website maakt voor een ontvanger die een bepaalde behoefte heeft. Dat besef gaat gepaard met nieuwe vragen: wie is mijn doelgroep? Wat zijn de wensen van deze doelgroep?
Door heldere doelen te stellen, keuzes te maken en functies op je website te prioriteren, draag je bij aan een effectieve website, waar gebruikers snel vinden wat ze zoeken. Door middel van gebruikersonderzoek kun je op verschillende momenten testen wat jouw doelgroep vind. Bijvoorbeeld voorafgaand aan de bouw van je nieuwe site, bij het testen van een eerste prototype van het visual design, of naderhand, wanneer je jouw website verder wil optimaliseren en doorontwikkelen.
Webdesign trend 6
Websites worden toegankelijker
De Europese Toegankelijkheidswet (EAA) is een wet van de EU die ervoor zorgt dat mensen met een beperking makkelijker gebruik kunnen maken van diensten en producten. Hieronder vallen bijvoorbeeld betaalautomaten, OV, maar ook websites gericht op consumenten. De wet werd in 2019 aangenomen en gaat in 2025 volledig in werking.
Een belangrijk deel van de wet richt zich op websites, zodat deze voor iedereen toegankelijk zijn, dus ook voor mensen met een handicap. Hierdoor zullen we het komende jaar de webdesign trend zien dat veel sites aangepast worden naar de toegankelijkheidsnormen, die zijn samengevat in de WCAG-norm.
Wat betekent deze trend nu in de praktijk?
Eigenlijk komt het neer op gebruiksvriendelijkere websites. Sites die voor iedereen toegankelijk moeten zijn, moeten namelijk perfect in elkaar steken. De opbouw van de site moet bijvoorbeeld helder zijn, maar ook over menu’s, interne links en formulieren moet extra worden nagedacht.
Het betekent ook dat we steeds meer extra opties op websites gaan zien, zoals de mogelijkheid om contrast te verhogen, grotere lettertypes te tonen, of ingebouwde voorleesfuncties. Veel overheidsinstellingen hebben deze functies al op hun website, omdat de normen rondom digitale toegankelijkheid voor hen al eerder golden.
Creativiteit binnen de grenzen van toegankelijkheid
Voor webdesigners betekent de nieuwe regelgeving ook een nieuwe impuls in de creativiteit. Tegenstanders van de nieuwe norm vrezen dat websites straks alleen nog strak en saai worden, maar er zijn genoeg voorbeelden van toegankelijke én mooi ontworpen websites. In onze Top 10 mooiste websites ter inspiratie keken we ook naar toegankelijkheid en vind je enkele voorbeelden. Met de nieuwe norm, verwachten we dat ontwerpers nieuwe mogelijkheden gaan zoeken om vorm en functie te laten samensmelten. Ontwerpen die creatief, vernieuwend én toegankelijk zijn. We zijn enorm benieuwd naar de nieuwe vindingen en creativiteit van alle collega’s.
Conclusie
Samenvattend richten de webdesign trends van 2025 zich op het ontwerpen van efficiënte, duurzame en toegankelijke websites. Natuurlijk blijft een aantrekkelijk ontwerp belangrijk, maar ook in 2025 draait het vooral om gebruiksvriendelijkheid en prestaties. De inzet van AI en nieuwe technieken voor typografie maken het makkelijker om sites te bouwen die zowel creatief als functioneel zijn. Als designer maak je het verschil met websites die zowel visueel als technisch toekomstbestendig zijn.
