8 opvallende webdesign trends

Net zoals het menselijke lichaam, kunnen ook websites ‘ontleed’ worden. Door te kijken naar terugkerende design-patronen en componenten kunnen we webdesign trends in kaart brengen. De meest voorkomende onderdelen zoals een menu, header en footer zijn algemeen bekend en zul je op de meeste websites terugzien. Over de afgelopen jaren is er echter veel meer veranderd en geëvolueerd op het gebied van web design. We kunnen natuurlijk niet alle mogelijkheden bespreken, maar de opvallendste trends zijn het uitlichten zeker waard! Wij nemen je graag mee in 8 nieuwe webdesign trends die je misschien gemist hebt.

Vaarwel Internet Explorer

Het zat er al een tijdje aan te komen, maar de kogel is eindelijk door de kerk… Internet Explorer zal vanaf 17 Augustus 2021 niet meer ondersteund worden door Microsoft. Voor webdesigners en developers is dit heel goed nieuws. Het betekent dat er vrijwel geen rekening meer gehouden hoeft te worden met verouderde browsers en zogenoemde “fallbacks”. Microsoft gaat zich vanaf nu volledig richten op de nieuwe browser Edge, die gebouwd is op het open-source Chromium framework van Google. De val van Internet Explorer betekent ook dat we eindelijk volledig gebruik kunnen maken van alle nieuwe CSS3 features, zoals Flexbox en Grid layouts, zonder dat developers veel tijd en moeite moeten investeren in oplossingen voor verouderde browsers. Dit opent de mogelijkheden voor originelere ontwerpen en creatieve positionering van elementen.

Break the grid! Zorg voor een interessante compositie

Zoals net al vermeld, is met de komst van CSS3 Flexbox en Grid veel nieuwe mogelijkheden voor unieke en responsive lay-outs. Voorheen moest men altijd werken met “Floats”. Floats waren origineel bedoeld om tekst om een afbeelding heen te plaatsen. Echter, op een gegeven moment werden hele lay-outs gemaakt met dit principe. Het nadeel is echter dat, omdat het origineel voor tekst bedoeld is, de floats ervoor konden zorgen dat je site niet helemaal goed gepositioneerd werd. Daarnaast moesten elementen een specifieke width gedefinieerd hebben om ze naast elkaar te kunnen displayen. Met de komst van responsive design en een mobile-first approach was het niet echt handig meer. Precies om deze reden zijn er dus twee nieuwe CSS modules geïntroduceerd sinds 2009, namelijk Flexbox en Grid.

Het grootste verschil tussen Flexbox en Grid is de richting waarin ze werken, waar Flexbox alleen horizontaal of verticaal gepositioneerd kan worden, kan grid dit in beide richtingen. Grid kan dus worden gebruikt om creatievere layouts te maken. Flexbox is voornamelijk fijn om content op en snelle manier responsive te krijgen met weinig code. Hieronder een mooi voorbeeld van de kracht van Flexbox. Zoals je ziet waren links de buttons niet mooi aan de onderkant gepositioneerd, omdat de lengte van de tekst niet even hoog is. Dankzij flexbox kunnen we ervoor zorgen dat de andere content-boxen uitgerekt worden met het langste object in dezelfde row.

Mega (hamburger) menu’s

We bedoelen geen double whopper of een big mac, maar de 3 dunne lijntjes van 4 pixels hoog en 24 pixels breed! Hamburger-menu’s zijn de standaard geworden als menu-knop voor mobile devices. Voornamelijk omdat er te weinig plek is om alle menu-items naast elkaar te zetten. Soms kan het wel helpen om in het klein “MENU” onder het hamburger-menu-icon te zetten, zodat mensen met minder ervaring weten dat het menu achter deze knop zit.

Op desktop stappen we steeds meer af van de klassieke “dropdown” menu en zien we vooral bij grotere websites de mega menu’s terugkomen. Vaak is de hover ook vervangen door een on-click event, zodat het menu open blijft. Ook zien we vaker dat het menu relatief simpel bovenin gehouden wordt en in de footer de volledige sitemap wordt geplaatst. Dit bespaart ook keuzestress voor de gebruiker, waardoor de gebruikerservaring wordt verbeterd en de conversie zal stijgen.

Animaties, clipping en transities

Animaties zijn met de komst van de CSS property “transform” een stuk verbeterd en vloeiender geworden. Voorheen kon je alleen via de standaard properties “width” en “height” iets groter of kleiner animeren en alleen via javascript. Dit was ook slecht voor de performance van de website omdat elk frame opnieuw gerenderd werd. Voor snelle en mooie animaties is het dus belangrijk om alleen de properties “opacity” of “transform” te gebruiken, omdat deze gebruik maken van de GPU (Graphics processing unit) en niet de browser zelf.

Clip Paths

Een andere nieuwe property in CSS waarmee veel creatieve ontwerpen gemaakt kunnen worden, is de Clip Path property. Hiermee kan men dus een afbeelding “masken” of “clippen” in een ander object, bijvoorbeeld een circle of een driehoek. Het mooie is dat deze property ook goed ge-animeerd kan worden, waardoor je foto’s en text dus op een interactieve manier tevoorschijn kan laten komen. In de online editor hieronder kan je de nieuwe CSS property uitproberen en de code direct plakken in je eigen project!

https://bennettfeely.com/clippy/

Page Transitions

Door CSS animaties in combinatie met steeds krachtigere computers en mobiele telefoons, zijn mensen ook gaan nadenken over transities tussen verschillende pagina’s niet aantrekkelijker gemaakt kunnen worden. Met een SPA (Single Page Application) kan dit tegenwoordig vrij eenvoudig geregeld worden. Het verschil tussen een SPA en een MPA (Multi Page application) is dat bij een SPA de pagina maar 1x geladen wordt. Er worden dus geen nieuwe Headers verstuurd worden per pagina, maar alleen een gedeelte van de content. Dit kan dus een nadeel zijn voor vindbaarheid en SEO. Als SEO expert raden wij grotere websites als nieuwssites of webshops dan ook altijd Multi Page Applications aan.

Een SPA werkt het beste als portfolio, (web)applicatie of social media. Enkele voorbeelden van SPA’s die iedereen kent zijn Outlook, Google Maps en YouTube.

Creative buttons

Met de komst van de nieuwe CSS properties als Animation en Transform kunnen we ook veel meer persoonlijkheid geven aan buttons. Een button blijft een belangrijk UI component om de gebruiker te navigeren en het conversiedoel te behalen. Hieronder een aantal creatieve voorbeelden van button-effecten die je site nét dat beetje extra kunnen geven.

https://codepen.io/alticreation/pen/zBZwOP

https://codepen.io/nourabusoud/pen/ypZzMM

https://codepen.io/vitor-siqueira/pen/xNBExN

https://codepen.io/valentingalmand/pen/MYMZZK

Empty States

Een UX trend die we ook steeds vaker zien terugkomen zijn de “Empty States”. Dit zijn vaak illustraties met een stukje tekst en/of een button die de gebruiker begeleid bij het navigeren. Bekende gevallen zijn een lege winkelwagen of een lege prullenmand in de mailbox. Vaak worden empty states ook gebruikt om de website of applicatie wat speelser en persoonlijker te maken met als doel dus een verbeterde user experience en hogere conversie.