Webdesign

Dít zijn de 7 belangrijkste webdesign trends van 2019

Onze webdesigners houden alle ontwikkelingen op het gebied van webdesign nauwlettend in de gaten. Nieuwsgierig wat er anno 2019 hot is op het gebied van website design? We delen in dit blog de 7 webdesign trends van 2019.

Geschreven door Céline Cacchione Fotografie door Rowan Lens
webdesign trends 2019 red banana

Op het gebied van webdesign zijn er trends die komen en weer gaan. Ook in 2019 zijn er weer diverse webdesign trends op te merken. Zo zien we dat er steeds meer ruimte is voor eigen creatieve vrijheid: alles mag losser en vrijer. Denk aan custom made illustraties, 3D-elementen en designs buiten het standaard grid. Heerlijk! Benieuwd welke trends er op design gebied er op dit moment spelen?

In dit blog zetten we de 7 belangrijkste webdesign trends voor je op een rij!

1. Gebruik van illustraties in webdesign

Uit het webdesign 2019 trendrapport van Bēhance blijkt dat zogenoemde custom made illustraties (zelfgemaakte illustraties) 7 keer beter converteren dan stockfotografie. Dit is behoorlijk wat! Deze trend is de afgelopen jaren snel gegroeid.

Van landingpagina’s tot aan volledige websites: de zelfgemaakte illustraties zien we meer en meer. Met custom made illustraties kun je unieke illustraties maken en zo écht opvallen.

Ons advies is dan ook: bekijk in hoeverre je voor je eigen organisatie custom made illustraties kunt doorvoeren.

Wij besloten om de custom made illustraties óók door te voeren voor een van onze klanten: Inofec. We creëerden voor hen een toffe verhuischecklist met daarbij het gebruik van onder andere onderstaande illustraties.

webdesign trends 2019 - illustraties

2. Designelementen buiten het standaard grid

Overlappende designelementen waren de laatste jaren al een ding en ze blijven in 2019 ook een trend. Op het gebied van webdesign is het vooral belangrijk om de mobile experience van de website in gedachten te houden. Je wilt natuurlijk dat het design van een website ook op mobiel werkt, vanwege mobile first-indexering.

Tegenwoordig kunnen we dus ook buiten de lijntjes kleuren met webdesigns. Zo worden de designs vrijer en vooral uniek. Designers kunnen door buiten de standaard grids te werken bijzondere websites ontwikkelen.

Bekijk maar hoe we in het design voor de website van Van Wely buiten het grid werken.

Webdesign trends van 2019 - designelementen buiten het grid Van Wely
Webdesign trends van 2019 - designelementen buiten het grid Van Wely

3. Gebruik van outline typografie online

Typografie is niet weg te denken in de webdesign wereld. Voor we aan de slag gaan met het maken van een website of webshop, denken we zorgvuldig na over de typografie. Op het moment is persoonlijkheid erg belangrijk in lettertypen. Zo zien we de ‘standaard’ lettertypen steeds minder.

We zien dat woorden of de typografie dus steeds vaker een hoofdonderdeel zijn in een design van een website.

Een van de designtrends is het gebruik van zogenoemde outline typografie. Met dit type typografie worden alleen de contouren van de letters gedefinieerd. Het valt op en geeft een merk echt een karakter. Microbrasserie Alafut gebruikt een hele toffe outline typografie!

webdesign trends 2019 - outline typography
webdesign trends 2019 - outline typografie

4. Felle kleuren en nieuwe gradients

Het gebruik van felle kleuren en gradients in webdesigns zien we de afgelopen jaren steeds meer groeien, met 2019 als hoogtepunt voor deze trend.

Felle kleuren doen het goed om bedrijven een unieke en persoonlijke uitstraling mee te geven. Kleuren worden nóg gedurfder en er worden steeds meer oververzadigde kleuren toegepast.

Een gradient wordt gemaakt door twee of meer verschillende kleuren in een vorm te gebruiken, waarbij de kleuren in elkaar overlopen. Dit zagen we een paar jaar terug al in het logo van Instagram en nu dus ook steeds meer in huisstijlen en websites van brands.

Happy Socks maakt goed gebruik van felle kleuren in de website!

 

webdesign trends 2019 - felle kleuren

5. Animatie op het web (micro-interactions)

Animaties zorgen dat de gebruikers interactiever zijn met website. Denk hierbij bijvoorbeeld aan animaties tijdens het laden van een pagina of animaties wanneer je op een knop klikt. Dat laatste noemen we ‘hover effects‘. Dit is dus het effect dat verschijnt wanneer je met je muis over een element op een website beweegt.

De subtiele visuele effecten die je soms terug kunt vinden op websites noemen we micro interactions. Dit is bijvoorbeeld een animatie die voorbijkomt tijdens het scrollen.

Kijk ook maar naar onze website. Na een tijdje komt er linksonder een banaantje in beeld!

Wist je trouwens dat we met onze nieuwe website een aantal awards hebben binnengesleept?

6. Custom cursors en mouse effects

Custom cursors zijn letterlijk aangepaste cursors. Normaal is je muis een pijltje maar dit kan dus ook gewoon een hamburger of banaan zijn. Met een custom cursor toon je jouw creativiteit en onderscheidend vermogen op je website.

Mouse effects worden gebruikt om kleuren en dekkingen van elementen waar de cursor overheen gaat aan te passen. Wanneer jij bijvoorbeeld met je cursor, je muis, over een knop op een website heen beweegt dan verandert de kleur van die knop.

Ook is het mogelijk de cursor zelf aan te laten passen, in plaats van het element waar de cursor overheen beweegt. Deze zogenoemde ‘reactieve cursors’ veranderen van vorm, grootte, dekking, kleur of animatie in reactie op acties van de gebruiker.

Voor de actiepagina die we voor Garmin Pay hebben gemaakt, maken we gebruik van een custom cursor!

 

0

7. Het gebruik van 3D-elementen

3D-elementen zijn ook een belangrijke webdesign trend van 2019. Grote merken van bijvoorbeeld sneakers en sportkleding maken al volop gebruik van 3D-elementen voor hun producten. Met 3D-elementen geef je jouw website namelijk een unieke en speelse touch.

Ook 3D-animaties zijn trending! Ze zien er spectaculair uit en kunnen producten perfect promoten. Het verschil met 3D-elementen is dat animaties bewegen, wat dus nog toffer is! De meeste grote merken gebruiken dan ook 3D-animaties in hun social media advertenties omdat ze zorgen voor een hoge conversie ratio.

Check hieronder een voorbeeld van een toffe 3D-animatie in de website van Dogstudio.

0

Webdesign trends van 2019: om in de gaten te houden

Deze webdesign trends zijn interessant om in de gaten te houden. Zeker gezien ze in direct verband staan met de conversie ratio van websites! Want conversie is natuurlijk het doel van een website. De trends dragen ook bij aan een unieke website die écht past bij je merk!

Benieuwd hoe je deze trends kunt inzetten voor jouw website? We praten je graag bij!

Benieuwd wat wij voor jou kunnen betekenen?

Ontdek jouw kansen

Neem contact met ons op!
Wat alle woorden precies betekenen? Dat check je hier!

Begrippenlijst

Wat is een grid?

Een grid is een soort raster om een layout te maken voor een website. In een raster of grid staan rijen en kolommen waarin je elementen kunt plaatsen.

Wat is een standaard grid?

Normaal gesproken staat er links en rechts op een website een denkbeeldige lijn waar de designer rekening mee houdt. Tussen die lijnen kan dan content geplaatst worden. Tekst en afbeeldingen beginnen dan op diezelfde denkbeeldige lijn. Alles wordt dan netjes onder elkaar geplaatst en op dezelfde afstand uitgelijnd. Dat is het standaard grid.

Wat zijn gradients?

Een gradient is een overgang van twee of meer verschillende kleuren in een vorm.

Wat zijn hover effects?

Een hover effect is het effect dat verschijnt wanneer je met je muis over een element op een website beweegt.

Wat zijn micro interactions?

Micro interactions zijn alle kleine animaties die verschijnen als gevolg van jouw acties op een website. Bijvoorbeeld een animatie tijdens het laden of tijdens het scrollen.

Wat zijn custom cursors?

Custom cursors zijn letterlijk zelfgemaakte 'muizen'. In plaats van dat je muis het standaard pijltje is, kan het bijvoorbeeld een punt zijn of zelfs een hamburger.

Wat zijn mouse effects?

Mouse effects zijn effecten die worden gebruikt om kleuren en dekkingen van elementen waar de cursor overheen gaat aan te passen.

Reactieve cursors

Reactieve cursors zijn cusors die zich aanpassen wanneer je bijvoorbeeld met de muis ergens overheen beweegt.