Acht webdesign trends voor 2020/2021

Acht webdesign trends voor 2020/2021

Voor nieuwe en re-design websites

Team Nijhuis

Over smaak valt niet te twisten, waar de één Pablo Picasso geweldig vindt, daar vindt de ander het spuuglelijk. Er zijn echter wel ontwikkelingen in een bepaalde richting op langere termijn waarvan een overgrote groep zegt dat mooi te vinden, een trend.

Net als in de mode en op vele andere vlakken heb je ook binnen webdesign te maken met trends. Uiteraard blijven we bij Team Nijhuis graag op de hoogte van wat er speelt binnen de markt en hoe wij dit kunnen toepassen bij onze klanten.

Niet alleen bij een compleet nieuwe website houden we deze trends in de gaten, ook bij een bestaande website kunnen we door middel van een re-design jouw website in een nieuw jasje steken zodat je weer helemaal in de markt staat. Naast trends zijn er uiteraard nog veel meer zaken die belangrijk zijn voor je website, met name de conversie in combinatie met webdesign, zoals mijn collega Liza schrijft.

Trend #1: Vertrouwen door data

Je hebt een mooie website, maar je wilt ook de bezoeker overtuigen. Content op je website is heel belangrijk, maar bijna niemand leest enorme blokken met tekst.  Een mooi verhaal over wie jullie zijn en wat jullie doen is altijd goed om te vermelden, maar echte data van je bedrijf werkt het best.

Creatief gezien kunnen hier per onderdeel mooie iconen gemaakt worden die volledig aansluiten op de look-and-feel van je website. Door de iconen hoog in de website te plaatsen met voldoende rust en ruimte zijn dit enorme blikvangers. De bezoeker op je website heeft jullie niet toevallig gevonden, maar is al op zoek naar iets in de branche wat jullie doen. Deze iconen spreken dus tot de verbeelding.

Naast de iconen moet echter wel data zichtbaar zijn om het geheel te versterken. De getallen per onderdeel kunnen geanimeerd oplopen tot hun eind, wat een speels effect geeft en gelijk de aandacht heeft van de bezoeker. De volgende zaken zouden bijvoorbeeld prima door middel van data getoond kunnen worden.

  • Jaar opgericht
  • Hoeveel is er opgewekt
  • Hoeveel is er geproduceerd in een jaar
  • Hoeveel is er afgeleverd in een jaar
  • Hoeveel klanten hebben jullie geholpen

Uiteraard is dit per branche verschillend, maar ieder bedrijf zou er gemakkelijk vier kunnen bedenken waarmee je de klant kan overtuigen.

Data geven een webdesign vertrouwen

Trend #2: Duimvriendelijk ontwerp

Het mag inmiddels geen nieuws meer zijn dat elk jaar het aantal mobiele gebruikers groter wordt. Hierbij moet ook zeker rekening gehouden worden met het design. Plaats je het menu bovenin, of wil je onderscheidend zijn door dit onderin te plaatsen. Voordeel hiervan is dat je bezoeker hem bovenin verwacht, waar je dan weer slim een Call To Action (CTA) kan plaatsen die extra aandacht krijgt.

De meeste mensen houden hun mobiel met één hand vast en gebruiken hun telefoon slechts met één vinger.

Nog altijd wordt er veel onderzoek gedaan hoe de mobiel gebruikt wordt en met welke vingers wij navigeren. De meeste mensen houden hun mobiel met één hand vast en gebruiken hun telefoon slechts met één vinger. Het laat zich niet moeilijk raden dat de duim verreweg het meest gebruikt wordt. Enkele jaren geleden was dit al bijna 50%, maar steeds meer mensen gaan over tot de duim om te navigeren.

Als de vraag komt of het mobiele menu onderin geplaatst mag worden wordt vaak conservatief gedacht. Dat zie je toch bijna nergens. Je verwacht hem toch bovenin. Ik wacht wel tot meer mensen dat hebben. Echter is er ook nog een alternatief mogelijk.

Het logo inclusief het hamburger menu (zoals drie streepjes vaak genoemd worden omdat ze het uiterlijk hebben van de hamburger) kan gewoon bovenin blijven staan. Overige items die je daar dan vaak terug ziet zijn het telefoon icoon en vaak nog een envelop icoon om te mailen. Deze items kunnen ook vast onderaan het scherm gemaakt worden.

Combineer dit dan met bijvoorbeeld de winkelwagen en de zoekfunctie en de gebruiker heeft alle gemakkelijke functies voor je website letterlijk onder de duim zitten. Tevens creëer je rust in de menubalk, wat het ontwerp en gebruiksvriendelijkheid ten goede komt.

Ik verwacht dat het aankomende jaar steeds meer mobiele ontwerpen voorzien zijn van handige koppelingen onderaan het scherm.

Onderstaand is het verschil goed zichtbaar met twee dezelfde ontwerpen als basis, waarbij het linker ontwerp de koppelingen onder de duim heeft, en rechts en menubalk die drukker oogt en minder koppelingen voor handen zijn.

Duimvriendelijk mobiel design ingespeeld op de laatste trend

Trend #3: Schaalbare vector graphics

De trend van Scalable Vector Graphics (afkorting SVG) blijft winnen aan populariteit. Zoals het woord al zegt, is deze illustratie schaalbaar. Waar een .jpg, .gif of .png aan kwaliteit verliest blijft als je deze ook maar één keer vergroot, daar blijft een .svg bij zelfs honderd keer vergroten nog altijd scherp.

Dat klinkt natuurlijk heel leuk, maar waarom heb je hier echt iets aan? “Alles op mijn website wordt toch maar op één formaat getoond?”, hoor ik je denken. In de praktijk werkt het echter niet op deze manier. Met de opkomst van de mobiel – nadat een website ook responsive (schaalbaar) moest zijn – worden afbeeldingen en dus ook illustraties in allerlei formaten getoond.

Begonnen de eerste destijds met hun logo, inmiddels zie je steeds meer designers hun ontwerpen voorzien van illustraties die kunnen worden geëxporteerd naar .svg. Bijkomend voordeel is dat deze bestanden niet groot zijn qua formaat en dus ook helpen bij de snelheid van de website.

Het voorbeeld hieronder laat duidelijk het verschil zien tussen een png en een svg die vergroot worden. Een svg blijft ook scherp na een vergroting, waar de png al een enorm verlies heeft in kwaliteit.

Schaalbare vector bestanden versus png afbeeldingen

Trend #4: Gradients 2.0

Na een periode van vrolijk springende paperclips en knipperende teksten was het flat design sterk in opkomst. Simpel gezegd bestaat dit ontwerp uit kleuren en visuals die er plat uitzien. Geen diepte effect door een schaduw, maar strakke illustraties en simpele lettertypen vormden de basis. Naast de strakke vormen en het overzicht op de pagina is het ook gemakkelijker voor mobiel. Doordat er minder creatieve uitingen in het design zitten is dit gemakkelijk schaalbaar te maken en laadt deze website snel.

Doordat steeds meer ontwerpen uitgekleed werden ontstond er automatisch ook een grootschalig aantal websites dat op elkaar leek. Op creatief vlak springen deze websites er nooit bovenuit. Daarnaast valt jouw pagina niet op naast die van de concurrent, die waarschijnlijk hetzelfde doet.

Als je de gradient als ondergrond combineert met de hierboven genoemde .svg illustraties krijg je gemakkelijk visuele pareltjes die je website uniek maken.

Al in het begin van 2019 was een oude trend sterk in opkomst, de gradiënt.  Met een gradiënt wordt in het algemeen een (kleur)verloop in toe- en afname bedoeld. Dat deze trend niet tijdelijk is blijkt wel uit het feit dat grote bekende merken hun strakke logo’s hierop hebben aangepast. Het subtiele effect kan naast het speelse element ook extra de nadruk leggen op het onderwerp. Daarnaast zorgt het verloop ook voor meer diepte in je pagina.

Als je de gradient als ondergrond combineert met de hierboven genoemde .svg illustraties krijg je gemakkelijk visuele pareltjes die je website uniek maken.

Gradient trends die je ziet terugkomen in het webdesign

Trend #5: Zwevende elementen en zachte schaduwen

Een andere manier om meer diepte aan het ontwerp van je website te geven is het gebruik van zwevende elementen. Daarnaast laat je een foto of illustratie meer naar de voorgrond komen en je webdesign krijgt hierdoor dus automatisch meer aandacht. Uiteraard wekt een video op de achtergrond van je website de meeste aandacht, maar helaas zorgt dit nog steeds voor een enorme laadtijd. Dit is tevens een flinke conversie killer.

Persoonlijk vind ik het altijd heel netjes om een dikke rand (border) rond een foto te gebruiken van minimaal tien pixels, waardoor deze foto nog meer aandacht krijgt. Gebruik hierbij een subtiele bocht van tien graden op de hoeken en plaats hier een hele lichte schaduw achter. Op een witte achtergrond krijgt zo’n blok met een witte border (wat normaal gesproken niet zichtbaar is) door de zachte schaduw een zwevend effect.

Uiteraard is bovenstaande ook mogelijk bij het gebruik van titels die net een beetje aandacht nodig hebben. Gebruik de schaduw echter wel heel zacht – en zorg er niet voor dat er een dikke zwarte rand zichtbaar wordt – want hierdoor wordt de leesbaarheid minder.

Zwevende elementen met zachte schaduw creëren diepte

Trend #6: Heavy fonts

Dat een font heel belangrijk kan zijn voor je website heeft mijn collega Nienke al uitgelegd in haar blog. Zoals bij de meeste fonts heb je variaties en hoe je deze kan gebruiken. De meest opvallende manier is uiteraard door het font groter te maken dan de standaard lopende tekst. De H1 (eerste kop van een pagina) op je website is ontzettend belangrijk. Zie dit als de grote titel waar een krant op de voorpagina mee opent. Je wilt niet dat je bezoekers dit over het hoofd zien. Door het font in een ‘bold’ variant te zetten, maar nog liever in ‘heavy’, krijgt het de juiste aandacht.

Niet alleen de H1 heeft deze aandacht nodig. De bezoeker die de eerste keer op je website komt moet meegenomen worden in de route die bepaald is. Uiteindelijk moet je content en de manier waarop dit getoond wordt ervoor zorgen dat er een conversie uit komt. In de zoektocht over je website wordt heel snel gescand wat wel en niet relevant is. Onbewust ziet de bezoeker binnen een seconde een aantal factoren. Hierin kan je de bezoeker helpen door een aantal zaken extra aandacht te geven. Dus gebruik dit ook in sommige tussenkoppen.

Heavy fonts die opvallen omdat ze de aandacht ernaartoe leiden

Trend #7: Asymmetrische ontwerpen

Een andere trend uit het verleden is het bouwen van een design op een grid. Net als bij flatdesign heeft dit als nadeel dat veel elementen dezelfde afmetingen krijgen en netjes in een vast kader opgesomd staan. Mijn verwachting is dat een trend die je al steeds meer in 2020 ziet zich in 2021 verder gaat ontwikkelen, het asymmetrische ontwerp.

Een foto mag bijvoorbeeld best wel groter zijn dan het tekstblok, maar mag er niet voor zorgen dat dit tekstblok weg valt en daardoor niet gelezen wordt.

Er zit echter ook een groot gevaar in deze stijl. Doordat het vaste kader met structuur losgelaten wordt kan er onbalans in de pagina ontstaan. Hierdoor kan het zijn dat sommige elementen meer aandacht krijgen dan de elementen die dat zouden moeten krijgen. Een foto mag bijvoorbeeld best wel groter zijn dan het tekstblok, maar mag er niet voor zorgen dat dit tekstblok weg valt en daardoor niet gelezen wordt. Het vinden van de juiste balans hierin is voor veel designers nog een uitdaging. Slaag je eenmaal in het vinden hiervan dan creëer je een unieke pagina die zich onderscheid van de concurrentie.

Asymmeterisch webdesign bouwen op een grid

Trend #8: Transparante menubalk met blur

Een creatieve manier om je website een chique uitstraling te geven is de transparante menubalk met blur effect. Naast de asymmetrische ontwerpen zie je ook steeds meer designers die het wow-effect willen creëren. De sfeer die je website uitstraalt bij het bezoeken bepaalt voor een heel groot gedeelte jouw gevoel. Een video is leuk, maar zoals eerder gezegd niet handig. Een alternatief is dan het gebruik van een sfeerbepalende foto. En die worden steeds groter.

Het is echter wel belangrijk dat je content boven de vouw hebt staan. Boven de vouw betekent alle content die een bezoeker ziet zonder naar beneden te scrollen. Het is niet alleen belangrijk voor de user experience van de bezoeker, maar heeft ook een positief effect op de zoekmachine optimalisatie en conversie. Steeds meer designers worden hier creatiever in, maar je wilt de uitstraling ook graag terug laten komen in je menubalk.

Door de menubalk transparant te maken kijk je er natuurlijk doorheen, waardoor je de sfeer kan vasthouden. Bij het scrollen moet je echter wel je menu items, telefoonnummer en meer informatie kunnen blijven zien. Waar eerst bij het scrollen de menubalk opeens een kleur kreeg, daar zie je steeds meer het blur effect. Je behoudt hierdoor de stijl die je bepaald hebt en de informatie blijft goed zichtbaar.

Op het voorbeeld hieronder wordt duidelijk hoe subtiel de menubalk verwerkt kan worden in het design, maar ook hoe de achtergrond steeds een blur effect krijgt tijdens het scrollen. In de cirkel links is het effect duidelijk zichtbaar, waarbij de menu items goed zichtbaar blijven.

Transparante menubalk met blur effect

Benieuwd na het lezen van dit artikel of jouw website gebruikersvriendelijk is, voldoet aan de laatste trends en/of je genoeg conversie krijgt? Vraag dan onze Quickscan aan en we denken graag met je mee.

Reacties op deze blog

Nog geen reacties.

Schrijf een reactie

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Hoe kan jouw bedrijf groeien met online marketing?

Ben jij benieuwd wat je nog kunt inzetten aan online marketing of wil je weten of jij wel alles eruit haalt wat erin zit? Met de Gratis Quickscan kijken wij naar jouw huidige inzet aan online marketing. Met de Quickscan geven wij aanbevelingen welke kansen en verbeterpunten er voor jouw bedrijf te benutten zijn. Gratis én vrijblijvend! Je zit nooit ergens aan vast. Ontdek het zelf!

Het start met onze gratis Quickscan!

Digitale marketing start met onze gratis Quickscan!

Klanten beoordelen Team Nijhuis met een 9/10 (69 beoordelingen ) Feedback Company

Michelle

Kan ik je helpen?

Quickscan aanvragen