Adaptive, Storytelling en Material design, waar ga jij in 2016 voor?

Het einde van 2015 komt langzaam in zicht. Zoals elk nieuw jaar, brengt ook 2016 nieuwe kansen, mogelijkheden, trends en hypes met zich mee. Bij Isatis Online Results vinden we het een mooi moment om te kijken naar de webdesign trends voor 2016.

 

Trend 1: Storytelling

Een designstijl die al een tijdje meegaat maar nog niet echt tot bloei is gekomen is het effect van een storytelling website. Zoals de Engelse benaming al zegt, een verhaal vertellende website. Deze stijl is uitermate geschikt voor branding van producten.

 

Hoe werkt dat dan?
Door naar beneden te scrollen ontvouwt zich een verhaal waarin je uitleg geeft over de werking van een product.

Een voorbeeld: Je hebt een top-of-the-line handtas ontwikkeld. Je denkt, BAM, dit wordt een succes! Maar nu wil je laten zien wat je er allemaal mee kan. Met een filmpje op je site trigger je de bezoeker niet echt. Deze ziet een speelduur van 4 minuten staan en denkt, duuuurt lang! Maar door een storytelling website te ontwikkelen, trigger je de bezoeker om naar beneden te scrollen…het wordt een beleving. Bijkomend voordeel is dat de bezoeker zelf kan bepalen hoe snel hij door de uitleg gaat.

 

Trend 2: Responsive wordt Adaptive

Adaptive zegt u! En jij dacht dat je helemaal hot was met je responsive website, nou bijna…Responsive is er al een tijdje maar in 2016 ga je helemaal over naar adaptive.

Het grootste verschil tussen responsive en adaptive design is dat bij responsive design de bestaande informatie wordt geherschikt. Adaptive design kijkt eerst welk apparaat er gebruikt wordt om vervolgens de informatie te tonen die speciaal voor dit apparaat geschikt is.

 

Hoe adaptive in te zetten?
Een voorbeeld. Fleur heeft een nieuwe handtas nodig. ’s Ochtend zit ze in de trein op weg naar haar werk, deze tijd gebruikt ze om online te oriënteren voor een nieuwe tas. Haar tijd is beperkt dus ze wilt snel door de diverse modellen heen scrollen.

Ze komt op site X, deze winkel heeft voor mobiel een adaptive design ontwikkeld. Dit design is volledig gericht op het snel vergaren van informatie. Fleur kan op deze manier snel een keuze maken en wanneer ze uitstapt is ze klaar met oriënteren en weet ze welke tas ze wilt kopen. ’s Avonds als ze weer thuis is klapt ze haar laptop open en gaat weer naar site X om de tas te bestellen. Hier ziet ze het ‘normale’ design waar ze uitgebreidere informatie kan vinden en op haar gemak haar tas kan bestellen. Dus ze heeft zich op de mobiel georiënteerd, en via de desktop heeft ze haar tas besteld.

De tijd die mensen doorbrengen op een website op hun mobiele telefoon is vaak korter dan op een pc. Ook het tijdstip en de functie verschillen. Mobiel heeft vaak een oriënterende functie terwijl de echte aankopen pas op een rustiger tijdstip op een pc worden gedaan.

Responsive versus Adaptive:

 

Trend 3: Achtergrondvideo’s en Cinemagraph

Breng beleving in je site en maak gebruik van video’s of cinemagraph. Maar, gebruik het subtiel. Bijvoorbeeld in de header als achtergrondvideo ter ondersteuning van de content.

Een alternatief effect voor video is cinemagraph, hierbij zie je een ‘stilstaande’ afbeelding waar heel subtiel één element uit de foto beweegt. Voordeel hiervan is dat dit minder zwaar is om in te laden dan een video en het is specialer dan een ‘gewone’ video.

AirBnB maakt subtiel gebruik van achtergondvideo’s in de header: https://www.airbnb.nl.

Een mooi voorbeeld van cinemagraph zie je hieronder:

Voorbeeld van cinemagraph

 

Trend 4: Evolutie van Flat design

Een aantal jaren geleden is flat design geïntroduceerd. Ook in 2016 zal flat design gebruikt worden, maar niet meer in de vorm zoals in de beginperiode. De trend zal meer neigen naar material design.

Bij de overgang van skeuomorphism design (realistisch design) naar flat design werd het design tot het minimalistische teruggebracht. Designers hoefde zich nu niet meer druk te maken of het design er wel realistisch genoeg uitzag, door middel van flat design konden ze zich meer gaan focussen op de functionaliteit, waarbij diepte en drop shadows tot het verleden behoorden.

Na een periode van, in de ogen van veel mensen, te ‘flat’ design gaan we nu over naar material design. Material design kan je eigenlijk zien als de perfecte combinatie tussen flat design en skeuomorphism omdat bij material design weer subtiel wordt gewerkt met schaduw en dieptes zonder realisme hierin te verwerken.

Het verschil tussen skeuomorphism en flat design zie je in het voorbeeld hieronder:

 

Voorbeeld material design:

Voorbeeld van material design

 

Is jouw webdesign 2016 proof?

Of kan deze wel een upgrade gebruiken? Kom met ons sparren! Wij denken graag met je mee en zorgen dat jouw website ook in 2016 een frisse en eigentijdse uitstraling heeft.


Neem gerust contact met ons op!