Mediaweb | Webdesign Trends 2017

Geen zin om te lezen? Luister naar deze blogpost via de player hieronder:

Webdesigners hebben in 2017 de opdracht om een onderscheidend ontwerp te combineren met een aangename gebruikerservaring. Geen eenvoudige opgave, want een eigenzinnig design staat vaak op gespannen voet met optimaal gebruikersgemak, vooral ook op mobiel.

Gelukkig bieden moderne browsers steeds meer mogelijkheden om webpagina’s vrij op te maken. We zien bijvoorbeeld ontwerpers die zich laten inspireren door glossy drukwerk en bijzondere typografie. Anderen kiezen juist weer voor lieflijke, rustgevende kleuren en material design.

Webdesigner van Mediaweb Tim Beekhuis en ondergetekende struinden ook dit najaar weer het web af op zoek naar de meest inspirerende voorbeelden van de nieuwste webdesign trends. Daarnaast vroegen we Edwin Vlems (edwinvlems.com), Robert Joosen (Loyals Online) en  Cornee van der Panne (Loyals Online)  om bij te dragen. Samen vonden we 18 webdesign trends die in 2017 belangrijk zullen zijn.

Leestip: 33 Prachtige Webdesign Inspiratie Sites

De wens om je te onderscheiden staat vaak op gespannen voet met ontwikkelingen van de laatste jaren als kleine schermpjes, responsive design en het gebruik van standaard templates. Dit resulteerde de laatste jaren steeds meer in eenvormig webdesign. In 2017 zien we gelukkig weer meer uitbundigheid, aandacht voor details en een sterkere drang naar eigenzinnigheid.

Een goede ontwikkeling vinden wij daarnaast dat webdesigners steeds meer de gebruiker voorop stellen. Per slot van rekening hoort alles wat de gebruiker ervaart bij het design. Niet alleen hoe het er uitziet, maar ook of de website snel is en de navigatie intuïtief.

Webdesign beweegt zich de komende tijd in een meer mens- en gebruiksvriendelijke richting.

Webdesign beweegt zich de komende tijd in een meer mens- en gebruiksvriendelijke richting. Een belangrijke rol hierbij is weggelegd voor de content. Die weerspiegelt steeds vaker de persoonlijkheid van een merk.

Leestip: Content Marketing Trends 2017

Vind je het moeilijk om zelf je teksten te schrijven? CopyRobin helpt. In de video hieronder zie je hoe het werkt.

https://www.youtube.com/watch?v=AwLJL5Ka21Y

Vind je het lastig je website up-to-date te houden? CopyRobin helpt.
Probeer nu gratis

Dan is het nu tijd voor de belangrijkste webdesign trends voor 2017:

1) Conversational interfaces

Meer dan de helft van het verkeer voor veel websites komt van smartphones. De kleine schermpjes vereisen dat webdesigners slim omgaan met de beperkte ruimte. Daarbij halen ze steeds vaker hun inspiratie bij toepassingen die mensen vooral op hun smartphones gebruiken, zoals social media en berichten apps.

Een duidelijk voorbeeld daarvan zijn de zogenoemde 'conversational interfaces'. Dit zijn ontwerpen die een natuurlijk gesprek tussen de website en de bezoeker proberen te creëren. Soms puur als 'gimmick', zoals bij de nieuwssite Quartz:

https://www.youtube.com/watch?v=OgtRR0SYuBo 

Quartz haalde zijn inspiratie voor een redesign in 2016 bij chat applicaties als Whatsapp om beter aan te sluiten bij de manier waarop mensen content consumeren op smartphones.

De toekomst van het bankieren is een robot. Hij heet Bankbot en gebruikt een prachtige conversational interface. Zoek je inspiratie voor conversational interfaces, bekijk dan zeker deze video: 

https://www.youtube.com/watch?v=kPh6M4VOw6g 

Een fraai overzicht met voorbeelden van conversational interfaces in tal van branches zie je in de video hieronder:

https://www.youtube.com/watch?v=Z_aCkMMiP5E

2) Cinemagraphs

voorbeeld cinemagraph pump

Ben ik nou gek, of zag ik die foto ineens bewegen? Een mooie trend van de laatste tijd is die van de cinemagraphs. Dat zijn subtiele, foto-realistische animaties binnen een afbeelding. In feite zijn het geraffineerde GIF-animaties, maar dan met een realistisch effect. Ze ‘loopen’ zodanig, dat de beweging natuurlijk en ononderbroken lijkt.

voorbeeld cinemagraph paspoort

Het menselijk brein is gespitst op beweging. Daarom lenen cinemagraphs zich er goed voor om de aandacht ergens op te vestigen. Het oog wordt er als het ware naartoe getrokken.

voorbeeld cinemagraph koffie

Robert Joosen: "Net als micro animatie/interactie heeft een bewegend iets de aandacht van de bezoeker. Aandacht zorgt ervoor dat je de boodschap duidelijker kunt overbrengen (Storytelling). Bewegend beeld is niet nieuw, maar door de alsmaar toenemende snelheid van het internet wordt dit de ideale manier om de aandacht van de bezoeker vast te houden, tegenover afbeeldingen die plat en bewegingloos zijn."

Voorbeelden hierboven: Cinemagraphs

Leestip: Afbeeldingen voor je website of blog: de ultieme lijst

3) Millenial pink

Webdesign volgt, als het om kleur gaat, de bredere mode trends. Geïnspireerd door de roze iPhone zien we de kleur pink steeds sterker terugkomen in de designwereld en ook webdesigners kijken voor 2017 door een roze brilletje.

De kleur voor volgend jaar lijkt dan ook 'Millenial pink' te worden, ook wel bekend als Pantone 13-1404 Pale Dogwood:

pale dogwood thema

 Bron: The Ringer

Volgens het PANTONE Fashion Color Report Spring 2017 zullen naast Pale Dogwood ook de kleuren 'Niagara', 'Primrose Yellow', 'Lapis Blue', 'Flame', 'Island Paradise', 'Greenery', 'Pink Yarrow', 'Kale' en 'Hazelnut' het beeld gaan bepalen:

https://www.youtube.com/watch?v=QfBDozb2PmY 

Cornee van der Panne: "Het kiezen van één opvallende kleur die van je beeldscherm af knalt! Een trend die we zeker in 2017 terug gaan zien. Dit allemaal om de aandacht van de bezoeker direct te trekken."

4) Kaders

De laatste tijd zien we steed meer websites die gebruik maken van witte kaders om de pagina's heen. Het lijkt een reactie op alle vrijstaande, open ontwerpen die we de laatste jaren veel zien bij responsive websites. We zagen het al een beetje bij een eerdere trend als cards. De behoefte om structuur en overzicht te bewaren.

Een paar mooie voorbeelden:

kaders newwave co uk

kaders villamilu com

kaders claraluna

5) Verticale navigatie

Als alternatief voor het saaie hamburgermenu zien we steeds vaker dat webdesigners kiezen voor verticale teksten aan de randen van responsive webpagina's. Persoonlijk vinden wij deze trend niet echt fraai, want niet echt gebruikersvriendelijk. Maar onderscheidend is het momenteel wel. En ook wel een beetje gedurfd. Dus: wie de schoen past, trekke hem aan.

verticale teksten navigatie

Alternatief: plaats menu items langs de randen van de pagina zoals in dit voorbeeld van Megan Ross:

navigatie rondom megan ross

Cornee van der Panne: "Een trend van de laatste jaren is een verborgen menu achter een zogenoemd “Hamburger” icon. Dit legt de focus op andere aspecten, zoals call-to-actions of visuals. Naast deze voordelen heeft het hamburger menu ook nadelen: een extra klik is nodig om het menu te vinden en verder te navigeren. Daarom kiezen ontwerpers steeds vaker voor een tussenoplossing waarbij enkele belangrijke items direct zichtbaar zijn."

6) Reuzachtige knoppen

Voor veel webpagina's is het belangrijk dat bezoekers een duidelijke volgende stap krijgen voogeschoteld. Een onmiskenbare 'call-to-action'. In de strijd om de aandacht van consumenten zien we steeds meer dat webdesigners veel werk maken van het ontwerpen van opvallende knoppen. Een nieuwe trend daarbij is groot, groter, grootst. Reuzachtige knoppen moeten bezoekers verleiden tot die o zo belangrijke klik.

giant buttons barkdesign  

Een flinke, ronde knop midden op deze pagina van Mt Cuba Center:

giant buttons voorbeeld mtcubacenter

Niet echt gebruiksvriendelijk, maar wel onderscheidend zijn de afbeeldingen als grote knoppen in de website van Simon Foster Design:

giant buttons voorbeeld simonfosterdesign

7) Zichtbare gridlijnen

Een webdesign trend die een gevoel van structuur moet geven is die van de zichtbare gridlijnen. Dit zijn de horizontale en verticale lijnen waarmee webdesigners hun pagina's indelen. Meestal blijven die lijnen onzichtbaar in het uiteindelijke ontwerp. Het effect kan heel fraai zijn, zoals in dit voorbeeld waarbij de ontwerper de horizontale gridlijnen zichtbaar heeft gemaakt:

voorbeeld zichtbare gridlijnen horizontaal

Of in dit ontwerp waar juist de verticale lijnen door het ontwerp schijnen, voorzien van details als paskruisjes en cirkeltjes. De teksten lopen over de gridlijnen heen en zijn niet met de gridlijnen uitgelijnd:

voorbeeld zichtbare gridlijnen verticaal

In dit ontwerp daarentegen, zijn de teksten juist strak uitgelijnd met de vaag zichbare verticale gridlijnen. Dit geeft aan het design een strakke, geordende look:

voorbeeld zichtbare gridlijnen verticaal uitgelijnd

8) Particle backgrounds

https://www.youtube.com/watch?v=dGlfuMiadt4 

Video backgrounds zien we al wat langer (zie ook trend 13). Maar een nieuwere trend van de laatste tijd is die van de particle backgrounds. Beweging op de achtergrond werkt namelijk goed om een webpagina interessanter te maken en op te laten vallen. Maar video's hebben twee belangrijke nadelen: ze zijn doorgaans erg groot en ze trekken vaak teveel de aandacht ten koste van de content. Ze treden als het ware als achtergrond teveel op de voorgrond.

voorbeeld particle background agantty

Om deze twee problemen te ondervangen, gebruiken steeds meer webdesigners particle backgrounds. Dit zijn achtergrond animaties van lichtgewicht JavaScipt. De beweging op de achtergrond maakt de webpagina interessant om naar te kijken en dat zonder de website onnodig traag te maken.

voorbeeld particle background nycigmarathon 

voorbeeld particle background mallonie trace

9) Micro interacties

Kleine, verfijnde effectjes om de interactie tussen gebruiker en website of app te stroomlijnen. Ze werken vaak ook als ‘delighters’, en om de gebruiker een handje te helpen.

https://www.youtube.com/watch?v=an68EwRY14M 

Robert Joosen: "Animaties worden in alle soorten en maten gebruikt om de aandacht van de bezoeker vast te houden: Kleine laadanimaties voordat de content wordt geladen, mouseover animaties die laten zien dat je over een link heen gaat. Scroll delays en lazy loading animaties (content die pas wordt getoond als de bezoeker op dat punt is aanbeland in de site). Dit allemaal als onderdeel van het Storytelling principe, waar meer merken mee bezig gaan."

Deze trend hebben we vorig jaar ook al behandeld. Nu weer in de herhaling, omdat het een trend is die flink doorzet, en ook omdat we er zulke mooie, nieuwe voorbeelden van hebben:

micro interacties voorbeeld blob 600

Afbeelding 'blob': Jakub Antalik

micro interacties voorbeeld tubik 600

Afbeelding restaurant menu: Tubik

Leestip: 11,5 Heerlijke Website Inspiratie Podcasts

10) Brushstrokes masks

Iets dat we de laatste tijd steeds vaker zien en waarvan we verwachten dat het gaat doorzetten zijn de brushstrokes masks. Weer een reactie op het de rechte lijnen en grids die we als gevolg van responsive webdesign veel zien. Het doet ook wel wat denken aan ontwerpen van tijdschriften en posters uit de jaren 90. Indien goed uitgevoerd kan het wel een lekker los en speels effect hebben.

Brush stroke masks 640 

11) Overlap tekst/afbeelding

Een andere manier om de eenvormingheid van veel responsive designs te doorbreken is het gedeeltelijk laten overlappen van titels en teksten met afbeeldingen. Het resultaat is een spannende lay-out waarbij veel ruimte is om te spelen met mooie typografie.

voorbeeld overlap tekst afbeelding 1

Bekijk het voorbeeld hierboven: jasminestar.com

voorbeeld tekst over afbeelding 1

Bekijk het voorbeeld hierboven: einwick.com

12) Material design

Deze trend ontwikkelt zich gestaag verder en blijft daarom ook in 2017 en ongetwijfeld ook daarna nog zeer relevant.

Material design is een vervolg op ‘flat design’ dat al een aantal jaren opgang maakt in webdesign.

https://www.youtube.com/watch?v=cQzien5H2Do 

Bij material design ontstaat er weer diepte en gelaagdheid in het beeld. Maar, material design is geen herleving van het skeuomorfisme. Het is eerder een verdere evolutie van flat design.

Een nadeel van flat design is namelijk dat de hiërarchie en onderlinge verhouding van de diverse elementen op een pagina vaak niet direct duidelijk is voor de bezoeker.

In deze video leggen de mensen van Google die achter material design zitten uit wat deze ontwerpfilosofie inhoudt.

https://www.youtube.com/watch?v=rrT6v5sOwJg 

Hoe je zelf heel makkelijk een gebalanceerd kleurenschema kunt maken voor een material design zie je in deze video:

https://www.youtube.com/watch?v=xYkz0Ueg0L4 

Robert Joosen: "Het ‘probleem’ bij flatdesign was de interactiviteit: kan ik hier op klikken? De oplossing kwam daar met de ultieme semi flat design: Material design van Google. Door het aanbrengen van subtiele schaduw-effecten op buttons, micro-animaties op mouse-over, komt de ux beter naar voren en is het makkelijker om een bezoeker te sturen."

Cornee van der Panne: "Een trend die al even aan de gang is, en zeker gaat doorzetten in 2017 is het minder 'flat' worden van websites. We gaan weer meer schaduwen en lijnen op vlakken en buttons zien. Die éne button met schaduw valt namelijk net iets meer op dan die geheel platte button. Of we terug gaan naar de 2012 bevel&emboss stijl? Nee,  daar ga ik niet van uit."

Vrijblijvend advies voor jouw webdesign?
Maak nu een afspraak

13) Achtergrond video’s

Aantrekkelijk om dezelfde redenen als de cinemagraphs (trend 2) en particle backgrounds (trend 8): ze trekken de aandacht en kunnen een verhaal vertellen. Probeer de ‘loop’ zodanig te maken, dat de video ononderbroken lijkt. En laat het geluid weg!

Cornee van der Panne: “We zien het steeds meer, een video die beeldvullend op de achtergrond afspeelt. Een video vertelt namelijk veel meer dan een afbeelding en houdt de bezoeker langer bezig op de website. Een belangrijk aspect dat hierbij komt kijken is gevoel. Afhankelijk van het doel van de website is een passende visual of goed geregisseerde video van groot belang. Het is belangrijk dat de bezoeker gelijk het juiste gevoel krijgt en zo interesse opwekt om te gaan scrollen of verder te gaan klikken.” 

Het voorbeeld hieronder is van Loyals zelf, die de video maakte in het kader van de mannequin challenge.

achtergrond video loyals

14) Interactive storytelling

Een manier om je als merk of bedrijf te onderscheiden van je concurrenten is door middel van storytelling.

Vertel je bezoekers het eigen verhaal dat jouw organisatie en/of product zo uniek maakt. Het verhaal waarmee je jouw klanten weet te pakken en te overtuigen. Een verhaal, bovendien, dat je vertelt door middel van de beste multimediale webtechnologie die je tegenwoordig ter beschikking staat.

https://www.youtube.com/watch?v=CBmIhctmgy8 

Ondanks dat deze trend al een paar jaar gaande is, behandelen we hem hier weer, omdat we verwachten dat interactive storytelling zich de komende jaren enorm zal ontwikkelen.

Zo voorzien we dat met name de meer vooruitstrevende e-commerce bedrijven interactive storytelling grootschalig gaan inzetten om zich te onderscheiden. Daar komt bij dat je als webshop in 2017 niet meer om het belang van content marketing heen kan.

Een mooi voorbeeld van een productpresentatie die gebruik maakt van interactive storytelling is 'Slim your wallet' van Bellroy.

voorbeeld interactive storytelling bellroy 

Storytellling te moeilijk voor jouw bedrijf? CopyRobin helpt.
Probeer nu gratis

15) Scrolljacking

De lange scroll is inmiddels een standaard ontwerppatroon. Bepaalde webdesigners hebben er echter moeite mee dat ze daardoor de controle over wat een bezoeker op een bepaald moment ziet kwijt zijn.

Om die controle weer terug te pakken, doen ze aan zogenaamde ‘scrolljacking’. Ze nemen de scrollfunctionaliteit als het ware over en vervangen die door iets anders.

Door middel van een script zorgen ze er bijvoorbeeld voor dat wanneer een bezoeker scrollt, de webpagina niet vloeiend voorbij ‘rolt’, maar in stappen van telkens een ‘pagina’ verspringt.

voorbeeld scrolljacking hannahpurmort

De scrollactie krijgt daardoor het karakter van ‘bladeren’ i.p.v. scrollen. Het effect kan heel mooi zijn, zoals dit voorbeeld laat zien, maar het is niet zonder risico, want de bezoeker ervaart iets anders dan hij of zij verwacht van een standaard functionaliteit als scrollen.

16) Glossy-geïnspireerde lay-outs

Om de eentonigheid van de standaard ontwerppatronen te doorbreken, halen veel webdesigners hun inspiratie uit de opmaak van glossy tijdschriften.

webdesign magazine style 1 640

Gelukkig stellen moderne browsers ons steeds beter in staat om speels om te gaan met opmaak en typografie.

webdesign magazine style voorbeeld 2

We zien voorbeelden van stoer gebruik van typografie en speelse elementen. Schuine vlakken. Accenten. Achtergrondkleuren en indringende fotografie.

Deze tijdschriftachtige opmaak komt helmaal tot z’n recht bij storytelling, blogs en langere artikelen.

17) Elke pagina is een 'homepage'

Door de sterke toename van content marketing en blogs, zien we dat voor steeds meer websites de homepage niet langer de belangrijkste landingspagina is.

De kans dat jij deze website voor het eerst bezoekt op een blogpost als deze is dan ook vele malen groter dan dat je eerst op onze homepage landt. Gemiddeld landden in 2016 slechts 4,84% van onze bezoekers op de homepage. De overige 95,16% maakte kennis met onze website via een andere pagina. Meestal een blogpost.

Webdesigners zullen dan ook in 2017 eigenlijk elke pagina moeten zien als homepage. Edwin Vlems: "De focus bij bedrijven lag tot 2016 nog heel erg op de homepage: deze moet logisch en mooi zijn. In 2017 beseffen bedrijven dat de meeste mensen niet langer via de homepage op de website komen (bij Hubspot nog maar 3%!) maar via links naar individuele artikelen via Google, social media of e-mails. Dat betekent anders denken: niet langer vanuit de hiërarchie vanaf de homepage, maar vanuit de informatiebehoefte van de individuele zoeker: hoe beweeg ik deze langzaam richting de kassa?"

18) No interface

https://www.youtube.com/watch?v=NrmMk1Myrxc

Met de proliferatie van the internet of things, zien we steeds meer apparaten die verbonden zijn met het web, maar zonder een scherm.

Hoe ontwerp je een goede gebruikerservaring zonder interface? Wellicht een beetje ver van je bed als webdesigner, maar no interface is een inspirerende designfilosofie die je kan helpen jouw designs zo eenvoudig mogelijk te maken voor de gebruiker.

Het principe van ‘no interface’ is dat je eerst het daadwerkelijke gebruik van een product bij echte gebruikers observeert, en daarna elke overbodige interactie verwijdert.

Een mooi voorbeeld is de Lockitron, een automatisch deurslot. De eerste versie kon je alleen bedienen met een app. Maar in de praktijk was dat ingewikkelder dan gewoon een sleutel uit je zak halen. Want je moest je telefoon uit je zak halen, ontsluiten, app zoeken, app openen, en dan je deur openen. Daarom gingen ze terug naar de tekentafel en bedachten een oplossing waarbij het slot open gaat zodra je in de buurt komt met je smartphone. Helemaal vanzelf. Zonder interactie. Via bluetooth. No interface dus.

https://www.youtube.com/watch?v=bK8ToEdXI8I

Bekijk als je even tijd hebt zeker deze presentatie van UX designer Golden Krishna, waarin hij het principe van no interface uitlegt.

https://www.youtube.com/watch?v=yQ4L7zCTG-M 

Welke trends spreken jou het meeste aan?

Please select at least one option.

Meer trends

Dit was de laatste aflevering uit onze serie online marketing trends voor 2017. Eerder al verschenen deze artikelen:

Bezoek de categorie 'trends' van dit blog voor nog meer trends.

Is jouw website niet meer van deze tijd? Mediaweb maakt hem weer modern.
Bekijk ons werk

Deze post delen?

e book online marketing checklist 2017

Meer inspiratie voor 2017?

Gratis ‘De Online Marketing Checklist’ - Deel 1 (epub, mobi, pdf) downloaden en elke week een inspirerend en leerzaam artikel in je inbox ontvangen?
Ja graag! →

3 reacties op “

  1. Gravatar for Martin Voorsmit

    Martin Voorsmit

    Hoi Eric,

    wederom bedankt voor deze blogpost..!

    Sta toch weer elke keer versteld hoe snel de ontwikkelingen gaan.

    Ik heb twee vraagjes aub:

    1. Na het stemmen in de Poll krijg ik een leeg schermgedeelte te zien.
    Normaal zie je de resultaten met percentages van de antwoorden.
    Zou leuk vinden om te zien hoe andere mensen stemmen.
    Zie schermafdruk bij mij op Dropbox: www.dropbox.com/s/rko53ivze...

    2. Zodra je op dit bericht antwoord, kan ik dan automatisch een seintje krijgen via email? Dit zou voor mij een fijne extra functionaliteit op jouw reactiepagina's zijn.

    Alvast bedankt.

    Groeten,
    Martin.
  2. Gravatar for Anna

    Anna

    Interessant, leuk om te lezen. Zet aan tot denken over hoe de webshop te blijven ontwikkelen. Trend van nummer 11: Overlap tekst/afbeelding, spreekt me erg aan. Zara.com past dit al lange tijd toe, geeft een unieke uitstraling!

Plaats reactie