Trendradar 2015 – Waar komen de webdesign trends vandaan?

Ook 2014 wordt afgesloten met lijstjes vol trends voor 2015. Heel boeiend die overzichten en ze lijken allemaal op elkaar. Zelf vind ik het belangrijk om te begrijpen hoe het komt dat de trends van nu bestaan.

 

Webdesign Trendradar 2015

 

Mijn trendradar geeft een overzicht van de trends van 2015 en laat zien welke drie drijfveren ik zie achter de belangrijkste trends. Hieronder licht ik deze drie segmenten stuk voor stuk toe…

 

Meer en meer verschillende mobiele consumenten en apparaten

Eigenlijk gaat het hier niet om de gebruiker, maar om de apparaten die we met z’n allen in Nederland gebruiken. Voor het eerst zijn er met 8,5 miljoen smartphonebezitters meer mensen die een smartphone bezitten (67%) dan een pc/desktop (65%). Meer dan de helft van de Nederlanders (53%) is in het bezit van een tablet.  Opvallend is dat 20% van de smartphonebezitters aangeeft helemaal niet met het toestel te bellen maar het voornamelijk te gebruiken voor chatten als WhatsApp (67%), mailen (72%) en surfen (78%).
Bron: GfK, 13 dec. 2014

 

Om deze grote gevarieerde groep mensen met al hun verschillende toestellen te kunnen bedienen zijn websites tegenwoordig ‘flexibel’. De vakterm hiervoor is responsive. Het aantal mogelijkheden dat deze toestellen biedt zoals de grootte en scherpte van het scherm evolueren snel, waardoor o.a. de visuele ervaring steeds aantrekkelijker gemaakt kan worden. Denk aan scherpe afbeeldingen, grote koppen, transparantie en diagonale lijnen.

Trends die hierbij horen…

mafioso-responsiveResponsive websites

Websites die werken op elk apparaat: smartphone, tablet en desktop. Elementen in responsive website passen zich aan de beschikbare ruimte op het scherm aan. Ook wordt er van te voren nagedacht over welke functionaliteit per type apparaat geboden wordt. Mensen met een smartphone zijn immers meestal onderweg en mensen met een tablet zitten vaak thuis op de bank. Dit wordt ook wel “lean forward” en “lean back” genoemd: een actieve en een ontspannen houding.

windows-phone-flat-designFlat design

Een minimalistische webdesign stijl met een focus op een simpele vormtaal zonder schaduw, verloopjes en texturen. Denk bijvoorbeeld aan de Windows 8 interface met tegels en iconen.
Door de minimale hoeveelheid elementen draagt deze stijl bij aan het responsive maken van een website. Op kleine schermen is immers minder ruimte voor allerlei onbelangrijke details. Ook maakt deze vormtaal een snelle laadtijd op mobiele apparaten mogelijk. Usability specialisten als Nielsen Norman Group zijn kritisch ten opzichte van deze vorm van design en zeggen: “Why not allow users to easily see what they can do?

pinterest-cardsCard design

Cards (blokken) lenen zich perfect voor het modulair opbouwen van pagina’s zonder dat het rommelig wordt. Denk bijvoorbeeld aan de prikborden van Pinterest. Blokken geven bezoekers de mogelijkheid om een grote hoeveelheid informatie snel te overzien en door te klikken. Cards zijn clean en simpel met ruimte voor veel variatie. Zie bijvoorbeeld deze 15 voorbeelden.

Retina ondersteuning

De resolutie (pixeldichtheid) van schermen neemt steeds meer toe, waardoor je geen afzonderlijke pixels meer ziet. In de vorm van hoge resolutie beelden en vector iconen en illustraties wordt hier door de techneuten effient op ingespeeld om de bezoeker een haarscherpe ervaring te bieden

Creatief met typografie

Leesbaarheid is belangrijk. Niet te klein en een font dat past bij de organisatie. Technisch kun je bijna ieder lettertype gebruiken en ziet de website er een stuk aangenamer uit.

Transparante lagen

Het is heel handig om tekst leesbaar op foto’s te plaatsen. Transparantie zorgt ervoor dat je in een flat design toch gelaagdheid kunt aanbrengen; er blijft bovendien een verband tussen voor- en achtergrond.

neo-labSchuine lijnen

Vroeger was dit veelal taboe of een grote uitdaging. Nu dit technisch mogelijk is zie je dat het steeds meer gebruikt wordt. Het moet natuurlijk wel passen binnen de identiteit van de organisatie. Hier een post met 25 voorbeelden.

 

 

 

segment2 De kracht van een geloofwaardige en efficiënte ervaring

Veel gebruikers van een website willen zo snel mogelijk doen waarvoor ze naar de website komen. Zo snel mogelijk een taak afronden. Hierbij is het belangrijk dat de bezoeker direct snapt wat de site te bieden heeft. Dit kan met een grote afbeelding of met een duidelijk overzicht van de keuzemogelijkheden. Op een gemeentewebsite is dit bijvoorbeeld een nieuw paspoort aanvragen. Daarom stemmen steeds meer organisaties de website af op de behoefte van de consument: niet zoveel mogelijk informatie ontsluiten, maar de gebruiker zo goed mogelijk helpen met het beantwoorden van de vraag die hij of zij heeft. Microinteractions helpen de bezoeker door de behoefte die deze heeft zonder onnodige doorverwijzingen af te handelen.

Door via de website en alle andere kanalen van een bij de organisatie passend verhaal te vertellen komt de boodschap krachtig over. Door gebruik te maken van bewezen sociologische principes wordt de consument overtuigd.

Trends die hierbij horen…

Toptaken

Niet zoveel mogelijk informatie ontsluiten, maar de gebruiker zo goed mogelijk helpen een taak af te ronden. Presenteer de meest gebruikte taken als eerste. Bekend voorbeeld hiervan is de website Tilburg.nl, een digitaal loket waar de inwoners van Tilburg efficient geholpen worden. Bij Estate noemen we dat #AIHNZ.

sitecore-personalisation

Meer persoonlijke ervaring

Met behulp van cookies kunnen websites onthouden wat je eerder gedaan hebt. Op basis van deze kennis kan de site zich aanpassen en een relevantere ervaring aanbieden. Denk bijvoorbeeld aan webshops die laten zien welke producten je eerder bekeken hebt. Marketing suites zoals die van het ‘CMS’ Sitecore voorzien hier ook in en maken het mogelijk om de ervaring zelfs over verschillende kanalen aan te passen op de persoon.

Lange pagina’s

Het groeiend aantal mobiele gebruikers heeft geleid tot een zoektocht naar meer effectieve en gebruikersvriendelijke ervaringen. Scrolling is intuïtiever en gemakkelijker dan klikken.  Je ziet dat pagina’s steeds langer worden om de informatie goed te kunnen structureren en een helder verhaal te kunnen vertellen. Ook hoeft de bezoeker niet steeds te wachten op het laden van pagina’s.

micro-interactionsMicrointeractions

In het verlengde van material design liggen deze kleine interacties rond een bepaalde taak / element binnen een pagina of website. Bijvoorbeeld een popup die je vraagt om je in te schrijven voor een nieuwsbrief of een product toevoegen aan een winkelwagen.

Digitale middelen zijn steeds meer gericht op het aanbieden van een ervaring

Functionaliteit, toegankelijkheid en bruikbaarheid zijn vanzelfsprekend geworden. Het gaat er nu om dat middelen handig en plezierig zijn met een focus op het toevoegen van waarde.

Allerlei sociologische principes zoals de kracht van dichtbij worden gebruikt om digitale kanalen effectiever en overtuigender te maken. Intuïtief leren werkt beter dan rationeel leren. Door bij de belevingswereld van de bezoeker aan te sluiten komt de boodschap beter binnen en blijft deze beter hangen. Lees hierover ook meer in mijn post stop met communiceren.

firestormStorytelling

Om de bezoeker te boeien en te binden zul je elk kanaal moeten afstemmen op de waarden waar je als organisatie voor staat. Het gaat dus niet letterlijk om het vertellen van een verhaal. Alle onderdelen en uitingen tesamen geven vorm aan de identiteit van de organisatie. Visuele elementen zoals video en grote afbeeldingen kunnen hier goed aan bijdragen. Een Nederlands voorbeeld van storytelling is bijvoorbeeld http://5dingen.org. Veelbesproken is de manier waarop de Guardian het verhaal van bosbranden vertelt. Bekijk het Firestorm verhaal.

Echte mensen

Echte mensen maken de boodschap geloofwaardiger, maar houd de lelijkheid binnen de perken. De afbeelding van Firestorm geeft een goed voorbeeld, dat raakt je.

Grote foto’s

Grote foto’s kunnen een mooie aanvulling zijn op het ontwerp en het verhaal dat een website vertelt.

have-a-nice-day-onlineVideo

Video’s stimuleren interactie, worden als authentiek ervaren en zijn ideaal voor mobiele gebruikers. Veertig procent van het YouTube verkeer komt van mobiele apparaten. En YouTube eindigt ook hoog in zoekmachines. Lange teksten op websites worden nauwelijks meer gelezen. De focus ligt steeds meer op beeld in plaats van tekst. Een bedrijfsfilm of motion graphic is de oplossing. Minder tekst, meer beeld. Websites met veel video grijpen veelal direct de aandacht van de bezoeker en krijgen de kans hun boodschap goed over te brengen.

HAVE A NICE DAY geeft via haar website een beeldvullende video impressie van wat ze doen.

 

 

 

segment3Simpel, helder en kant-en-klaar design & development:

De designer wil graag laten zien dat hij weet wat mooi is, maar wat wil de bezoeker eigenlijk? Vlakverdeling en witruimte wordt steeds belangrijker. Simpele en heldere ontwerpen nemen helpen de bezoeker bij het krijgen van overzicht op websites. De betere sites maken optimaal gebruik van typografie en witregels. In dit geval is minder dus meer.

De manier waarop websites ontstaan verandert ook. Responsive frameworks en plug-ins leggen snel een basis voor een nieuwe website. Een stap verder gaan nieuwste de design- en developtools die het werk van professionele designers en developers kunnen overnemen of gemakkelijker maken.

Trends die hierbij horen…

visageEgale kleurvlakken

Door elementen die bij elkaar horen te plaatsen binnen een kleurvlak begrijpt de bezoeker sneller de inhoud van de pagina en kan hij of zij gemakkelijk bepalen wat relevant is.

Witruimte

Als je iets wilt laten opvallen, kun je het groter maken. Maar je kunt ook de ruimte eromheen groter maken. Ontwerpers noemen deze lege ruimte ook wel witruimte. Zeker op kleine, mobiele schermpjes wordt een ontwerp al snel volgepropt en is het gebruik van voldoende witruimte aan te raden.

Spookknoppen

Doorzichtige knoppen die aleen bestaan uit een omlijning en opschrift. Erg geliefd door designers omdat ze een design niet ‘verzieken’. Zelf twijfel ik wel over de effectiviteit (CTR) van de spookknop.

Material design

Deze door Google geïntroduceerde design stijl lijkt erg op flat design, maar voegt subtiele verloopjes, schaduwen, gelaagdheid en animatie toe. Hierdoor ervaart de gebruiker de interface elementen als de ‘echte’ tastbare wereld. Bewegende onderdelen en logische geanimeerde overgangen verduidelijken de gebruiksmoglijkheden en geven op een simpele en effectieve manier feedback. Het filmpje hieronder legt uit wat material design is.

De manier waarop websites ontstaan verandert

De technologie is tegenwoordig zo divers dat het voor de professionals in deze wereld bijna onmogelijk wordt om alles bij te houden. Internetbureau’s maken gebruik van bestaande onderdelen die steeds verder doorontwikkeld worden. Hierbij kan het gaan om complete resonsive frameworks of om kleine specialistische plug-ins of scripts. Handig als iemand anders alle fouten er al uit heeft gehaald.

Een stap verder gaan de design- en developtools die het werk van professionele designers en developers kunnen overnemen. Denk aan templates die zich automatisch aanpassen aan de inhoud en zelf bepalen wat de juiste plaats is voor een knop. Op de korte termijn zal het vooral gaan om automatische oplossingen voor basale en vaker voorkomende designvragen.

ai_designerWebsites met kunstmatige intelligentie

The Grid is een voorbeeld van een website development systeem gebaseerd op kunstmatige intelligentie. Het bepaald zelf de juiste uitsnede van een foto, zodat gezichten in beeld blijven. Het weet de juiste plaats van een knop en bouwt in twee tellen een webshop voor je. Dit sluit aan bij het verhaal van Ross Dawson over de toekomst van werk (takeway 2).

zurb-foundation-3

CSS Frameworks

Denk aan Bootstrap en Zurb Foundation waarmee je een complete basis in huis haalt voor responsive websites. Of wat dacht je van material ui? Hiermee kun je Googles Material Design gemakkelijk op een website toepassen.

Script bibliotheken

Bijvoorbeeld de CodeCanyon in de Envato Marketplace biedt op het moment van schrijven van deze post 11.344 scripts en snippets aan voor een prijs vanaf 2 euro!

Gevolg van het steeds duidelijker worden van conventies en het gebruik van frameworks is dat websites steeds meer op elkaar gaan lijken.

 

 

Houd het simpel, dat wil toch iedereen!?

In een wereld met oneindig veel mogelijkheden, informatie en prikkels wil de consument rust en gemak. Direct een helder overzicht van de keuzemogelijkheden. Alles overzichtelijk gepresenteerd zonder veel te hoeven klikken. Liefst leunt de bezoeker achterover terwijl de website haar verhaal doet of de meest relevante opties presenteert.

Ook de designer en developer willen met een zo klein mogelijke inspanning een zo waardevol mogelijke website creëren. De organisaties die deze mensen inhuren willen dit ook. Gebruikmaken van zo min mogelijk elementen en waar mogelijk gebruik maken van reeds bestaande onderdelen is het gevolg. Het is niet toevallig dat websites met een combinatie van o.a. toptaken en minimalistisch responsive design het winnen van de websites van slechts een paar jaar terug.

trendradar-2015Hopelijk heeft mijn trendradar je een beeld gegeven van de trends en achtergronden anno 2015. Misschien heb ik je op nieuwe ideeën gebracht of je eigen ideeën bevestigd. Mocht je behoefte hebben aan iemand die je meeneemt op weg naar een nieuwe vorm of gedachte achter de website van jouw organisatie neem dan gerust contact met me op. Bedankt voor het lezen!

 

 

Meer lijstjes lezen?

De lijstjes die naast mijn eigen ideeën als inspiratie dienden voor deze post:

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *