Blog
post

6 designtrends gespot in 2021

Scroll

Auteur

Stephanie Willekens

Gepubliceerd op

28/05/21

Als User Interface Designer wil ik weten wat er leeft in de designwereld. Welke nieuwe technieken worden er toegepast? Welke opvallende designkeuzes zijn ‘talk of the town’? En zijn er bepaalde trends over hun hoogtepunt heen? Ik loods je graag doorheen mijn lijstje van interessante tips & tricks die ik zeker zelf binnenkort eens wil toepassen in één van mijn volgende projecten. De do’s & don’ts van iedere trend krijg je er gratis bij!

#1 Glass Morphism

In het geval van Glass Morphism kunnen we spreken van een stevige comeback. In 2013 werd deze techniek door Apple geïntroduceerd bij de lancering van iOS 7. De hype rond Glass Morphism ging nadien even liggen, maar vandaag is de ‘frozen glass’ look & feel weer helemaal hip en trendy.

De settings voor Glass Morphism zijn de background blur en transparency. Essentieel is het gebruik van levendige achtergrondkleuren en gradients. Zwevende elementen en dunne outlines rondom de elementen in de achtergrond zorgen voor een clean effect en brengen objecten naar voren. Klinkt dit nogal vaag? Klik dan hier om het Glass Morphism effect te simuleren!

Mikołaj Gałęziowski
DES_TL

Follow your intuition

Je interface ziet er in één oogopslag modern uit. Het effect is boeiend om naar te kijken en het stimuleert gebruikers om tijdens het navigeren hun intuïtie te volgen.

Té blurry

De transparency en de levendige kleuren kunnen nefast zijn voor de leesbaarheid van je tekst. Een goede balans tussen design en duidelijkheid, is dus ontzettend belangrijk! 

Blijf trouw aan je huisstijl

Test het effect ook eens zonder HDR display. Is je website of app onleesbaar? Dan kan je best meer contrast aanbrengen binnen de mogelijkheden van de huisstijl. Er is minstens één levendige contrastkleur nodig om Glass Morphism te doen slagen. Is je huisstijl sober? Dan kies je beter voor een effect waar contrastkleuren geen voorwaarde zijn.

Tussen ons gezegd en gezwegen, ik heb een haat-liefde verhouding met deze trend. Glass Morphism oogt fris, maar het slaat als een tang op een varken wanneer je teveel contrast moet aanbrengen om het effect eruit te halen. Op het eerste zicht lijkt deze techniek een garantie voor Pinterest-proof design, maar in de praktijk past het bij minder huisstijlen dan je denkt. Toch wil ik ‘m graag meteen toepassen wanneer ik een goede fit zie met een project! Want het blijft een eyecatcher als het helemaal matcht in het design!

#2 3D illustraties

Illustraties met een opvallende accentkleur op een witte of lichtgrijze achtergrond. Dit type webdesign is tegenwoordig all over the place. De verschuiving van 2D naar 3D illustraties en visuals, deed deze trend heropflakkeren. Een gewaagde trend waaraan veel risico’s gebonden zijn. Maar wat een vette toevoeging aan je website, wanneer het lukt!

Connor Hansen

Realistic feel

3D objecten maken een digitaal product meer tastbaar. Het verbindt de gebruiker met de echte wereld en het is ook een ideale manier om in te haken op virtual reality & augmented reality experiences. Bovendien straalt een 3D-touch meteen klasse en kwaliteit uit. 

Loading…

Wait… still loading. Een belangrijk kanttekening bij het toepassen van 3D animatie is de impact die het heeft op de laadtijd van je website. Hoe complexer, hoe hoger de belasting voor je website. In een tijd waarin alles snel beschikbaar moet zijn, kan dat wel een showstopper zijn, niet waar? Je wil immers niet dat gebruikers afhaken omdat hun geduld opraakt. Daarnaast is een 3D illustratie of animatie niet in een wip en een flip gemaakt. De kosten lopen gauw op door de tijd en het werk dat erin kruipt om kwalitatieve 3D op te leveren.

Ben je helemaal overtuigd dat deze stijl past bij jouw project? Probeer dan zeker je 3D illustratie te combineren met subtiele animaties, voor nog meer wauw-effect! En niet vergeten: user experience above all! 

Tran Mau Tri Tam
tubik

#3 Personalisatie

Als gebruiker merk je dat er online meer en meer wordt gepersonaliseerd. Je zoekresultaten worden nauwgezet in de gaten gehouden en gebruikt om het je in de toekomst gemakkelijker te maken. Uiteraard vertaalt dit zich ook in een meer en meer persoonlijke User Interface

Neem nu Zalando, een webshop die ik af en toe (lees: zeer regelmatig) gebruik. Op basis van mijn reeds aangekochte items en gelikete items krijg ik op de startpagina suggesties die bij mijn smaak passen. Je krijgt als gebruiker op zoveel verschillende manieren en plaatsen content op basis van jouw voorkeuren en zoekgeschiedenis.

Je zet Netflix op en op basis van jouw voorgaand kijkgedrag krijg je suggesties die zouden moeten aanleunen bij jouw voorkeuren. Hierdoor vermijd je een hele zoektocht naar iets nieuws en ben je in een mum van tijd verslaafd aan die nieuwe serie. Elke Netflix startpagina ziet er anders uit. Bij de ene wordt er bovenaan in de header een thriller uitgelicht, bij de andere komt hier de nieuwste tienerserie te staan.

Spotify maakt suggesties op basis van je luistergedrag en zorgt elk eindejaar voor een persoonlijk overzicht “Spotify Wrapped Up”. Niet alleen is dit voor iedereen fijn om even terug te blikken, ook zorgt Spotify voor een reeks aantrekkelijke visuals die door de gebruiker gemakkelijk gedeeld kunnen worden op zijn of haar socials. Dit wordt elk jaar massaal gedaan. 

Netflix
Spotify

In 2021 wordt deze lijn verder gezet. Interfaces worden persoonlijker en de positie en weergave van bepaalde design-elementen zijn afhankelijk van de gebruiker. De User Interface van een bepaalde website kan er heel anders gaan uitzien afhankelijk van wie je bent en wat je online doet.

Funside

Iets wat sterk bij personalisatie aanleunt, is de trend van de dark-mode setting. Gebruikers verwachten meer en meer om over de mogelijkheid te beschikken om een app in dark-mode te bekijken. Niet alleen blijkt dit batterijbesparend te werken op bepaalde toestellen, ook haakt dit in op de wens van de gebruikers om personalisatie in websites/apps. Mensen zitten ’s avonds vaak op hun smartphone. Voor velen is dark mode dan ook ontspannender en rustgevender voor het ook dan het gebruik van lichtere thema’s. Idealiter biedt men ze allebei aan. Gebruikers kunnen kiezen wat ze verkiezen. Dit is natuurlijk enkel nodig op apps waar de gebruiker zich vaak al scrollend op bevindt, denk aan nieuwsapps, social media of webshops.

Tran Mau Tri Tam

Ik persoonlijk ben su-per-hard fan. Ik ben een actieve 9GAG gebruiker en sinds vorig jaar voorzag deze app ook een dark-mode. Ik merk dat dit véél beter is voor de ogen en dat dit er mede voor zorgt dat ik sneller ga slapen omdat ik al scrollend sneller in een roes geraak dan in light mode.

Flipside

Aan personalisatie hangt uiteraard een risico. Het prijskaartje om dit te goed te doen is hoog. Als jouw personalisatie niet volledig of voldoende werkt, heb je het risico om je gebruikers kwijt te geraken. Niets is namelijk zo vervelend als suggesties krijgen waar je helemaal niet om vraagt of die echt niet passen. Let ook op dat je niet te opdringerig of te pusherig bent. Mensen willen suggesties krijgen, maar als iets te hard “door uw strot” wordt geramd, haken mensen ook af.

#4 Alles remote

Het coronavirus is nu al meer dan een jaar een heel groot deel van ons leven, jammer genoeg. Mensen die kantoorjobs hebben, zoals ikzelf, werken nu al bijna een jaar deels of volledig remote. Dit zorgt voor een heleboel aanpassingen in onze manier van werken. We kunnen elkaar veel minder fysiek zien en worden verplicht om een heleboel zaken virtueel te doen. Bedrijven, instanties, werkgevers gaan hier creatief mee om en dit wordt ook doorgetrokken in 2021.

Zo kon je onlangs virtueel terecht op een infodag van Thomas More. Zij organiseerden als het ware een virtuele versie van hun school en je kon hier als (toekomstig) student in rondlopen en deelnemen aan fora en chats.

Thomas More Hogeschool

Een ander goed voorbeeld is de virtuele kantoor rondleiding van Bewire. Bewire is een ecosysteem voor IT oplossingen en digitale innovatie waarvan Studio Ignite het designluik dekt. De virtuele kantoor rondleiding in het hoofdkantoor van Herentals was reeds voor de crisis mogelijk, maar is nu een extra voordeel. Werknemers zijn nu niet altijd in de mogelijkheid om op kantoor te komen werken. Maar op deze manier, ontdekken ze toch hun toekomstige werkplaats op een virtuele manier en kunnen ze zich een beeld vormen voor wanneer ze effectief de eerste keer fysiek langskomen.

Bewire

Ik vind het fijn om te zien dat bedrijven zoals Bewire creatief aan de slag gaan met het remote-gegeven. We weten ondertussen dat remote geen tijdelijks iets is wat bij Corona hoort, maar in de toekomst zeker belangrijk zal blijven. Het is dan ook belangrijk om hier rekening mee te houden en hier volop op in te zetten.

#5 Onverwachte scrollpatronen

Je ziet het vaak, je komt op een bepaalde website of app en begint als bezoeker al snel te scrollen. We scrollen naar beneden en zien dat een horizontale slider ons meer en meer naar rechts brengt. Of we scrollen naar beneden en zien hoe een foto zich meer en meer vergroot om zo over te gaan naar een volgende hoofdstuk op de site.

Creëer een unieke gebruikersbeleving

Onverwachte scrollpatronen kunnen een interesse opwekken bij de gebruiker en een heel unieke gebruikersbeleving teweeg brengen. Denk aan horizontale scrolls, animaties die worden uitgevoerd door te scrollen, zoom on scrolls … . De gebruiker verkent je website op een creatieve en bijzondere manier, waardoor hij geïnteresseerd geraakt in jouw product. De klant krijgt een positief gevoel bij jouw merk en zal fan worden van jouw merk, producten en website. 

Doseren is key!

Let op dat je niet te “loco” gaat. Essentiële informatie en zaken die voor de gebruiker snel toegankelijk moeten zijn, stop je best niet in complexe en onverwachte scrolls. Dit zal leiden tot frustratie en de gebruiker zal afhaken. Als de gebruiker verkennend aan het scrollen is, kan dit een supergoed idee zijn. Denk aan portfolio’s of websites met promotionele doeleinden.

Als webdesigner en -developer vind ik dit superfancy en ben ik verliefd op de coole voorbeelden die op het internet zijn terug te vinden. Maar als ik mij verplaats in de gebruiker, vind ik het vervelend als de scroll niet overeenstemt met mijn verwachting. Dit kan cool zijn, maar doseer hierin. Een te complex scrollgedrag zorgt voor verwarring en frustratie, de gebruiker zal jouw website snel verlaten en ook geen of weinig informatie meenemen. Zorg ervoor dat je gebruiker toch een indicatie krijgt in welke scroll-richting hij verder gaat. Zo kan je bijvoorbeeld bij een horizontale scroll rechts al een tipje van de sluier lichten zodat je gebruiker al in de juiste richting geteased wordt. Zo verklein je het schrik-effect.

Voorbeeld van horizontale scroll met teaser aan de rechterkant
Francesco Zagami

Scroll-effecten zoals deze vind ik dan weer supercool, omdat dit een extra geeft aan het design maar wel volledig overeenstemt met mijn scroll-verwachting. Ik word gewoon een tikkeltje extra verrast.

#6 Back to the good old days

Retro baande zich vorig jaar al een weg in user interface en dat is dit jaar niet anders. De 80’s zijn volledig terug en dat is te zien in de mode, muziek en televisie-wereld. Thanks Stranger Things! In 2021 grijpen we nog steeds nostalgisch terug naar vroeger, met hippe interfaces tot gevolg.

GifMe
Maxi Malisani

Retro maar niet easy

Hier geldt echter wel meer dan ooit: “Als je het doet, doe het dan goed”. Als dit niet goed uitgevoerd is, kom je gewoon heel oudbollig over, wat nu exact het tegenovergestelde is van wat je bedoelt. Doseer dus en zorg voor een gulden middenweg tussen retro en modern. 

Dit is niet tijdloos. Gooi dus niet je hele huisstijl en website in deze stijl als dit niet specifiek bij jouw merk hoort, maar gebruik dit eerder voor een leuk (tijdelijk) project, evenement … .

Conclusie

Dit zijn in mijn ogen enkele opvallende UI-trends die we dit jaar veel zullen zien. Elke trend heeft zijn voor- en nadelen en kunnen niet integraal worden ingezet op eender wat. Bekijk goed de inhoud van je project of product, weeg af of de trend wel past binnen je huisstijl en ga ook eens na of dit nog wel relevant is binnen een jaar. Want trends zijn dan ook trends: some are here to stay, some aren’t. 

Wil jij de nieuwste trends verwerken in jouw website? Studio Ignite helpt je graag verder bij het vinden van de perfecte match tussen eyecatching design, jouw huisstijl en brand. 

Designdiensten nodig voor jouw organisatie?

Contacteer ons