Blogs

Webdesign trends van 2019

22 okt 2019 7 min. leestijd Daniel Pattiasina

De technieken groeien hard en design is net zoals de mode constant in beweging.  In mijn blog van vorig jaar heb je kunnen lezen dat er veel trends zijn die ervoor zorgen dat de bezoeker nét even wat anders krijgt voorgeschoteld dan de standaard websites. Soms subtiel, maar soms ook over de top. Om op te vallen wordt alles uit de kast getrokken. We zijn een jaar verder en in deze blog neem ik opnieuw een kijkje naar de meest recente trends en ontwikkelingen op het gebied van webdesign. Laten we kijken wat we tegenkomen.

1. De alternatieve cursor

De standaard systeemcursor is voor de crème de la crème te standaard. Het valt meteen op: je cursor is overgenomen door een subtiel elementje. We zien kleine bolletjes, cirkeltjes, kruisjes en soms nog veel gekker. Ook wordt er gespeeld met mouse-over effecten, subtiele animaties en transities tussen de verschillende custom cursors. Het aanpassen van de standaard systeemcursor lijkt een kleine aanpassing, maar het heeft een grote impact op de beleving van de gebruiker. We zien ook dat er andere standaard systeemelementen worden aangepast, zoals bijvoorbeeld scrollbalken.

Op Design Embraced wordt de cursor ingezet als een soort vergrootglas die objecten op abstracte wijze vervormt.

De cursor laat extra navigatiepijlen zien op Uroi om aan te geven dat er geswiped kan worden bij een carrousel.

2. Illustraties die een verhaal vertellen

Storytelling wordt steeds belangrijker, dit zagen we vorig jaar ook steeds vaker terugkomen. Bezoekers lezen niet, maar scannen de pagina. Het eerste beeld moet direct een goede indruk geven als je met je website jouw verhaal goed over wil kunnen brengen. Goede fotografie is hierin erg effectief, maar een trend die ik dit jaar steeds vaker zie zijn illustraties. De illustraties zijn soms zelfs geanimeerd om nóg meer diepte te geven aan het verhaal. Illustraties zijn ook vaak het begin van een bepaald soort stijl of vibe die als rode draad door een website wordt gebruikt. Het kan versterkend werken en het is ook prettig of interessant om naar te kijken.

Op de website van PaymentX worden alle illustraties in dezelfde stijl weergegeven, waardoor er eenheid wordt gecreëerd.

Op Oxymoron worden illustraties weergegeven voor een speelse uitstraling.

Make UI is een UI-kit die je kunt downloaden. Op de website worden de elementen zo geshowcased dat je direct ziet wat je krijgt.

3. Beleving, beleving, beleving

Een website is zoveel meer dan een interface waar je doorheen scrollt en klikt. De interactie tussen de gebruiker en zijn scherm moet een echte beleving zijn. De interacties moeten duidelijk zijn, maar ook simpel, gebruiksvriendelijk en logisch. Wanneer keuzes voor de bezoeker helder worden gepresenteerd en de bezoeker niet of nauwelijks hoeft na te denken over hoe hij door een website kan of moet navigeren, voelt de beleving als natuurlijk aan. Er zijn veel zaken die bijdragen aan een goede user experience. Subtiele animaties en overgangen, vereenvoudigde keuzes en filteringen, heldere en beknopte teksten en een overzichtelijke menustructuur en navigatie. Als de website logisch en natuurlijk aanvoelt, zal de gebruiker niet zomaar afhaken.

In de portfolio van Thijs Pausma navigeer je op een prettige manier door de projecten.

Een combinatie van design, interactie en fotografie maakt het bezoek aan de website van Real Happiness een ware beleving.

4. Intense kleuren en groot contrast

Grote witte titels op een donkere achtergrond en zwarte teksten op een witte achtergrond worden over het algemeen het meest prettig ervaren om te lezen. Toch zien we dat sommige websites ervoor kiezen om niet voor de hand liggende kleurencombinaties te gebruiken. Extreem felle of fluoriserende kleuren, maar ook kleuren die juist níet met elkaar matchen. Een epileptische aanval krijg je er nog net niet van, maar één ding is zeker: het valt wél op! En dat is precies ook het doel van deze brutale niet-allerdaagse keuze. Deze websites blijven in het geheugen van de gebruiker, of in dit geval op het netvlies :).

De nieuwe collectie van FILA laat de felgekleurde producten zien in combinatie met felgekleurde fotografie.

10 jaar Whoa Mama wordt gepresenteerd op deze kleurrijke website met abstracte visuals.

5. Abstract

Het toepassen van abstracte kunst, visuals of fotografie kan heel goed gebruikt worden om een bepaalde boodschap of gevoel over te brengen. Door abstracte elementen toe te voegen kan een website eruit springen en zich onderscheiden van de rest.

Op Qode Interactive is de presentatie alles behalve standaard.

Het TedX Mestre event gebruikt abstracte kleuren en visuals.

De abstracte illustraties op Greg Hirshland worden als ondersteuning gebruikt.

6. Splitscreen

We vinden het als gebruiker prettig om naar websites met een duidelijk stramien te kijken. Vorig jaar zagen we een trend opkomen waarin dit stramien wordt doorbroken door elementen speels in de vrije ruimte te laten zweven. Dit jaar zien we echter steeds vaker een splitscreen als toepassing. Het scherm wordt door de helft geknipt en de content wordt afzonderlijk van elkaar gepresenteerd.

Op Solar Digital wordt er geopend met een splitscreen.

Design en techniek worden gepresenteerd als twee werelden op de website van Engine Themes.

De nieuwe Zeeman Sneaker heeft twee uitvoeringen die middels een splitscreen worden gepresenteerd.

7. Creatief met typografie

Typografie is enorm belangrijk voor een goed webdesign. Ik heb het al eerder genoemd, de bezoeker leest niet, maar scant de pagina. Content is belangrijk, maar hoe kunnen we ervoor zorgen dat bezoekers de boodschap die we als websitemakers willen vertellen ook écht binnenkrijgen? Door korte en krachtige quotes, koppen en pay-offs te gebruiken, kunnen we de bezoeker lokken en informeren. En dit wordt tegenwoordig op allerlei manieren toegepast. Ook in typografie zien we abstracte kunst terugkomen, distortion of juist tekst in een curve. Een veel toegepaste trend die we in typografie steeds vaker zien zijn de zogenaamde outlines van de letters.

Het event van Digital Conference presenteert alle content met grote, bewegende typografie op gebogen lijnen.

De website van het Food Festival New York laat op speelse wijze alle letters animeren.

8. Geluid en achtergrondmuziek

Ik heb al benoemd dat beleving een belangrijke rol heeft in de presentatie van een website. Vroeger was het not done om een achtergrondmuziekje af te laten spelen, maar dit krijgt langzamerhand een comeback. Uiteraard wordt er meestal beleefd om toestemming gevraagd om muziek te laten klinken, zodat een bezoeker niet zijn oren brandt wanneer hij zijn boxjes op maximaal volume heeft staan. Doordat video erg sterk kan zijn in het vertellen van een verhaal, zien we dat dit steeds meer gebruikt wordt. En bij een mooie video hoort natuurlijk een goede sound. Geluid voegt die extra dimensie toe aan de beleving van de website.

In deze reis door de tijd van Warsaw Rising geeft muziek een extra dimensie aan de beleving.

A0 Design speelt met muziek in hun online presentatie.

9. No home

Je kent het wel, die standaard menu-indeling: Home, Over ons, Ons werk, Contact. Maar de gemiddelde gebruiker is écht niet zo dom als we soms denken. We verwachten dat websites responsive én geoptimaliseerd zijn voor mobiel gebruik. De drie streepjes in de bovenhoek van je scherm is het hamburgermenu. Als je op het logo klikt, ga je terug naar de homepagina. Home in het menu zien we daarom steeds vaker verdwijnen. We get it ;)!

Home wordt niet in het menu getoond in de website van We are Tane.

10. 3D-producten en objecten

Tot slot kom ik deze trend ook steeds vaker tegen: 3D. Niet alleen in productdesign van bijvoorbeeld een schoen of de nieuwe iPhone, maar ook als bewegende visual komt je scherm tot leven door het gebruik van 3D-objecten. Het geeft letterlijk een extra dimensie aan de beleving.

De 3D-illustraties ondersteunen het gevoel van de boodschap die wordt verteld op de website van eDesign.

De nieuwe iPhone 11 pro wordt vanuit alle hoeken getoond om een goed beeld van het product te geven.

Conclusie

Beleving is waar het om draait. We blijven unieke dingen bedenken en presenteren om op te vallen en onderscheidend te blijven voor onze eindgebruikers. Onze  toepassingen zijn goed doordacht en dragen bij aan een prettige user experience. Ben jij benieuwd of jullie website de juiste beleving heeft en een goede boodschap overbrengt? Neem eens contact op met ons!

Meer weten? Neem contact op met de auteur:

Daniel Pattiasina - UX/UI-Designer

0548 612 805 - daniel@moddit.nl

Lees ook deze blogs

Gerelateerde blogs

Samen het verschil maken?

Uw browser is niet meer van deze tijd!

Update uw browser om optimaal van deze website (en vele anderen) te genieten Nu updaten!

×