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 die designtrends blijvers of eendagsvliegen? Ik loods je doorheen mijn lijstje met interessante tips & tricks. De do’s & don’ts en voor- & nadelen van elke trend krijg je er gratis bij!
#1 Glass Morphism
In het geval van Glass Morphism kunnen we spreken van een 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 happening.
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 dat nogal vaag? Klik dan hier om het Glass Morphism effect te simuleren!
Do’s and don’ts
Follow your intuition
Je interface ziet er in één oogopslag modern uit. Het 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 het 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.
Here to stay!
Glas-geïnspireerde elementen kom je niet alleen tegen in digitale producten, maar ook in branding en illustraties. Glass Morphism wordt echter voornamelijk gebruikt in fictieve designs op Pinterest en Behance. Een hedendaags voorbeeld in UI Design is de productwebsite van Decimal Wallet, een app voor digitale coins.
Deze stijl wordt vaak gecombineerd met trend #2 3D-illustraties.
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.
#2 3D-illustraties
Illustraties met een opvallende accentkleur op een witte of lichtgrijze achtergrond. Dit type webdesign is 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 wanneer het lukt, is het een échte meerwaarde voor je website!
Do’s & don’ts
Realistic feel
3D-objecten maken een digitaal product tastbaarder. 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 op de laadtijd van je website. Hoe complexer, hoe hoger de belasting voor je website. In een tijd waarin alles snel beschikbaar moet zijn, is dat een echte showstopper… 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 algauw op door de tijd en het werk die erin kruipen om kwalitatieve 3D op te leveren.
Niet vergeten: user experience above all!
Here to stay!
Ben je helemaal overtuigd dat deze stijl past bij jouw project? Probeer dan je 3D-illustratie te combineren met subtiele animaties, voor nog meer wauw-effect! Ook de combinatie van 2D en 3D is erg interessant. De mogelijkheden zijn eindeloos.
#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 dat zich ook in een meer en meer persoonlijke User Interface.
In de praktijk
- Zalando. Op basis van je reeds aangekochte items en gelikete items krijg je op de startpagina suggesties die bij jouw smaak passen.
- Netflix. Je zet Netflix op en op basis van jouw kijkgedrag krijg je suggesties die zouden moeten aanleunen bij jouw voorkeuren. Zo vermijd je een hele zoektocht naar iets nieuws en ben je in een mum van tijd aan het kijken. Elke Netflix startpagina ziet er anders uit.
- Spotify. Spotify geeft suggesties op basis van je luistergedrag en zorgt elk eindejaar voor een persoonlijk overzicht “Spotify Wrapped Up”, fijn om even terug te blikken.
Fun- & flipside
Funside
Iets wat sterk bij personalisatie aanleunt, is de trend van de dark-mode setting. Gebruikers verwachten over de mogelijkheid te beschikken om een app in dark-mode te bekijken. Niet alleen blijkt dat batterijbesparend te werken op bepaalde toestellen, het haakt ook in op de wens van de gebruikers. Mensen gebruiken hun smartphone vaak ’s avonds, en voor velen is dark mode dan ook ontspannender en rustgevender dan het gebruik van lichtere thema’s. Idealiter biedt men ze allebei aan. Gebruikers kunnen zélf kiezen. Dat is natuurlijk enkel nodig op apps waar de gebruiker veel scrollt, zoals nieuwsapps, social media of webshops.
Flipside
Aan personalisatie hangt uiteraard een risico. Het prijskaartje om het goed te doen is hoog. Als jouw personalisatie niet volledig of voldoende werkt, loop 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 bij je passen.
Let ook op dat je niet te opdringerig bent. Mensen willen suggesties krijgen, maar als iets te hard “door uw strot” wordt geramd, haken mensen ook af.
Here to stay!
De lijn van personalisatie wordt verder gezet en de globale personalisatie-softwaresector groeit aan een razendsnel tempo. 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.
Als gebruiker kunnen we dat alleen maar toejuichen. Meer 1-1 ervaringen en image recognition, waarom ook niet?
#4 Alles remote
Gelukkig liggen termen als ‘blijf in uw kot’ en ‘lockdown’ (hopelijk) voorgoed achter ons. Bedrijven hebben echter geleerd creatief te zijn en doen nu een heleboel zaken virtueel.
Zo kan je virtueel terecht op infodagen, en worden heel wat zaken digitaal afgehandeld. Een mooi voorbeeld: Thomas More organiseerde als het ware een virtuele versie van de school waar je als (toekomstig) student kon ‘rondlopen’ en deelnemen aan fora en chats.
Tweejaarsvlieg?
Alles remote, daar doen we niet aan mee. Flexibiliteit daarentegen, op alle vlakken, moedigen we graag aan. Het is dan wel de minst ‘designmatige’ onder de designtrends, maar toch het vermelden waard. De creativiteit die remote work deed en doet opflakkeren is gigantisch.
#5 Onverwachte scrollpatronen
Wanneer je een bepaalde website of app bezoekt, begin je als bezoeker al snel te scrollen. En soms zorgt dat plots voor verrassingen. 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.
Do’s & don’ts
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 of animaties die worden uitgevoerd door te scrollen, zoom on scrolls … . De gebruiker verkent je website op een creatieve en bijzondere manier, waardoor hij interesse krijgt 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 ver gaat. Essentiële informatie en zaken die voor de gebruiker snel toegankelijk moeten zijn, stop je liever niet in complexe en onverwachte scrolls. Dat zal leiden tot frustratie en de gebruiker zal afhaken. Als de gebruiker verkennend aan het scrollen is, kan het een goed idee zijn. Denk aan portfolio’s of websites met promotionele doeleinden.
Als webdesigner en -developer is het fantastisch, maar als je je verplaatst in de gebruiker, is het vervelend als de scroll niet overeenstemt met je verwachtingen. Het kán cool zijn, maar doseer. 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. Op die manier verklein je het schrik-effect.
Scroll-effecten zoals deze zijn dan weer erg geslaagd. Ze geven een extra touch aan het design, maar wel volledig in lijn met de scroll-verwachting. Je wordt gewoon een tikkeltje extra verrast.
Eendagsvlieg
Onverwachte scrollpatronen zijn nooit helemaal doorgebroken. Ze worden als vervelend ervaren door de gebruiker en getuigen van een ongebruiksvriendelijke User Interface. Of er designtrends gebaseerd zijn op deze trend? Zeker weten! Zo is er scrollytelling. In dat geval gebruik je scrollen om een verhaal te tonen en te vertellen. Het verhaal is logisch en bouwt de spanning op. Apple is een meester in scrollytelling, bijvoorbeeld op de productpagina’s.
#6 Back to the good old days
Retro is al lang niet meer retro. Het is een ding. Niet alleen in design, maar overal zien we elementen van vroeger terugkeren.
Retro maar niet easy
Bij retro geldt meer dan ooit: “Als je het doet, doe het dan goed”. Als het niet goed uitgevoerd is, kom je gewoon heel oubollig over, en laat dat nu precies het tegenovergestelde zijn van wat je bedoelt. Doseer dus en zorg voor een gulden middenweg tussen retro en modern.
Here to stay!
Retro is niet tijdloos, maar wel overal. Als je je aanpast aan de retrotrend van het moment, heb je goud in handen. Gooi dus niet je hele huisstijl en website in deze stijl als dit niet specifiek bij jouw merk hoort, maar gebruik het eerder voor een leuk (tijdelijk) project, evenement … .
Designtrends… doen of niet?
Volg (design)trends op de voet, en pas ze toe, maar enkel als ze een meerwaarde kunnen zijn voor jouw merk, website of product.
Elke trend heeft voor- en nadelen en niet alle designtrends kunnen 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 na of het nog wel relevant is binnen een jaar. Want trends zijn trends: some are here to stay, some aren’t.
Wil jij de nieuwste designtrends verwerken in jouw website? Studio Ignite helpt je graag verder bij het vinden van de perfecte match tussen eyecatching design, jouw huisstijl en brand.
