Webdesign trends 2022

Webdesign trends 2022

UX

Nieuws

Webdesign

Webdesign trends 2022

Als we onze ervaring laten spreken dan merken we dat we meer en meer focussen op gebruiksvriendelijkheid. Websites moeten toegankelijker, gebruiksvriendelijker en daarbij nog feilloos werken.

Onze samenleving brengt meer en meer van zijn tijd online door. Daardoor is het onze taak als webdesigner om gebruikers op emotioneel niveau te betrekken. Hierbij vertellen we verhalen die tegelijkertijd door leuke interacties worden opgesmukt.

Daarom is het ook absoluut noodzakelijk om web technieken voortdurend bij te schaven in onze steeds veranderende wereld. Lees even mee terwijl we de belangrijkste webdesign trends 2022 bestuderen die de wereld van webcreatie dit jaar zullen domineren.

Inclusive Design Mania

Inclusivity, of inclusiviteit wordt helaas te vaak gezien als politiek modewoord dat te gemakkelijk wordt gebruikt. Maar de kern is een ideologie die elke ontwerper aanspreekt -er alles aan doen om inclusief te zijn-. En dit waar inclusie voorheen niet bestond. In de gepersonaliseerde markt van vandaag is het een idee dat bijna onmisbaar is geworden.

Inclusive webdesign trends 2022

Inclusief ontwerp heeft zijn invloed op elke stap van het ontwerpproces van een website. Van strategische besluitvorming met betrekking tot de doelgroep, tot de tone of voice en personalisatie. Evenals het definiëren van de grafische taal van uw merk om zo tegemoet te komen aan alle genders, standpunten, ervaringen en situaties.

Afbeeldingen en illustraties voor functionele doeleinden verschijnen bijvoorbeeld steeds vaker in een niet-gender vorm, wat een speelse diversiteit biedt.

Bovendien zal het internet volgend jaar, mede dankzij de gamewereld, ongetwijfeld overspoeld worden met een groeiend aantal avatars, illustraties en karakters, van niet-menselijke identiteiten.

Het model dat Ranboo Fashion in hun video laat zien, is enigszins gender neutraal en verbergt het gezicht zodat de kijker niet zeker is van de identiteit van het model.

Scrollytelling

Scrollytelling is een steeds populairdere manier om gebruik te maken van een digitale interface om een verhaal over te brengen.

Met behulp van visuele effecten wordt ernaar gestreefd om op een boeiende manier inhoud op een presenteerblaadje te serveren. Scrollytelling wordt ook wel narratieve visualisatie genoemd. Een reeks visuele elementen die in volgorde zijn gerangschikt. Vervolgens chronologisch georganiseerd om een specifieke boodschap aan bezoekers over te brengen. We verwachten dan ook dat dit één van de belangrijkste webdesign trends 2022 zal zijn.

Scrollytelling

De website van Infrared Mind Body toont grote afbeeldingen en teksten die verschijnen via verschillende animaties die hun waardepropositie accentueren. Grote close-ups, slecht verlichte afbeeldingen, grootschalige typografie, evenals zachte en vloeiende overgangen, creëren een unieke sfeer op een verfijnde manier.

Horizontal Scrolling

In tegenstelling tot de bekende en intuïtieve verticale navigatie, kan een side scroll layout leiden tot verrassende interacties tussen tekst en beeld.
Dit geldt met name voor portfolio-websites, catalogi en dergelijke. Ondermeer het ontdekken van projecten of het bezoeken van online galerijen is veel boeiender met zijwaartse navigatie. Als het goed wordt gedaan, kan horizontaal scrollen een website aantrekkelijker, leuker en gedenkwaardiger maken. Zo pasten wij dit onder andere toe bij de website voor VET Toolbox.

Horizontal scrolling

SIRUP is een website die uitsluitend is gemaakt om naar afspeellijsten te luisteren. De ontwerper realiseerde zich dit en creëerde een horizontale scroll ervaring. Hierbij is de afspeellijst en zijn de beelden als onderdeel van de scroll beweging opgenomen. De vloeiende beweging van verschillende grafische elementen zorgt voor een gevoel van progressie, zelfs als ze statisch zijn. Daardoor blijft de gebruiker scrollen.

Brutale typografie

Als je het type bent (woordspeling volledig bedoeld) om iets gedurfd te gebruiken, moet je zeker rekening houden met deze trend. De robuustheid en dominantie waardoor zulke websites eruit springen is erg duidelijk. Zelfs bij het gebruik van een beperkt aantal elementen.

Brutale typografie kan worden gezien als een reactie op de less is more, en het minimalistische webdesign. Een schaamteloze ruige stijl die in schril contrast staat met de dertien in een dozijn hedendaagse websites.

Typografie gebruiken om een dynamisch grid te maken. Letters als bouwstenen voor segmenten, koppen en alinea’s. Of gewoon een manier om los te gaan op een hele website.

Brutale typografie

Het gigantische font is zeker het startpunt van de website van Dillinger. En zoals ze zelf zeggen: “Variable impressive fonts, so the eyes and mind delight.”

Typografische animaties

Een mooie aanvulling op de vorige trend is typografische animatie. Deze trend evolueert snel dankzij de nieuwe technieken die voorhanden zijn. Tegenwoordig wordt deze techniek veel gebruikt door webdesigners in verschillende vormen.
Bewegende tekst kan de aandacht trekken, een toon zetten, belangrijke segmenten markeren en de gebruiker door een pagina leiden. Dit is een trend die in werkelijkheid al bestaat sinds de jaren zestig, toen Hollywood geanimeerde openingstitels gingen gebruiken in plaats van statische tekst.

Nostalgie

Sommige trends van de afgelopen jaren hebben nostalgische elementen. Mensen willen zich het verleden herinneren en er doen aan herinneren. Twee jaar nadat de COVID-19 pandemie voor het eerst toesloeg en te midden van toenemende onzekerheid, zijn designers op zoek naar geruststellende ervaringen en vormen van escapisme.

Deze aanpak draait om het vertragen van dingen. Het opwekken van een meer analoog gevoel. Bijvoorbeeld door typografie en afbeeldingen, met behulp van klassieke beeldfilters, retro-lettertypen, wazigheid, korrel, texturen, zachte verlichting en pastelkleuren paletten. Dit zijn slechts enkele voorbeelden van technieken die ontwerpers gebruiken om nostalgische ervaringen te creëren. Behoort zeker tot webdesign trends 2022.

Nostalgisch webdesign

Bravenewlit is een literaire speeltuin. Het romantische en ronde lettertype, evenals de platte pasteltinten met zachte korrelige afbeeldingen, creëren een gevoel van vertrouwdheid en verbondenheid. Om dit interactieve tijdschrift herkenbaar te maken, koos de ontwerper ervoor om het een tastbare uitstraling te geven. Ter illustratie hiervan gebruikt hij gescande afbeeldingen van teksten met voetnoten. Vervolgens een post-it-notitie alsof de gebruiker deel uitmaakt van het schrijfproces.

Contrasterende kleuren

Deze is voor de millennials, kinderen van de jaren ’80 en ’90. Het is moeilijk om onverschillig te blijven voor een website met neon accenten. Kleur is een hulpmiddel dat helpt de focus van de gebruiker te krijgen. Daarbij helpt het ook om een emotie te stimuleren.
Deze trend is meestal gericht op een specifiek publiek. Deze stijl is levendig, gedurfd en knallend. Gevuld met neon, heldere contrasten en gradients.

Neon Webdesign

Het tweede gedeelte van de website van Superglow combineert grote zwarte titels op een effen gele achtergrond. De algehele look omvat verzadigde foto’s met een fade-out muis-animatie die verschijnen bij de muisaanwijzer.

Off The Grid

Een grid is één van de belangrijkste hulpmiddelen voor een ontwerper. Het geeft ons werk vorm en structuur.

Going of the grid is zeker geen nieuw idee, maar het is nog niet op grote schaal aanwezig. Tegenwoordig hebben front-end webdesigners geen ontwikkelaars meer nodig om hun visie te actualiseren. Het wordt steeds gemakkelijker om de gekste layouts te vertalen naar een website. Hierdoor zal off the grid meer en meer tot de webdesign trends 2022 gaan behoren.

Off the grid webdesign

Het portfolio van Maxim Aginsky, gebruikt een citaat in het eerste beeld. Hierdoor demonstreert hij zijn visie. Met overlappende teksten en een lineaire structuurachtergrond kan je echt spreken van off the grid.

Imagery Multilayers

De afgelopen jaren is er veel aandacht besteed aan strakke en minimalistische ontwerpen. Zodoende dat veel ontwerpers onbewust aangetrokken werden door meer visueel complexe designs.

Meerdere content lagen zijn een manier om conventionele elementen waar onze ogen aan gewend zijn uit te dagen. Zoals fotogalerijen en typografische elementen die een ervaring creëren voor het vertellen van een verhaal. Dit leidt ertoe dat gebruikers meer tijd besteden aan het verkennen van een website.

Imagery multilayers

In het voorbeeld van General Condition helpt het gemeenschappelijke thema van de foto’s, elegante animatie en zwarte achtergrond alles bij elkaar te brengen. Dit levert een visueel samenhangende ervaring op.

Een ander voordeel van deze techniek is dat het gemakkelijker wordt om veel inhoud in een kleinere oppervlakte te plaatsen.

Delight

Delights zijn een belangrijk element van een goede gebruikerservaring geworden. Gebruikers van vandaag verwachten het in één van zijn twee vormen: oppervlakkige delights en diepe delights. Daarom is dit ook één van de onmisbare webdesign trends 2022.

Tot oppervlakkige delights behoren animaties, zorgvuldige overgangen of gebaren, afbeeldingen en geluiden. Diepe delights zorgen er ondertussen voor dat aan alle gebruikersbehoeften wordt voldaan. Inclusief functionaliteit, betrouwbaarheid, gebruiksvriendelijkheid en plezier. De kans dat tevreden gebruikers het product of de dienst aanbevelen, neemt toe bij een fijne web ervaring.

Delight webdesign

Airbnb is een geweldig voorbeeld van een website die gedurende het hele gebruikerstraject heerlijke ervaringen biedt. Functies zoals het markeren van de kaarttags waar de gebruiker al doorheen heeft gekeken, zijn niet alleen prettig maar ook functioneel. Deze helpen de gebruiker om sneller door het vaak enorme aantal opties te bladeren.

Datum

18 januari 2022

Leestijd

Auteur

Cliff Vandyck

Met een scherp oog voor esthetiek en een diepgaande kennis van de nieuwste trends delen wij waardevolle inzichten en inspiratie, waardoor jij als lezer wordt meegenomen op een boeiende reis door de wereld van creatieve visuele communicatie.

12 Minutes

Deel

Gerelateerde artikelen


Boven de vouwlijn

Boven de vouwlijn

UX

Nieuws

SEO

Boven de vouwlijn

De term boven de vouwlijn komt oorspronkelijk uit de krantenwereld en verwijst naar de inhoud op de bovenste helft van de voorpagina. Bij geplooide kranten was alles boven de vouw direct zichtbaar, wat belangrijk was om lezers aan te trekken. Nu, in de digitale wereld, betekent boven de vouw de inhoud die zichtbaar is wanneer een webpagina laadt, zonder dat de bezoeker hoeft te scrollen. Dit bovenste deel van de pagina wordt als cruciaal gezien, omdat het direct de aandacht trekt en de eerste indruk bepaalt. Inhoud boven de vouwlijn moet relevant zijn, zodat bezoekers meteen zien waar de website over gaat. Call-to-actions, zoals Meer informatie of Contacteer ons, doen het hier vaak goed om de interactie te verhogen.

Boven de vouwlijn headliner krant

Waarom is boven de vouw belangrijk?

Content boven de vouwlijn is essentieel omdat dit deel van de pagina het eerst zichtbaar is en meteen de aandacht trekt. Bezoekers bepalen in enkele seconden of de pagina aansluit bij hun verwachtingen. Door de belangrijkste informatie direct boven de vouwlijn te plaatsen, verleid je hen om langer te blijven. Dit verhoogt de kans dat zij doorklikken of andere acties ondernemen. Bovendien zijn call-to-actions boven de vouw effectief omdat ze direct een interactie uitnodigen, wat vaak leidt tot hogere conversiepercentages.

Hoe bepaal je de vouwlijn op websites?

De exacte positie van de vouwlijn is lastig te bepalen, want dit hangt af van het schermformaat, de resolutie en het apparaat dat bezoekers gebruiken. Voor een desktop is de vouwlijn meestal rond de 1000 pixels breed en 600 pixels hoog. Analyse tools, zoals Google Analytics, kunnen inzicht bieden in de meest voorkomende schermresoluties van je bezoekers, zodat je de vouwlijn beter kunt bepalen. Op mobiele apparaten ligt de vouwlijn vaak lager, wat vraagt om een aangepaste, responsive layout. Het juiste gebruik van de vouwlijn speelt een rol in de eerste indruk en gebruikerservaring.

Responsive design en de vouwlijn

Met de toename van mobiele gebruikers is het ontwerp van websites complexer geworden. In een responsive ontwerp past de inhoud zich aan elk scherm aan, zodat deze altijd optimaal wordt weergegeven. Hoewel de belangrijkste inhoud nog steeds boven de vouwlijn moet staan, is scrollen inmiddels gebruikelijk geworden. Het is dus slim om de gebruiker uit te nodigen verder te scrollen zonder dat hij belangrijke informatie mist. Responsive design zorgt ervoor dat bezoekers een naadloze ervaring hebben, ongeacht hun apparaat.

Boven de vouwlijn smartphone

Boven de vouwlijn en advertenties

Het plaatsen van advertenties boven de vouwlijn kan een dubbel effect hebben. Hoewel advertenties boven de vouw meer opvallen, kan dit de gebruikerservaring verstoren en zelfs je zoekmachinepositie negatief beïnvloeden. Google bestraft websites met te veel advertenties boven de vouw, wat ten koste gaat van de zichtbaarheid van andere belangrijke content. Een goede balans tussen advertenties en content zorgt voor een prettige ervaring zonder dat essentiële informatie onder de vouw verschuift.

De impact van de vouwlijn op SEO

Google beschouwt de inhoud boven de vouwlijn als belangrijk, maar let vooral op de broncode. Omdat Google je website scant via de code, helpt een schone broncode om snel de belangrijkste teksten te vinden. Optimaliseer dit door stijlelementen in externe CSS-bestanden op te slaan en JavaScript extern aan te roepen. Deze aanpak maakt de code overzichtelijker, wat kan bijdragen aan hogere posities in zoekmachines. Denk aan de vouwlijn als een onderdeel van SEO, maar vergeet niet dat ook content, techniek en gebruikerservaring van belang zijn.

Datum

5 oktober 2021

Leestijd

Auteur

Cliff Vandyck

Met een scherp oog voor esthetiek en een diepgaande kennis van de nieuwste trends delen wij waardevolle inzichten en inspiratie, waardoor jij als lezer wordt meegenomen op een boeiende reis door de wereld van creatieve visuele communicatie.

5 Minutes

Deel

Gerelateerde artikelen


Gebruiksvriendelijke website

Gebruiksvriendelijke website

UX

Nieuws

SEO + Webdesign

Gebruiksvriendelijke website

Het belang van een gebruiksvriendelijke website

Een gebruiksvriendelijke website is essentieel voor het succes van elk online platform. Toch maken veel websites nog steeds fouten die de gebruikerservaring in de weg staan. Een goede gebruiksvriendelijkheid zorgt ervoor dat bezoekers snel vinden wat ze zoeken, langer op je website blijven en vaker terugkomen. Bovendien onderscheid je jezelf van de concurrentie door niet alleen een aantrekkelijk design te bieden, maar ook een probleemloze navigatie en functionaliteit.

In dit artikel bespreken we de belangrijkste elementen van een gebruiksvriendelijke website en hoe deze bijdraagt aan het succes van jouw online aanwezigheid.

Waarom is een gebruiksvriendelijke website belangrijk?

Een gebruiksvriendelijke website zorgt ervoor dat bezoekers snel en eenvoudig de informatie kunnen vinden die ze nodig hebben. Als je website lastig te navigeren is of traag laadt, zullen bezoekers al snel afhaken en naar een concurrent gaan. Het optimaliseren van de gebruikerservaring verbetert niet alleen de prestaties van je website, maar verhoogt ook de kans op conversies en klanttevredenheid.

Hieronder vind je enkele praktische tips om de gebruiksvriendelijkheid van jouw website te verbeteren.

1. Mobile friendly design

In de huidige tijd surfen steeds meer mensen via hun smartphone. Het is daarom cruciaal dat jouw website mobiel geoptimaliseerd is. Een mobile friendly website past zich automatisch aan aan de schermgrootte van de gebruiker, zonder dat de inhoud onoverzichtelijk wordt.

Test regelmatig hoe jouw website wordt weergegeven op verschillende apparaten. Een handige tool hiervoor is de mobielvriendelijke test van Google, waarmee je snel kunt zien of jouw site voldoet aan de eisen voor mobiele gebruikers.

2. Toegankelijk voor alle gebruikers

Een gebruiksvriendelijke website is toegankelijk voor iedereen, inclusief mensen met een beperking zoals blinden en slechtzienden. Door gebruik te maken van technieken zoals alternatieve teksten voor afbeeldingen, goed gestructureerde HTML en leesbare lettergroottes, zorg je ervoor dat iedereen jouw site optimaal kan gebruiken. Schermlezers kunnen dan de inhoud van je website eenvoudig interpreteren.

3. Gestructureerde opbouw en navigatie

Een goede structuur en duidelijke navigatie zijn essentieel voor een gebruiksvriendelijke website. Zorg voor een overzichtelijk menu, maak gebruik van duidelijke categorieën en subcategorieën, en denk altijd vanuit het perspectief van de bezoeker. Bezoekers moeten snel de informatie kunnen vinden die ze zoeken, zonder te veel te hoeven klikken.

Bij een van onze projecten voor kapperszaak Rbelle hebben we bijvoorbeeld een verticaal menu geïmplementeerd dat altijd zichtbaar blijft, waardoor bezoekers snel kunnen navigeren door de verschillende pagina’s.

4. Scanbare content

Bezoekers lezen niet altijd woord voor woord. Vaak scannen ze een pagina om snel de belangrijkste informatie te vinden. Het is daarom belangrijk dat de inhoud van je website gemakkelijk te scannen is. Gebruik duidelijke koppen, subkoppen, korte paragrafen en opsommingen om de tekst visueel aantrekkelijk en leesbaar te maken.

Bovendien moeten de teksten op je website beknopt, relevant en goed leesbaar zijn. Zo zorg je ervoor dat bezoekers sneller vinden wat ze nodig hebben, wat bijdraagt aan de algehele gebruiksvriendelijkheid.

5. Snelle laadtijd

Een trage laadtijd kan bezoekers ontmoedigen om op je website te blijven. Het is zelfs een van de belangrijkste redenen waarom mensen een website verlaten. Google beloont websites met een snelle laadtijd met een hogere positie in de zoekresultaten, wat je SEO ten goede komt.

Er zijn verschillende gratis tools, zoals Pingdom en Google PageSpeed Insights, waarmee je de snelheid van je website kunt testen en suggesties kunt krijgen voor verbeteringen.

Snelle laadtijd

6. Gemakkelijke navigatie

Een eenvoudig en intuïtief navigatiemenu is een van de belangrijkste onderdelen van een gebruiksvriendelijke website. Plaats het navigatiemenu duidelijk bovenaan de pagina en zorg ervoor dat bezoekers gemakkelijk door de verschillende secties van je website kunnen bladeren. Houd het aantal menu-items beperkt en overweeg subnavigatie als je veel pagina’s hebt.

Naast het menu zijn er andere manieren om de navigatie te verbeteren, zoals:

  • Een zoekfunctie.
  • Interne en externe links.
  • Populaire contentlijstjes of top-10 overzichten.
  • Een goed ontworpen 404-pagina voor foutmeldingen.

7. Bruikbare formulieren

Formulieren zijn een essentieel onderdeel van veel websites, vooral zakelijke websites. Ze maken het voor bezoekers eenvoudig om contact op te nemen of zich aan te melden voor nieuwsbrieven. Zorg ervoor dat je formulieren duidelijk zijn, eenvoudig in te vullen en er visueel aantrekkelijk uitzien. Dit draagt bij aan de gebruiksvriendelijkheid en helpt bij het genereren van leads.

Bij het project voor Surmont Advocaten hebben we bijvoorbeeld gebruik gemaakt van een interactief kaartformulier om de gebruikerservaring te verbeteren.

Conclusie

Een gebruiksvriendelijke website is een essentieel onderdeel van een succesvolle online strategie. Het verhoogt niet alleen de tevredenheid van je bezoekers, maar ook de kans op conversies en een hogere ranking in zoekmachines. Door aandacht te besteden aan mobiele optimalisatie, toegankelijkheid, gestructureerde content en snelle laadtijd zorg je ervoor dat jouw website gebruiksvriendelijk is voor iedereen.

Investeer tijd in het optimaliseren van je website en je zult merken dat dit zich vertaalt in betere prestaties en tevreden bezoekers.

Datum

12 november 2020

Leestijd

Auteur

Cliff Vandyck

Met een scherp oog voor esthetiek en een diepgaande kennis van de nieuwste trends delen wij waardevolle inzichten en inspiratie, waardoor jij als lezer wordt meegenomen op een boeiende reis door de wereld van creatieve visuele communicatie.

7 Minutes

Deel

Gerelateerde artikelen