Welkom op mijn blog:

Webdesign trends 2020




Blijf altijd up-to-date

Up-to-date blijven op webdesigngebied is cruciaal voor het succes van een website en webshop. In twaalf maanden verandert er veel op dit gebied. Daarom wordt er kort gekeken welke trends er in 2019 waren, op welke we voortborduren en welke nieuwe trends er zijn in 2020.



Laadsnelheid website

Het jaar 2019 - Laadsnelheid

De mens houdt niet van wachten, 50% van de gebruikers die klikt op een zoekresultaat van Google verwacht dat een website binnen 2 seconden geladen is. Als dit langer duurt dan drie seconden dan wordt de website door de gebruiker verlaten. Dit is belangrijk om te weten omdat de grotere zoekmachines al langere tijd rekening houden met de laadsnelheid van pagina’s en hun algoritme voor het rangschikken van websites. Google heeft in juli 2018 een grote update uitgerold, de Page Speed Update. Deze update zorgt ervoor dat mobiele websites voorrang hebben op de desktop versies en worden gecontroleerd en laadsnelheid en gebruikerservaring.

Voor de gebruikers is het van belang dat zei weten hoelang zij moeten wachten op een handeling die zij uitvoeren. Bijvoorbeeld bij het uploaden van een document. Niet dat hierdoor het uploaden sneller gaat maar je geeft de gebruiker een tijdsindicatie en feedback vanuit het systeem mee.




Chatbots op een webshop

Chatbots

De laatste jaren komt interactie met bots steeds meer in opkomst. Een simpel voorbeeld is een chat op een website. In de beginjaren waren ze vrij statisch maar met de komst van Artificial Intelligence (AI) is hier verbetering ingekomen. Een voorbeeld van AI is de hulp die je van Google krijgt bij het typen van een zoekterm, je krijgt hierbij autosuggesties.

In de toekomst wordt AI alleen nog maar meer. Zo kunnen we nu al een automatisch respons creëren in een chatconversatie zonder dat de gebruiker weet dat het een computer is die dit verzorgt.

De toekomst

Stel je een website voor die van te voren weet wat de klant zoekt door simpelweg hun eerdere interacties met het bedrijf te analyseren. Dan zou je de gebruiker eerder op zijn eindbestemming kunnen brengen o de website of webshop.




SSL-certificaten voor je webshop en website

SSL-Certificaten

SSL-Certificaten zijn niet echt een trend maar meer een beveiligingsmaatregel voor websites. SSL staat voor Secure Sockets Layer en is op de webserver geinstalleerd. Het heeft twee doelen: het authenticeren van de identiteit van de websites (wat gebruikers garandeerd niet op een net-site terecht te komen) en codeert de gegevens die worden verzonden. Dit zorgt als ware voor een privegesprek tussen uw website en gebruiker.




Gradients in webdesign

Gradients

In 2019 hebben we gezien dat de gradients terug zijn binnen het webdesign. In 2020 wordt deze trend doorgezet maar dan als dynamic gradients. Dit houdt in dat een gehele achtergrond een gradient kan zijn met daarin verschillende vormen. De diepte die we missen in het flat design wordt langzaam omgezet naar meer diepte op een flat design manier.



Webdesign trends in 2020

De trends van 2020 zijn onder te verdelen in twee duidelijke categorieën, namelijk ecommerce design en responsive design.

Ecommerce Design
Ecommerce design houdt in dat we de shopper precies geven waar ze om vragen qua UI en UX Design. In dit geval gaat het om usability, snelheid en gemakkelijkheid. Hoe sneller en gemakkelijker het is om te krijgen wat je wilt, hoe beter.

Responsive Design
We zijn in de tijd beland dat de mobiel vaker wordt gepakt om even iets op internet op te zoeken dan de vaste computer. Wereldwijd is mobielverkeer verantwoordelijk voor ongeveer 52% van al het webverkeer. Daarom is het qua webdesign belangrijk om naar de kern van de boodschap te kijken die we willen overbrengen aan de gebruiker. Welke informatie is noodzakelijk en welke is daar ondergeschikt aan.

Hieronder volgen de belangrijkste trends voor 2020:



Bold fonts en opvallende kleuren

Bold fonts en opvallende kleuren

Nu er super veel websites online staan moet er een manier bedacht worden om op te vallen. In 2020 doen we dit door te kiezen voor bold-fonts en opvallende kleuren. De diepe kleuren die gekozen worden zijn niet alleen immersive maar houden tevens de aandacht vast van de gebruiker. De meeste webontwerpen zijn standaard met veilige kleuren en schaduwen. Dit jaar gaan we voor vooruitstrevend, gedurfd en persoonlijk. Tevens komt de kleurenpsychologie helemaal terug aangezien kleuren invloed hebben om het menselijke bedrag. Hoewel de manier waarom we kleuren interpreteren veel te maken heeft met onze eigen perceptie, zijn er enkele algemene gevoelens die verband houden met kleuren. Groen geeft bijvoorbeeld de natuur weer, terwijl rood symbool staat voor energie en passie.

Loud and proud typography is in 2020 helemaal in. Het is een opvallende manier om jouw boodschap over te brengen. Het gebruik van unieke fontsen zijn erg populair binnen het webdesign het wordt gebruikt om de aandacht van de gebruiker te trekken. Grote bedrijven laten zelfs hun eigen lettertype ontwerpen. In 2020 maken we veel gebruik van sans serif fonts en dramatische typografie. Tegenwoordig is de fontsize extreem groot en zit er veel ruimte in de verticale ruimte (regelafstand). De letters die helemaal zijn gemaakt voor in-your-face. Voorbeelden zijn: Gilroy, Circular, Proxima Nova, GT Walsheim. De kopregels blijven groot, de sub-koppen iets kleiner en de body tekst kleiner dan de sub-koppen.

De gebruiker besteed steeds minder tijd om te lezen. Door grote typografische elementen te gebruiken komt de boodschap sneller binnen. Dit in combinatie met korte teksten. Een fijne bijkomstigheid is dat sans serif fonts voor een betere leesbaarheid zorgt op het scherm. Wat de leesbaarheid vergroot in menu’s, buttons en op de mobiel. Tevens neemt het minder waardevolle ruimte in beslag.




Mouse-over binnen webdesign

Bold fonts en opvallende kleuren

Een twist geven aan je website kan met behulp van mouse-over effecten. Niet alleen door een button van een kleur te laten veranderen. Maar dit zou je ook kunnen toepassen door een gehele tegel een andere kleur te kunnen geven.


Video en animatie

Zoals ook in 2019 de video een comeback heeft gemaakt doen we in 2020 er nog een schepje bovenop. Video’s zijn aantrekkelijk en het meest effectieve online marketingtool. Maar bij het maken van een video moet gedacht worden aan de boodschap die overgebracht dient te worden. Een goed doordachte video van hoge kwaliteit is beter dan tien video’s met geen boodschap.

Een nadeel van een video is dat ze een lange laadtijd hebben waardoor dit finest is voor websites. In 2020 gaan we daarom ook aan de slag met animaties. Deze kunnen verwerkt worden in mouse-overs en bijvoorbeeld de hero van een website. De animaties geven een persoonlijkheid aan de website.

Een voorbeeld waar animaties worden toegepast is http://dada-data.net/en/hub. Hier is te zien dat bij het laden van de pagina animaties worden getoond die de website een persoonlijk tintje meegeven.


Micro interacties

Micro-animatie is een krachtige manier om de gebruiker een intuïtieve en prettige gebruikerservaring te bieden tijdens het navigeren door de website. Dit wordt gedaan door kleine subtiele animaties dat de gebruiker helpt de website te begrijpen. Deze animaties helpt de gebruiker om de juiste acties uit te voeren op de website. Bijvoorbeeld als een menu openklapt wanneer er op het hamburgermenu wordt geklikt. De animaties kunnen bestaan uit achtergrondvideo’s, motion graphics, scroll-effecten en micro-interacties. Deze interacties worden zowel voor desktop als mobile gebruikt. Door de animaties wordt de user experience van de gebruiker vergroot en voelt hij zich meer betrokken.

Voorbeelden:
https://lecafenoirstudio.com/product/thefairy/ (product toevoegen aan winkelmandje)
https://material.io/design/motion/understanding-motion.html#usage
https://dribbble.com/shots/4846056-Login-flow-interactions (log-in veld)

Tegenwoordig zie je steeds vaker scroll-triggered animation. De informatie van de webpagina wordt pas opgehaald als de gebruiker hieraan toe is en wordt geladen door een simpele animatie waardoor de aandacht naar de nieuwe content wordt getrokken. In 2020 zien we dat micro-interacties steeds meer worden toegepast binnen de ecommerce. Deze wordt namelijk gebruikt om de gebruikerservaring te verbeteren en klanten een voorproefje te geven van hun product. Een voorbeeld is kleding. Door mini video te maken van een model met de kleding aan krijgt de klant een beter inzicht in hoe de kleding valt. Hierdoor kun je sneller de klant overtuigen van het kledingstuk en wordt het sneller verkocht.




SVG binnen webdesign

AVG animatie

In 2019 zijn de SVG’s in opkomst gekomen. Deze illustraties worden nu als SVG’s geïmplementeerd binnen websites en niet meer als jpg of png. Het voordeel van SVG’s is dat de afbeelding altijd scherp blijft in welke mate je hem ook vergroot.

In 2020 wordt de volgende stap gezet, namelijk het animeren van deze SVG’s. Zo kunnen ze dienen als micro-interacties.




Organische vormen binnen webdesign

Asymmetrische opmaak en organische vormen

Dit is creatief omgaan met de ruimte binnen een website. Deze trend komt uit 2019 en zet zich voort in 2020. De meeste websites zijn op een grid gebaseerd. Asymmetrische opmaak zorgt voor een gebroken grid en is aantrekkelijk vanwege uniekheid. Deze trend zou een nadeel kunnen zijn voor grote websites, omdat er meer ruimte nodig is om content op een juiste manier te tonen.

Organische vormen zijn alle vormen waarbij geen rechte lijnen betrokken zijn. Denk aan de vormen die in de natuur voorkomen, zoals heuvels of randen van een meer of revier die kronkelig zijn. Binnen het webdesign is deze trend toe te passen voor een website in delen te splitsen zonder harde lijnen of hoeken. Tevens zou het gebruikt kunnen worden voor achtergronden zoals hiernaast weergegeven:




Minimalistisch design binnen webdesign

Minimalistisch design

Het less is more principe. Duidelijke content neerzetten zonder poespas. De inhoud zo duidelijk neer zetten dat de bezoeker gelijk weet wat er op de webpagina te vinden is.

Clean en minimalistisch design worden gekenmerkt door het snel laden van de webpagina wat in 2019 en ook 2020 zeer belangrijk is. Zo kunnen zowel mobiele als desktop versies snel laden. Hierdoor kan het material- en flatdesign een bijdrage zijn aan een hogere SEO-waarde. Hierdoor blijft het designprincipe populair en trendy in 2019.

Material- en flatdesign wil niet zeggen dat alles wordt teruggebracht naar twee dimensies. Het gaat juist om het minimalistische design en gebruiksvriendelijkheid. Dit in combinatie met heldere kleuren, zuivere en scherpe randen en veel open ruimte. Het designprincipe is verfrissend doordat het niet afleidt van andere zaken. In 2020 wordt deze open ruimte niet alleen gevuld met wit maar er wordt juist geëxperimenteerd met kleurrijk minimalisme.




Brutal design binnen webdesign

Brutal Design

Tevens is er een trend die vloekende kleuren met elkaar laat combineren, het zogeheten brutal design. In eerste instantie absurd maar als je beter kijkt naar de mogelijkheden dan is het nog niet eens zo gek. Met het brutal design kun je met een out-of-the box denkwijze op een andere manier bijvoorbeeld CTA toepassen, producten accentueren of headers vormgeven. Uit het brutal design dicteert de kleurkeuze in 2019: roze en turquoie. Deze kleuren kun je gebruiken als Grain Texture. Grain Texture zijn ongelijkvormige vlekjes die een schaduw, halftransparant of gradient maken.


Open composities

Om een website visueel aantrekkelijk te maken neemt de techniek open composities toe. Een open compositie creëert de illusie dat de webpagina buiten het beeldscherm verder gaat.




Mobile first webdesign

Mobile first

Het mobile first principe wat ook al in 2019 een big deal was, wordt nog groter in 2020. Welke elementen zijn echt belangrijk om te tonen en welke minder en laten we op een mobile webpage weg? Dit is het mobile-first principe. Tevens houden we ons in 2020 bezig met thumb-friendly design. Dit is de manier waarom we onze telefoon gebruiken. Als je nu op je telefoon leest, kijk dan hoe je deze vasthoudt. Je vingers zijn waarschijnlijk rond de achterkant van je telefoon gewikkeld, waardoor je duim al het werk doet.

Door rekening te houden met de plaatsing van de navigatiebalk, het menu en zelfs contactbuttons wordt de gebruiksvriendelijkheid vergroot.


Mobile menu

Doordat het mobile first principe steeds belangrijker wordt zien we dit ook terug op de desktop versie van een website. Het volledige menu wordt niet meer getoond maar zit verstopt in het zo geheten hamburgermenu. Deze trend kun je combineren met de felle kleuren om zo het menu nog meer te laten opvallen.


3D design

Alle websites worden tegenwoordig volgens het flat design principe opgebouwd misschien is het daarom ook wel zo dat het 3D design weer terugkomt. Denk hierbij aan schaduwen achter elementen die diepte creëren.


Unieke ontwerpen

Nieuwsgierig naar mijn unieke ontwerpen?
Bekijk ze hiernaast, door te klikken op één van deze vier ontwerpen kom je direct bij de projecten.
Veel plezier!