22 augustus 2024
Weten wat er speelt op het gebied van webdesign? Look no further! Of je nu een compleet nieuwe website wilt of je bestaande website een upgrade wilt geven, 2024 zit vol met frisse webdesign trends die je online merkbeleving naar een hoger niveau tillen. Benieuwd welke ✨aesthetics✨ je niet mag missen? Ik leg je uit welke 10 trends jouw website toekomstbestendig maken.
De standaard menubalk. Horizontaal, bovenaan je website, vaak met witte achtergrond en dropdown menu. In principe niks mis mee, maar sinds dit jaar zien we wel een frisse tegenreactie op deze standaard. Leuk!
We zien bijvoorbeeld steeds meer dat de randjes worden opgezocht wat betreft de breedte en plaatsing van het menu. De menubalk hoeft niet altijd meer de hele breedte van je website in te nemen, maar kan door gebruik van een hamburgermenu ook smal en beknopt worden weergegeven. Het resultaat? Een compact navigatiecomponent die je creatief kunt plaatsen in je scherm, zoals linksboven of fixed onderin.
Reactie uit het studio team: Deze trend negeert een aantal design patterns die bezoekers moeten helpen met navigeren totaal, maar levert wel een verrassend en onderscheidend webelement op. Het is een strijd tussen UX en UI - waarbij de winnaar steeds opnieuw moet worden bepaald.
Motion design is al langer een onmisbaar onderdeel van webdesign, maar inmiddels is een statische website wel écht een no-go geworden. Why? Drie redenen. Motion zorgt ervoor dat je opvalt tussen je concurrenten, kan je gebruiker sturen in een bepaalde richting én maakt je merkbeleving compleet. Doen dus!
We zien hierin nog steeds veel ‘scrollytelling’ waarbij de websitebezoeker al scrollend wordt meegenomen in het verhaal. Daarnaast zien we ook veel on-scroll animaties en interacties met eigenzinnige vorm transitions en creatieve hover states.
Reactie uit het studio team: Meer motion is meer beter
Serif voor web: 10 jaar geleden vonden we het mateloos ouderwets, maar inmiddels is het lettertype met klassieke schreef terug van weggeweest. Waar serif fonts vroeger vooral voor print (denk aan boeken en documenten) werden gebruikt, voelt dit lettertype zich inmiddels ook online helemaal thuis. Ouderwets? Helemaal niet! Serif lettertypen voegen een vleugje klassiek en verfijning toe, terwijl sans serif voor moderne eenvoud zorgt.
Waar je in de afgelopen jaren dus al meer klassieke typografie zag online, valt het de afgelopen tijd vooral op dat deze ook in dezelfde titels worden gecombineerd. Vaak wordt de serif dan gebruikt om één of meerdere woorden te highlighten in een zin die verder in een modern, schreefloos lettertype staat. Zo combineren we klassiek dus met modern: we like!
Een trend die steeds vaker opduikt in de wondere wereld van webdesign is het gebruik van gradients in combinatie met 3D-objecten. Deze benadering combineert de diepte en realisme van 3D-ontwerpen met de levendige kleuren en subtiele overgangen van gradients. Het resultaat is een visueel boeiend effect dat zowel dynamisch als eigentijds aanvoelt.
We zien deze trend vooral veel bij digitale merken: agencies, internet start-ups en IT bedrijven. Niet gek, want deze abstracte vormentaal kan helpen om iets ongrijpbaars als ‘data’ toch op een esthetische manier te visualiseren.
Reactie uit het studio team: Met deze stijl kun je oneindig variëren. Een hele mooie manier om je te onderscheiden van de massa - tenzij al je concurrenten precies hetzelfde doen natuurlijk.
Een echte microtrend: het gebruik van afbeeldingen als hoverstate voor grote tekstuele links, eventueel in combinatie met de visual cursor (zie trend 8). Dit zorgt niet alleen voor een verrassend effect, maar helpt ook bij het navigeren door een visuele voorvertoning te geven van wat er achter de link schuilgaat.
Reactie uit het studio team: Als je het leuk vindt om snel mee te bewegen met trends in webdesign is ‘ie leuk om toe te passen, maar wat ons betreft ook een trend die wellicht snel weer zou kunnen overwaaien.
Extra grote titels maken een comeback in 2024. Deze XL-teksten trekken direct de aandacht en zetten de toon voor de content die volgt. Het is een krachtig statement en leent zich bovendien perfect voor motion (zie trend 1). Zeker in combinatie met een heel wide grid (zie trend 7), waarbij de teksten dicht tegen de rand van je scherm aan of zelfs van je scherm aflopen, pakken deze titels de spotlights.
Reactie uit het studio team: Vet! Daarbij wel goed om te zeggen dat XL-titels vooral een decoratieve functie hebben. Het is namelijk niet zo dat hoe groter de titels zijn, hoe beter leesbaar ze worden. Zeker als ze artistiek van je scherm aflopen of als er beeld overheen ligt, wordt de leesbaarheid minder. Dus zolang je het gebruikt als esthetische eye-catcher op je website, zijn wij fan.
Websites moeten anno 2024 op elk scherm prettig werken. Of je nu op je telefoon zit of op een gigantisch curved second screen: responsiveness kan de ervaring rondom je website maken of breken.
Waar mobile first dus al jaren een must is, zien we dat websites ook steeds beter meeschalen voor grote schermen. Dus geen makkelijke oplossing met een fixed container die even breed blijft op een groot scherm, maar optimaal gebruik maken van de ruimte binnen elke mogelijkheid.
Daarbij zien we dan ook dat de containers (de ruimte waarin alle content van je website zich bevindt) steeds breder worden. Zo gebruik je alle ruimte van het scherm en voorkom je dat je website er ouderwets uit komt te zien.
Reactie uit het studio team: Tof! Waarom zou je niet alle ruimte pakken die er beschikbaar is op een scherm?
De één vind ze waanzinnig, de ander bloedirritant: ik heb het over visual cursors. Deze creatieve trend voor websites focust zich helemaal op desktop. Bij de visual cursor trend verandert de muis op je scherm in een klein element op het moment dat je over een component hovert. Daarin kan bijvoorbeeld een tekst staan (“view blog” of “more info”), maar kan ook een icoon van bijvoorbeeld een pijl staan.
Reactie uit het studio team: We zien ook wel echt praktische voordelen. Zo’n cursor kan je namelijk ook helpen om ruimte in je component te besparen. Dus waar je normaal een text link laat zien om een websitebezoeker te laten weten dat je ergens op kan klikken, kun je die informatie ook laten zien on hover - en waarom dan niet op zo’n creatieve manier? Het grote nadeel zit hem dan ook direct in mobiel gebruik: daar heb je immers geen hover states.
Ronde vormen die vloeiend in elkaar overlopen en de content lijken te omsluiten: dat noemen wij ‘fluid border radius’. Deze trend zien we steeds meer in webdesign.
Reactie uit het studio team: een toffe, uitgesproken stijl die een website een hele zachte, vriendelijke en toch moderne uitstraling geeft.
En de afsluiter uit de lijst van trends in webdesign: stacked images. Binnen deze trends zien we verschillende afbeeldingen over elkaar heen liggen, als een stapeltje foto’s.
Reactie uit het studio team: Leuk! Het geeft direct een vrolijk ‘moodboard’-achtig effect en sluit goed aan bij merken die het speelse willen omarmen en toch een moderne uitstraling willen behouden. Vernieuwend maar niet zó uitgesproken dat deze trend snel zal overwaaien. Een blijvertje denken wij!
Het Creative Studio team van Goldfizh is elke dag bezig met het ontwerpen van innovatieve websites. Ben je geïnspireerd geraakt maar weet je toch niet waar je moet beginnen met je eigen website? Neem dan contact op met onze UX lead Ruby.
.jpg)
