Ga je dit jaar een website lanceren of ben je van plan om je huidige website te restylen? Dan is het goed om te weten wat gebruikers in 2018 verwachten van je website. Dit zijn de meest spraakmakende webdesign trends die ik voor 2018 heb ontdekt.

Achtergronden hoeven niet meer recht te zijn

In 2018 is er meer ruimte voor vloeiende achtergronden in websites. Waar in voorgaande jaren nog veel werd gewerkt met strakke rechte lijnen, gaat het in 2018 letterlijk alle kanten op.

Geen rechte lijn te vinden
Geen rechte lijn te vinden. Ontwerp door Hippie M.

Niet alleen in de header van de pagina worden vloeiende achtergronden gebruikt. Ook is het gebruikelijk dat in de rest van de website de achtergronden weer terugkeren in verschillende vloeiende vormen.

Ook speelse lijnen onder de afbeeldingen.
Ook speelse lijnen onder de afbeeldingen. Ontwerp door Martin Strba

Foto’s maken plaats voor illustraties

In 2017 had nog bijna elke website een “header” met een grote foto en tekst. In 2018 maken foto’s plaats voor illustraties. 2018 wordt een goed jaar voor tekenaars en illustratoren.

Foto’s maken plaats voor illustraties webdesign 2018
Grote illustraties in de header. Ontwerp door Walid Beno

Vaak blijft het niet bij één illustratie en wordt een complete reeks van illustraties gemaakt. Deze illustraties worden gebruikelijk voorzien van een begeleidende tekst en lichten samen een onderdeel of dienst uit.

Serie van informatie illustraties
Serie van informatie illustraties. Ontwerp door Martin Strba

Stap van een grid af

2018 is het jaar dat er geëxperimenteerd kan worden. Met de introductie van nieuwe CSS tools is het mogelijk om meer speelse ontwerpen te maken. Zo is het niet meer noodzakelijk om alles in een grid te plaatsen.

Prachtige manier om uit een grid te stappen
Prachtige manier om uit een grid te stappen. Ontwerp door Zajno Crew

With great power comes great responsibility. Dit is zeker waar wanneer je gaat experimenteren met het plaatsen van content buiten een grid. Zorg ervoor dat het geen onoverzichtelijk puinzooi wordt en plan je website zorgvuldig.

Veel wit ruimte houdt het rustig
Veel wit ruimte houdt het rustig. Ontwerp door Alex Parent

Split screen layouts

Split screen layouts zijn weer terug van weggeweest. Nu beeldschermen steeds groter zijn, wordt er weer volop geëxperimenteerd met het naast elkaar plaatsen van verschillende content.

Split screen layout in actie
Split screen layout in actie. Ontwerp door Andrew Baygulov

Het is vooral populair om bijvoorbeeld een grote foto of video naast een tekst te zetten. De split screen layouts kenmerken zich door dat ze de complete breedte en hoogte van het scherm innemen.

Dynamische Split screen
Dynamische Split screen. Ontwerp door Netguru

Combineer felle kleuren

Durf felle kleuren met elkaar te combineren. Beschikt jouw brand over enkele felle kleuren? Probeer deze dan te combineren met bijvoorbeeld een foto.

Lekker fel en vrolijke kleurencombinaties
Lekker fel en vrolijke kleurencombinaties. Ontwerp door Ela Kumela

Een suffe stock photo wordt met de juiste kleurencombinatie juist een gaaf onderdeel van je brand. Wees niet bang om te experimenteren.

Kleuren gecombineerd met foto
Kleuren gecombineerd met foto. Ontwerp door Kike Escalante

Isometrisch tekeningen

Isometrische tekeningen zijn momenteel erg populair, ze worden voornamelijk veel gebruikt bij online software aanbieders. Waar het vaak lastig is om een software dienst uit te beelden met foto's, is dat met een illustratie eenvoudiger te doen.

Isometrisch tekeningen in de header
Isometrisch tekeningen in de header. Ontwerp door bapakpapay

Belangrijk is dat de gekozen hoek waaronder getekend wordt, consistent wordt doorgevoerd over de gehele website.

Hoek juist doorgevoerd op de gehele website
Hoek juist doorgevoerd op de gehele website. Ontwerp door Outcrowd

Horizontale layouts

Naast split screen layouts wordt er ook steeds meer geëxperimenteerd met horizontale layouts. Dit zijn layouts welke juist in de breedte scrollen in plaats van de meer traditionele verticale manier van scrollen.

Content scrolt horizontaal
Content scrolt horizontaal. Ontwerp door Dennis Ziegler

Het is ook mogelijk om horizontaal en verticaal scrollen te combineren. Zorg er wel voor dat het duidelijk is, hoe je door de website kan navigeren.

Horizontale navigatie
Horizontale navigatie. Ontwerp door Dwinawan

Tekst mag groot en bold zijn

Beeldschermen worden steeds groter. Dit betekend dat er meer ruimte is voor beeld en tekst. Grote en dikgedrukte typografie in combinatie met beeld is een populaire trend in 2018.

Tekst mag groot en bold zijn
Ruimte voor typografie. Ontwerp door Zhenya Rynzhuk

Zorg ervoor dat je teksten beknopt zijn. Niemand zit te wachten op lange zinnen, welke verdeeld zijn over 4 regels.

Beknopte grote teksten
Beknopte grote teksten. Ontwerp door Surja Sen Das Raj

Meer schaduw voor diepte

Verkoop je een product en wil je deze extra onder de aandacht brengen? Probeer dan je product vrijstaand te maken en te voorzien van een extra schaduw. Zo valt het product extra op.

Product uitgelicht met extra diepte
Product uitgelicht met extra diepte. Ontwerp door Cal Notman

Het is niet ongebruikelijk om meerdere niveaus van diepte aan te brengen. Maar probeer het te beperken tot 3 a 4 niveaus.

Meerdere niveau's van diepte
Meerdere niveau's van diepte. Ontwerp door Cal Notman

Gebruik micro animaties

Door het gebruik van micro animaties kan je de gebruikerservaring een enorme boost geven. The devil is in the details. Het zijn vaak de kleine dingen die net even dat extraatje geven.

Zeer uitgebreide micro animatie
Zeer uitgebreide micro animatie. Ontwerp door Darin

Een eenvoudige stap om met micro animaties te beginnen zijn formuliervelden. Probeer bijvoorbeeld eens iets creatiefs te doen met het zoekveld op je website.

Micro animatie in een zoekveld
Micro animatie in een zoekveld. Ontwerp door Oleg Frolov

Duotoon iconen

Iconen zijn altijd een belangrijk onderdeel van websites geweest. In 2018 krijgen iconen een upgrade en worden ze vaak uitgevoerd in duotone kleuren. Iconen in één kleur zijn op hun retour in 2018.

Zakelijk en strakke duotoon iconen
Zakelijk en strakke iconen. Ontwerp door Nóra Mellényi

Duotone iconen komen in verschillende smaken. Strak en zakelijk, of juist speels en vrolijk. Zoek een iconenset welke goed bij je merk past, of laat er eentje speciaal voor je brand ontwikkelen.

Meer vriendelijk en speelse iconen
Meer vriendelijk en speelse iconen. Ontwerp door Tomas Knopp

Trends volgen elkaar snel op

2018 is nog jong en trends volgen elkaar snel op. Zorg ervoor dat je nieuwe website niet te trendgevoelig wordt. Want voor je het weet zit je met een gedateerde website ;-)

Wil je weten hoe je een robuuste website maakt welke een paar jaar mee kan? Neem dan eens contact met mij op voor een vrijblijvend gesprek.