Dé webdesign trends voor 2017

Webdesign evolueert continu en de ontwikkelingen volgen elkaar snel op. Het afgelopen jaar zagen we bijvoorbeeld dat PHP 7 zijn intrede deed en flat design gemeengoed werd bij het maken van websites, net als SSL Certificaten. Voor volgend jaar zien we nieuwe webdesign trends.

Zowel op technisch gebied als in de daadwerkelijke vormgeving van het website ontwerpen. Hét overzicht van de belangrijkste webdesign trends voor 2017 begint met de gebruikerservaring.

Gebruik dé webdesign trends van 2017 voor jouw meest optimale website ontwerp. Analyseer hiervoor ook jouw Google Analytics data.

Gebruik dé webdesign trends van 2017 voor jouw meest optimale website ontwerp. Analyseer hiervoor ook jouw Google Analytics data.

1. User experience

De belangrijkste webdesign trend voor 2017 is de focus op de gebruikerservaring. Een goede user experience (UX) op jouw website zorgt ervoor dat je bezoekers meer tevreden zijn over hun websitebezoek.

De gebruikerservaring kun je op verschillende manieren beïnvloeden, zoals met een goede navigatie, duidelijke opmaak van webpagina’s en het juiste kleurgebruik.

Je kunt niet in het wilde weg de UX proberen te verbeteren. Zorg ervoor dat beschikbare data in bijvoorbeeld Google Analytics daarbij leidend is.

Focus op toptaken van bezoekers

Om te beginnen, moet je weten waarom bezoekers op jouw website komen en wat ze daar verwachten te kunnen doen. Daar kom je achter met online onderzoeken (enquête) op je website. Dit soort onderzoek wordt user research of toptakenonderzoek genoemd.

Je kunt dit zelf proberen, maar de manier waarop je de vraag stelt en hoe de vraag bij bezoekers in beeld komt, is in grote mate bepalend voor het succes van je onderzoek.

Als je weet wat je bezoekers komen doen, kun je de structuur van je site en de inhoud en opbouw van webpagina’s daarop aanpassen.

Vergaar data met Google Analytics

Daarvoor is de juiste data heel belangrijk. Met Google Analytics kun je bijhouden welke webpagina’s bezoekers bekijken en hoeveel tijd ze op pagina’s doorbrengen.

Je krijgt hiermee inzicht in het gedrag van je bezoekers, zoals wanneer en op welke pagina ze jouw website verlaten.

Pijnpunten achterhalen

AGConsult in Gent houdt zich dagelijks bezig met het verbeteren van websites, intranetten en apps. “Soms merk je dat bepaalde zaken niet goed gaan op je site”, aldus Els Aerts van AGConsult. “Bezoekers haken bijvoorbeeld af in een bestelproces of scrollen niet door je hele blog-artikel. Dat kun je zien met Google Analytics en Hotjar”.

Els: “In een online survey stel je bezoekers de vraag; wie ben je en wat kom je vandaag doen op onze website? De informatie die daaruit naar voren komt, zet je af tegen de gegevens in Google Analytics.”

Gebruik Hotjar voor meer inzicht

Met Hotjar kijk je als het ware over de schouder van je bezoeker mee. Door sessies van je bezoekers op te nemen, zie je in real-time hoe bezoekers door je website bladeren.

Hotjar heatmaps

Ontdek hoe bezoekers jouw website gebruiken met Hotjar heatmaps en neem je conclusie mee bij het website ontwerpen.

Je ziet ook waar bezoekers klikken en hoever er op pagina’s naar beneden wordt gescrold. Dit worden heatmaps genoemd. Samen met de gegevens uit Google Analytics kun je hiermee goed bepalen of er een probleem is op een pagina.

Je weet dan wat het probleem is, maar nog niet waarom. Daar kun je achter komen met user testing.

Gebruikerstesten

Mensen die in jouw doelgroep vallen, nodig je uit om onder begeleiding door de website te klikken en bepaalde taken uit te voeren. De sessie wordt altijd opgenomen.

Het is daarbij zelfs mogelijk om met zogenaamde eyetracking te werken, waarmee je kunt zien waar de testpersoon kijkt. Alle informatie kan achteraf geanalyseerd worden. Samen met een goede vragenlijst ontdek je of mensen jouw website zo gebruiken als jij verwacht.

Andere toepassingen van usertesting

Voor een bestaande website kun je dit soort usertesting inzetten als je erg weinig bezoekers op je website hebt. Ook bij het ontwerpen van een nieuwe website kunnen gebruikerstesten helpen om te bepalen of je wireframes of basisontwerp aan de verwachtingen van je bezoekers voldoet.

Of je nu zelf aan de slag gaat met het verbeteren van de gebruikerservaring, of een onderzoeksbureau inschakelt; UX wordt in 2017 en daarna steeds belangrijker.

Een aantal van de andere trends in dit artikel vallen uiteindelijk ook onder de paraplu van User Experience. Een paar licht ik graag voor je uit.

2. Personalisatie

Dit is zo’n belangrijke trend die bijdraagt aan een betere ervaring voor bezoekers van je website. Bij online advertenties is personalisatie al heel gebruikelijk. Advertenties worden toegespitst op jouw wensen en interesses.

Steeds meer bezoekers verwachten dit nu ook op websites. Die verwachting hebben bezoekers eigenlijk al een paar jaar, maar vanaf 2017 wordt steeds meer ingezet op personalisatie op websites.

Persoonlijke aanbiedingen

Deze trend wordt al veelvuldig ingezet door reiswebsites zoals Booking.com. Eerder gevonden bestemmingen en hotels blijven bewaard en worden opnieuw getoond als je de website weer bezoekt.

Personalisatie op de website van Booking.com

Personalisatie, zoals op de website van Booking.com, is ook een van de webdesign trends.

Ook Bol.com en Wehkamp onthouden wat je favoriete artikelen zijn. Dat kennen we al. Vanaf 2017 zal de personalisatie ook echt op de content worden toegepast. De nieuwste trend is de juiste informatie weergeven als de bezoeker daar het meest om vraagt.

Personalisatie van content

De persoonlijk afgestemde weergave heeft ook invloed op de positionering van het logo, de afbeeldingen en tekstvlakken. Op dit vlak kunnen webdesigners nog wel wat leren van de designers die gedrukte media maken.

Zij houden bij het ontwerpen van kranten en magazines veel meer rekening met de beste vorm bij de inhoud. Dat samenspel zullen we ook in webdesign steeds meer gaan terugzien.

Dit wordt ‘content first design’ genoemd.

Digitaal bureau Mirabeau schreef daar in 2014 al over. In hun artikel over content first design geven ze bovendien zes interessante tips voor het creëren van een dynamische en relevante website.

3. Verdwijnen van hamburgermenu

Dit is misschien meer een wens dan een trend, maar ik verwacht toch echt dat we in 2017 afscheid moeten nemen van het hamburgermenu. Maak je geen zorgen om je favoriete hamburger op een broodje, die blijft nog wel even.

Iets met balkjes

Het hamburgermenu bestaat uit drie balkjes onder elkaar. Dit icoon is bedacht om het navigatiemenu van een website mee te openen op mobiele telefoons en tablets.

Het feit dat ik moet uitleggen wat het is, geeft meteen aan waarom het een slecht idee is geweest en we er in 2017 het best van kunnen weglopen. Veel mensen herkennen het niet eens als een menu.

Gebruik liever een knop met het woord menu. Dat begrijpt iedereen, behalve misschien Estate Internet. Dit webbureau weet zelfs op de desktopweergave van hun website het menu vakkundig te verstoppen in het ontwerp.

4. Fel kleurgebruik

We zijn gewend geraakt aan de standaard templates die iedereen met WordPress en Joomla gebruikt. Vaak zijn dit wat saaie en veilige thema’s. Daarom zijn ze ook zo populair.

Durf je wat anders te doen met je website ontwerp? Felle kleuren zijn de trend voor 2017. Ze geven je site extra pit, de site valt op en wordt als vrolijk (en dus positief) ervaren.

Felle kleuren; één van de webdesign trends voor 2017 in het design van Teletype.com

Felle kleuren in het webdesign bij Teletype.

De kleurige trend werd gezet door designers en artiesten, maar steeds meer mainstream websites gaan nu ook meer kleur gebruiken. Nieuwsorganisatie Bloomberg gebruikt bijvoorbeeld fel blauw en andere sprekende kleuren.

Bij het website maken kun je je laten inspireren door het uitgesproken kleurgebruik op een mainstream website als Bloomberg.

Bij het maken van een website kun je jezelf laten inspireren door het uitgesproken kleurgebruik op een mainstream website als Bloomberg.

Oorsprong van fel kleurgebruik

Het toepassen van felle kleuren is geen toeval. Waar je als webdesigner voorheen maar 216 web-veilige kleuren kon toepassen, staan nu 16 miljoen kleuren tot je beschikking.

Dat alleen al, daagt je uit om eens te experimenteren met kleur. Combineer je dat kleurgebruik met de flat-design trend van de laatste jaren, dan staat dat garant voor aansprekende en vrolijke ontwerpen.

Handige tools voor kleuren

Heb je kleur-inspiratie nodig? Check dan eens Material Colors of FlatUIcolors voor inspiratie.

Heb je de perfecte hoofdkleur voor jouw website gevonden? Dan kun je met Color Hex de bijbehorende complementaire kleur en kleurvariaties vinden.

Wil je een mooi kleurverloop in je ontwerp? Op de website uiGradients kun je kiezen uit een aantal vooraf gemaakte gradients.

Ontdek meer over kleuren en kleurgebruik.

5. Video en subtiele animatie als webdesign trends

Bewegende elementen leiden af op een webpagina. Toch neemt het gebruik van subtiele animaties toe. Animaties kunnen namelijk heel nuttig zijn. Voeg je goede en subtiele animaties toe op de juiste plaatsen op je website, dan kun je de aandacht van je bezoeker pakken en deze sturen in het bezoek van je pagina.

Verleid je bezoeker met animatie

Animatie kan helpen om een beleving te creëren. In dat geval is de animatie meer aanwezig, maar omdat het één geheel vormt, leidt de animatie niet af van de taak van je bezoeker.

Material webdesign met animatie van Publicis

Het Franse bedrijf Publicis combineert material webdesign met animatie op hun jubileumwebsite.

Een voorbeeld van gebruik van animatie vind je op de thema website voor het 90-jarig bestaan van het Franse bedrijf Publicis.

Peugeot ging met de introductie van hun nieuwe hybride auto’s een stuk verder bij het toepassen van animatie. Er werd een thema-website gemaakt die compleet geanimeerd is en bezoekers meteen meesleept in een avontuur.

Video als designelement

Video blijft ook in 2017 belangrijk. Het is de meest krachtige marketingtool die er bestaat. Online kun je video goed inzetten, bijvoorbeeld met uitlegvideo’s over je product of dienst, of reviews van tevreden klanten.

Video wordt echter steeds vaker ingezet als onderdeel van het design. Wat zeg ik? Soms bestaat de complete website bijna geheel uit video, zoals de website voor het aantrekken van nieuw personeel van Heineken.

Heineken gebruikt video als basis voor haar website ontwerp.

Heineken gebruikt video als basis voor haar website ontwerp.

Een subtieler gebruik van video als onderdeel van het design is terug te vinden op de site van waterleidingmaatschappij Oasen.

6. Website builders

Voor 2017 zie ik nog een aantal andere webdesign trends, zoals het loslaten van de vaste grids waarin websites worden opgemaakt, Google Fonts en ook de eerste toepassingen van virtual reality voor websites.

De grootste doorbraak in webdesign trends voor 2017 verwacht ik echter voor website builders of pagebuilders. Steeds meer mensen willen zelf een mooie en geavanceerde website maken.

Dat is nu zelfs mogelijk als de technische kennis ontbreekt. Er zijn tal van mogelijkheden waarmee je heel gemakkelijk een website kunt maken. Deze zogenoemde Page Builders worden nu al gebruikt, maar ik verwacht dat het gebruik in 2017 verder zal toenemen.

Er zijn pagebuilders die onafhankelijk werken, maar ook voor de populaire Content Management Systemen (CMS’en) als WordPress en Joomla zijn dit soort oplossingen beschikbaar.

WordPress pagebuilders

Voor WordPress heb je twee soorten pagebuilders. Er zijn thema’s waarmee je heel makkelijk pagina’s kunt ontwerpen, en er zijn plugins die dit los van het thema kunnen. De belangrijkste pagebuilders voor WordPress zijn WP Beaver Builder, SiteOrigin Page Builder, Velocity Page en Divi.

Van deze vier pagebuilders voor WordPress gaat mijn voorkeur uit naar WP Beaver Builder. Het is de enige echt visuele editor en het slaat de pagina niet op in short codes. Als je deze plug-in niet meer wilt gebruiken, blijft de content dus gewoon staan en verandert je pagina niet ineens in een brei short codes.

Joomla pagebuilders

Voor Joomla heb je extensies waarmee je in Joomla templates ook eenvoudig pagina’s kunt vormgeven. De meeste zijn op basis van drag-and-drop, zoals Themexpert Quix Pagebuilder, Joom Shaper en SP Page Builder.

Quix is de pagebuilder voor Joomla met de meeste functies. Bovendien is het pakket erg gebruiksvriendelijk en ondanks dat het een uitgebreide websitebouwer is, blijft je website snel reageren en goed toegankelijk.

Hosting2GO pagebuilder

Achter de schermen werken wij momenteel aan een pagebuilder waarmee je eenvoudig een one-page website kunt maken. Snel een website online zetten via ons webhosting platform wordt daarmee kinderspel.

We verwachten deze in de loop van het nieuwe jaar te introduceren. Zo brengen we je ook in het nieuwe jaar verder online. Wil je op de hoogte blijven van deze ontwikkeling? Schrijf je dan in op onze nieuwsbrief.

Gevaar voor webdesigners

Zijn Page Builders een gevaar voor de hardcore webdesigner? Misschien, maar het is ook een kans. Ze stellen je in staat om heel snel een website te maken, en daarna het beheer door jouw klanten makkelijker zelf te laten uitvoeren.

Of je nu zelf met CSS aan de slag gaat, of juist drag-n-drop je website bij elkaar sleept; houd daarbij zeker rekening met de andere webdesign trends 2017.

Webdesign inspiratie

Wil je nog meer design inspiratie opdoen? Op sites als Dribbble en CollectUI delen designers van over de hele wereld hun ontwerpen. Blader door de vele webdesigns van de gebruikers van dit platform en doe op die manier ideeën op.

Zo ontdek je ongetwijfeld nieuwe technieken, bijzondere ontwerpen en verrassende kleurcombinaties. Je kunt er ook je eigen ontwerpen laten zien en feedback krijgen van andere designers. Breng ons dan ook eens op de hoogte. We zijn benieuwd naar wat jij maakt.

Dit is mijn idee ❯❯

Hiermee breng ik mijn website verder online