Webdesign-trends 2020: dark theme en serif

Een website bouwen is anno 2020 geen uitdaging meer. Een strakke website bouwen die aan alle eisen van deze tijd voldoet? Dáár maak je indruk mee! In deze blog laten we je zien wat de grootste trends op dit moment zijn in het webdesign-gebied, zo kun jij jouw website voorbereiden op de nieuwe trends.

Website trends 2020 - webdesign

1. Dark theme websites en apps

Waar websites vroeger (vaak) een witte achtergrond hadden met zwarte tekst daarop, worden ze tegenwoordig vaak omgedraaid. Dat noem je een dark theme (of dark mode). Waarom? Het is fijner voor je ogen. Wanneer je de hele dag naar een fel wit scherm kijkt of wanneer je voor het slapen op je telefoon kijkt, krijg je last van je ogen vanwege het felle witte licht. Met een donker thema is dit niet het geval.

Dark themed-websites zijn al langer in de omloop dan je misschien denkt: al in 2016 kwamen de eerste websites en apps met een dark mode. Deze dagen maken de meeste grote namen gebruik van de optie om voor dark mode te kiezen, niet alleen voor op hun website maar ook in de mobiele apps. Een aantal van deze grote spelers zijn:

  • YouTube
  • Facebook Messenger
  • Instagram

Bij YouTube kun je zelf kiezen of je de donkere of lichte modus wilt. Bij de Instagram- en Facebook-app staat dit standaard ingesteld (afhankelijk van de instellingen die jij in je telefoon hebt). De Google-app heeft onlangs ook een dark theme update gedaan. De apps van Gmail en Google Maps zijn nu volledig in dark theme.

Dark Theme YouTube

Bij YouTube kan je kiezen of je gebruik maakt van een White Theme of een Dark Theme

Doordat smartphones en laptops nu een dark mode-instelling hebben, hebben ze in het webwereldje ook iets nieuws geïntroduceerd. Er is een “prefers-color-scheme” attribute in CSS bijgekomen, die kan zien wat de instellingen op jouw device zijn. Heb je je hele telefoon in dark mode staan? Dan past de website zich daarop aan.

2. Videoheader op je site

Je ziet ze steeds meer op websites, een videoheader. De naam zegt het eigenlijk al: hierbij wordt het bovenste deel van de site (de header) gevuld met een video. Het is een geweldige methode om de aandacht van je bezoeker direct op te vangen. Mensen zijn sneller gefocust op bewegend beeld dan stilstaande tekst of foto’s. Zie bijvoorbeeld de videoheader van National Geographic Channel hieronder of kijk even op onze homepage 😉

Een videoheader moet aansprekend zijn, want anders raak je juist bezoekers kwijt. Je zet een videoheader op verschillende manieren in. Voornamelijk met als doel om een emotie bij de kijker op te wekken.

 

Een paar tips voor het maken van videoheaders:

  • Gebruik alleen video’s die waarde toevoegen aan je website. Verkoop jij zwembroeken? Laat dan een video van de zee zien waarbij je zwembroeken ziet. Niet een video over jullie op kantoor.
  • Gebruik relevante beelden. Heb jij een timmerfabriek? Film dan jouw eigen timmerfabriek. Gebruik geen stockvideo’s, dit werkt verwarrend.
  • Hoge kwaliteit video’s. Kwaliteit is alles: mensen moeten niet denken dat de video in 2007 is gefilmd. Een hoge resolutie hierbij is key.
  • Let op de laadtijd. Een videoheader kan echter wel heel zwaar zijn, je kan maar zo aan de 50MB of meer zitten en dit maakt je website ontzettend traag. Daarom is het verstandig om je website extern in te laden via bijvoorbeeld YouTube of Vimeo.
  • Zet het geluid van de video uit. Het is superirritant wanneer je op een website komt en je hoort ineens muziek of ander geluid. Laat het geluid dus lekker achterwege.
  • Zet de video in een loop. Het is wat saai wanneer hij is afgelopen en er gebeurt niets meer. Zet ‘m in een loop, dan entertain je de bezoeker continu.

3. Sans serif of serif?

Vroegah was er een vrij duidelijk verschil tussen het gebruik van serif en sans serif lettertypen. Serif staat voor schreef, sans serif staat voor schreefloos, maar wat is dan schreef?

De schreef wijst naar de kleine ‘versiersels’ aan de letters. Schreefletters werden altijd gebruikt voor print, denk aan kranten, tijdschriften, boeken etc. Schreefloze letters werden vaak gebruikt voor digitaal gebruik, op websites, online advertenties en video’s. Dit was voor veel designers de ongeschreven regel, serif voor print, sans-serif voor digitaal.

De laatste jaren zien we een verschuiving in het gebruik bij online/offline, schreefloze letters worden vaker gebruikt in printproducten. Wat we tot voor kort niet vaak zagen, waren schreefletters voor digitaal gebruik.

Onder andere Mailchimp dacht hier echter heel anders over en die begonnen schreefletters in hun titels te gebruiken. Zij worden vaak als voorbeeld gebruikt omdat zij een internationaal groot bedrijf zijn. We zien nu ook schreefletters in normale body tekst, zoals op de website van Vogue.

Serif font on MailChimp

Bij MailChimp maken ze gebruik van een Serif Font.

4. Gradients en organische vormen

Een trend van 2019 die zich doorzet in 2020: organische vormen. In plaats van de standaard rechte lijnen, vierkanten en cirkels zien we nu ook steeds meer ‘imperfecte’ vormen, die lijken alsof ze met de hand zijn getekend. Ze geven een speelse look aan je website en worden veel gebruikt om secties van websites te scheiden (bij je header bijvoorbeeld) of om bepaalde items uit te lichten. Het kan ook een mooie diepte geven als je het juist gebruikt in combinatie met afbeeldingen.

Daarnaast zien we ook steeds meer kleurverlopen (gradients) terugkomen. Subtiele, lichte kleurverlopen maken je website net iets minder statisch. Ook dit kan weer mooie diepte in je ontwerp geven en gaat vaak goed samen met de organische vormen zoals hierboven omschreven.

Onlangs hebben voor Anna Haen een nieuwe webdesign opgeleverd waarin we op onze eigen manier gebruik hebben gemaakt van deze vormen.

Website Anna Haen Gradient

De Website van Anna Haen maakt ook gebruik van organische vormen. Beeld GoldfiZh

Meer vooruitblikken op het nieuwe jaar?

Ook een splinternieuw webdesign?

Deze trends passen we ze ook graag toe bij onze eigen ontwerpen. Ben jij toe aan een nieuw webdesign en wil je een van deze trends erin verwerken (of niet)? Neem dan contact met ons op. Niets is te gek!

Koen Dolron
1 stories

Een boer met designskills! Koen is freelance webbouwer en webdesigner bij GoldfiZh. En daarnaast altijd te porren voor een fuifje. Meer weten over deze blog? Stuur hem een berichtje.

Zin in tosti’s?

Of gewoon koffie? Of beter kom je langs op onze vrijmibo! Checken we gelijk wat we voor je kunnen doen.

Komen buurten?
Sluiten
Sluiten
Je gebruikt een verouderde webbrowser

Deze website maakt gebruik van moderne technieken die niet worden ondersteund door jouw webbrowser. Update mijn webbrowser

×