Deze 8 webdesign-trends zijn in 2018 belangrijk

Website-trends volgen elkaar snel op

Op welke webdesign-trends moet je in 2018 voornamelijk letten? De ontwikkelingen rondom webdesign zijn de afgelopen 20 jaar enorm snel gegaan en worden gekenmerkt door technologische vooruitgang en talloze nieuwe ontwerpmogelijkheden. Terwijl trends in webdesign aan het begin nog voor langere tijd een rol speelden, krijgen ze tegenwoordig nauwelijks nog de kans om volledig tot bloei te komen. Toch zijn er aspecten die steeds van belang zijn gebleven: gebruikersvriendelijkheid en een hoge informatieve waarde.


Website-trends

Modern webdesign: (mobiele) aanpassingen met technische vernieuwingen

In de webdesign-trends voor 2018 is een duidelijke tendens terug te zien: terwijl het optische ontwerp van de website wat meer op de achtergrond raakt, ligt de focus op optimale gebruikersvriendelijkheid. De inhoud moet aantrekkelijk worden gepresenteerd en meerwaarde hebben; onafhankelijk van het gebruikte apparaat. Responsive webdesign zal daarom ook in 2018 een belangrijk concept blijven voor webdesigners. Alleen als een website of webapp kan reageren op de eigenschappen van het gebruikte apparaat, en op ieder apparaat overzichtelijk wordt weergegeven, kan deze op lange termijn succesvol blijven.

Moderne webstandaarden, zoals HTML5, JavaScript en CSS3, moeten dus optimaal worden ingezet om een flexibele website te ontwerpen. In het ideale geval worden de inhoud en de grafische elementen altijd op dezelfde manier weergegeven; onafhankelijk van het beeldschermformaat en de bediening (bijvoorbeeld via muis of touchscreen). Een belangrijk voordeel van responsive design is dat de flexibele en automatische afstemming niet alleen het gebruik via bestaande mobiele apparaten vereenvoudigt, maar ook een snelle aanpassing aan toekomstige apparaten mogelijk maakt. Bovendien geldt: terwijl een afzonderlijke mobiele website via een eigen template moet worden aangemaakt en beheerd, is er bij responsive design sprake van één centrale website. Bij een responsive website hoef je wijzigingen in de inhoud daarom maar één keer door te voeren.


8 Website-trends

Laat je dit jaar inspireren door deze 8 webdesign-trends

Belangrijke website-trends van de afgelopen jaren zijn ook in 2018 weer te zien en zetten voornamelijk kwalitatief hoogwaardige en gepersonaliseerde inhoud voorop. Nieuwe invloeden komen voort uit de ontwikkelingen op het gebied van kunstmatige intelligentie en de toenemende digitalisering van het dagelijks leven in het kader van het Internet of Things (IoT). Deze twee tendensen bieden webdesigners de kans om de gebruikerservaring te verbeteren en websitebezoekers ongekende interactiemogelijkheden te presenteren.


1. Overzichtelijke gebruikersomgeving

Dat een goede en intelligente lay-out vaak wordt geïmiteerd, is ook binnen de webdesign-trends terug te zien. De gebruikersomgevingen van veel websites en webapps worden, wat vormgeving en indeling van de inhoud betreft, steeds vaker volgens beproefde schema’s gemaakt. Over het algemeen kun je met een overzichtelijke gebruikersomgeving niets verkeerd doen. Je kunt je ook prima laten inspireren door de gevestigde portaalopmaak van grote websites of door het blogdesign van kleinere pagina's. Er zijn echter tevens twee recentere lay-outtrends, die in 2018 in veel grafische gebruikersomgevingen terug te zien zullen zijn.

Het eerste fenomeen is zo snel een trend geworden, dat veel gebruikers het vanzelfsprekend vinden dat het deel uitmaakt van het menu: de kleine menuknop die ook wel de ‘hamburger-menuknop’ (Engels: ‘hamburger button’) wordt genoemd. Eerst werd hij vooral voor drop-downmenu’s van mobiele websites en apps gebruikt. Inmiddels is het icoontje ook op veel desktopsites te vinden. Het icoontje lijkt op een gestapelde hamburger en wordt ook vaak afgebeeld als het wiskundige symbool ‘≡’, dat eigenlijk ‘identiek’ betekent.

Website-trends: Overzichtelijke gebruikersomgeving
Card lay-out op de Pinterest-pagina van het Wereld Natuur Fonds, met rechtsboven een hamburger-menuknop. Bron: https://nl.pinterest.com/wnfnederland/oceanen-en-kusten/

De tweede en nieuwere webdesign-trend heeft betrekking op de opmaak van de content. De card lay-out (ook wel ‘card-based design’ genoemd) wordt steeds meer gebruikt. Op tekst en/of afbeeldingen gebaseerde inhoud of ‘call to action’-knoppen worden hierbij in verschillende vakjes gepresenteerd, die over de gebruikersomgeving zijn verdeeld. Deze indeling creëert meerdere voordelen. Een belangrijk voordeel is dat de kaarten veel mogelijkheden bieden om een website overzichtelijk en aantrekkelijk te ontwerpen. Daarnaast kunnen de afzonderlijke kaarten als container voor webinhoud worden ingezet, zodat je de inhoud eenvoudig binnen het bestaande opmaakprofiel kunt verschuiven. Vooral bij een responsive weblay-out kan een nieuwe verdeling van webinhoud bijzonder eenvoudig worden gerealiseerd. De card lay-out is voornamelijk populair geworden door webdiensten voor afbeeldingen, zoals Pinterest, en webdesign-platformen, zoals Dribbble.


2. Naadloze interactie

Of een website goed is, hangt niet alleen af van de inhoud. Net zo belangrijk zijn de manier waarop de content wordt gepresenteerd en de gebruikerservaring (User Experience, UX). Interactie met de bezoeker staat op de voorgrond bij UX-design. Het doel is om inhoud visueel aantrekkelijk weer te geven en het overbrengen van informatie eenvoudiger te maken. Een webdesign-trend die ook in 2018 nog zichtbaar zal zijn, is interactive storytelling: het vertellen van een verhaal met behulp van interactieve multimedia-elementen.

Hoe zelfs droge thema's met behulp van interactive storytelling op een spannende manier kunnen worden gepresenteerd, laat het webproject Snow Fall van de New York Times zien. De documentatie vertelt in meer dan 10.000 woorden over de belevenissen van een skigroep die onder de sneeuw werd bedolven. Hoewel dit een grote hoeveelheid tekst is, zorgt de multimediale benadering, met interviews, video's, foto’s en animaties, ervoor dat het verhaal blijft boeien.

Website-trends: Naadloze interactie
Een voorbeeld van opmaak met multimedia: het webproject Snow Fall. In het bovenste derde deel van het beeldscherm wordt een animatie weergegeven; daaronder staat tekst- en beeldmateriaal. Bron: http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek

Voor de gebruiker wordt het streven naar interactie zichtbaar door wezenlijke veranderingen van de gebruikersomgeving. Interactieve trendelementen die in 2018 nog meer zullen worden ingezet, zijn micro-interacties, 360°-video's, chatbots en voice user interfaces (VUI). Ook het Internet of Things (IoT) kan een belangrijkere rol gaan spelen in webdesign.

Micro-interacties – Bij micro-interacties gaat het om een trend in UX-design, waarbij bepaalde gebruikersinteracties door kleine animatie-effecten worden begeleid. Een voorbeeld hiervan is dat het klikken op een like-button beloond wordt, doordat er een bewegingseffect ontstaat of doordat de gebruikte smartphone gaat trillen. Volgens UX-experts als Dan Saffer zijn het juiste deze details die de gebruikerservaring bepalen. Voorbeelden van goed gelukte animaties waarmee je micro-interacties kunt realiseren, zijn te vinden op Awwwards.com en Dribbble.

360°-video's – In het verleden bepaalde het standpunt van de camera wat een video aan de kijker liet zien. 360°-video’s hebben hier verandering in gebracht; deze video’s laten toeschouwers zelf bepalen in welke richting ze kijken. Videoplatformen zoals YouTube voldoen al aan de technische voorwaarden voor het afspelen van 360°-video’s. In 2018 zullen dit soort video’s ook steeds meer ingezet worden door webdesigners. Er zal multimedia worden aangeboden, die de internetgebruiker een kijkje laat nemen in een virtuele omgeving. Een voorproefje biedt de onderstaande video, die je laat ervaren hoe het is om tussen wilde olifanten te staan.

Chatbots – Programma's voor communicatietaken zijn niet nieuw. Chatbots zijn voortgekomen uit onderzoek op het gebied van kunstmatige intelligentie (KI) en worden vandaag de dag al op websites van bedrijven en webshops gebruikt. Over het algemeen gaat het hierbij om kleine dialoogvensters, waarin gebruikers hun vraag kunnen stellen en een automatisch gegenereerd antwoord krijgen. De antwoorden kunnen met behulp van algoritmes voor machinaal leren worden gepersonaliseerd, waardoor de gebruiker de indruk krijgt dat ze afkomstig zijn van een menselijke medewerker. Chatbots worden ingezet als virtuele winkelassistenten of als alternatief voor de klassieke FAQ-pagina.

Voice user interface (VUI) – Spraakassistenten zoals Siri van Apple, Alexa van Amazon, Google Assistant en Microsoft Cortana laten al zien hoe het werkt. En voice user interface is een spraakgestuurde gebruikersinterface, die de gebruiker een alternatief biedt voor grafische besturingselementen en in 2018 ook een webdesign-trend kan worden. Het grote voordeel van een VUI is dat de gebruiker zijn of haar handen vrij heeft en niet per se op het beeldscherm hoeft te kijken. Bovendien bieden spraakassistenten uitkomst wanneer gebruikers een apparaat met een heel klein beeldscherm of een moeilijk te bedienen toetsenbord hebben. Reeds in de jaren ’50 stelden onderzoekers van Bell Laboratories het systeem ‘Audrey’ voor, de eerste spraakgestuurde user interface. Moderne adaptaties van dit systeem zijn gebaseerd op resultaten van KI-onderzoek en maken een dialooggeoriënteerde navigatie met behulp van gesproken commando's mogelijk.

Internet of Things (IoT) – Het sleutelbegrip Internet of Things omvat verschillende technologieën, die het mogelijk maken om huishoudelijke apparaten met een netwerk te verbinden. In 2018 kan IoT ook een webdesign-trend worden. Het kan zijn dat op websites IoT-interfaces verschijnen, die interactie met intelligente apparaten tot stand kunnen brengen; bijvoorbeeld met weegschalen en koelkasten die verbonden kunnen worden met het internet.

Tip!
Een interactieve presentatie van content is zowel informatief als ‘catchy’. De website zal de bezoeker sneller aan zich binden, waardoor de kans op een positieve reactie groter is. Om de performance stabiel te houden, is het echter wel belangrijk om niet teveel animaties te gebruiken.

3. Gepersonaliseerde gebruikerservaring

Een basisprincipe van webdesign is dat de weergave van de webinhoud bij de doelgroep moet aansluiten. Vooral binnen de e-commerce moet de inhoud, en de presentatie ervan, worden aangepast aan de verwachtingen van de klant. Tot nu toe lag de focus op groepen personen, maar in 2018 zal de gebruikerservaring van het individu veel aandacht krijgen. De meeste webshops tonen tegenwoordig al producten die specifiek jou worden aangeraden. Er zijn echter bedrijven – zoals OTTO's dochterbedrijf ABOUT YOU, de muziekdienst Spotify en het video on demand-platform Netflix – die nog een extra stap zetten, door hun informatieaanbod, producten en weergave direct aan te passen aan de individuele klant.

Een webdesign-trend van 2018 zal dan ook de gepersonaliseerde website zijn, waarop de inhoud voor bezoekers op een manier wordt weergegeven die bij hun gebruikspatroon past. Voor het realiseren van een gepersonaliseerde UI kunnen resultaten uit webanalysetools als Google Analytics en Piwik worden gebruikt. Deze geven websitebeheerders een goed beeld van de interactie tussen internetgebruiker en webinhoud en kunnen beheerders ondersteunen bij website en zoekmachine optimalisatie.


4. Scrolling websites; klikken is verleden tijd

Het devies ‘mobile first’ geldt niet alleen met het oog op viewports en de optimale weergave van webinhoud op verschillende apparaten. De grote rol die mobiele apparaten spelen, zal in de toekomst steeds meer invloed op de webinhoud hebben. Eén van de belangrijkste ontwikkelingen op dit gebied is de overgang van klikken naar scrollen. De ‘scrolling website’ is al langer een bekend fenomeen, maar designconcepten als infinite scrolling en het parallax-effect zijn nog altijd populair en zullen ook in 2018 een website-trend blijven.

Infinite scrolling geeft websitebezoekers de mogelijkheid om nieuwe inhoud op te roepen door te scrollen in plaats van te klikken. Als het laatste deel van een alinea is bereikt, sluit de volgende direct aan. Sociale netwerken zoals Facebook en Instagram maken al langer gebruik van deze methode om inhoud in een ononderbroken newsfeed aan de gebruikers te kunnen presenteren. Ook op blogs wordt het ‘eindeloze scrollen’ al langer toegepast en zal het in de toekomst van belang zijn.

Infinite scrolling past vooral bij websites die veel informatie bevatten. Op een blog met 100 tot 200 artikelen kun je nog eenvoudig een pagina-indeling gebruiken, maar de voordelen hiervan nemen af bij grotere webprojecten met steeds meer informatie. Het is namelijk onwaarschijnlijk dat een gebruiker doelgericht pagina 812 van in totaal 5782 subpagina's opent. Infinite scrolling wordt over het algemeen met goed uitgewerkte algoritmes ingezet, die de informatie zodanig filteren dat gebruikers de relevantste berichten eerst zien.

Websitebeheerders die in 2018 willen inspelen op de infinite scrolling-trend, moeten er wel op letten dat hun website geoptimaliseerd blijft voor zoekmachines. Hoewel Google er aan het begin nog moeite mee had om scrolling websites te crawlen, kan infinite scrolling tegenwoordig dankzij gedetailleerde vormgevingsrichtlijnen zonder gevaar worden toegepast. Let in ieder geval op volgende aspecten:

  • afzonderlijke URL's voor iedere subpagina
  • geen overlappende inhoud
  • bezoekers moeten gezochte elementen eenvoudig kunnen vinden
  • acceptabele laadtijd

Als voorbeeld van een website die op een zoekmachinevriendelijke manier omgezet is naar een infinite scrolling-site, verwijst Google naar de demowebsite van webmaster-trendanalist John Mueller.

Ook parallax scrolling behoort niet tot de nieuwste webdesign-trends, maar zal voorlopig een belangrijke tol blijven spelen. Het effect van bewegingsparallaxen wordt al enkele jaren gebruikt als bouwsteen voor moderne webpagina's. Omdat afzonderlijke delen van de website met verschillende snelheden bewegen, ontstaat de illusie van diepte. Idealiter biedt de website, naast de bewegingseffecten, ook elementen die ervoor zorgen dat de bezoeker een bepaalde handeling verricht. Parallax scrolling kan daardoor uitstekend worden gecombineerd met interactive storytelling. Een duidelijk voorbeeld hiervan biedt de website Every Last Drop.


5. Meer nadruk op typografie

Hoewel grote letters en het mixen van verschillende lettertypes eerst een no-go waren, is variatie op het gebied van lettertype en -grootte inmiddels een website-trend geworden. Het combineren van goed op elkaar afgestemde lettertypes kan een positief effect op de lezer hebben. Verschillende lettergroottes kunnen er onder meer voor zorgen dat lezers een beter beeld van de structuur van een tekst krijgen. Grotere elementen worden bijvoorbeeld eerst waargenomen.

Over het algemeen geldt dat je lettertypes zorgvuldig moet kiezen, zodat ze passen bij het product, het bedrijf, het thema en/of de doelgroep. Hoewel een webdesigner op het gebied van lettertypes en lettergroottes enorm veel mogelijkheden heeft, mag hij één aspect nooit vergeten: het gekozen lettertype moet goed leesbaar zijn.


6. Dynamische achtergrondelementen

Wanneer je een tijdje op internet surft, dan zie je overal stockfoto's. In plaats van het maken van eigen foto’s, hebben veel websitebeheerders er de afgelopen jaren voor gekozen om goedkope stockfoto’s te gebruiken. Erg creatief is dat niet, en meestal hebben zulke afbeeldingen weinig meerwaarde voor de gebruiker. Het grootste nadeel van stockfoto's is echter dat ze ontzettend breed inzetbaar zijn; hoogstwaarschijnlijk zien gebruikers dezelfde afbeeldingen op verschillende websites terug. Websites vallen juist op als ze voorzien zijn van kwalitatief hoogwaardige en unieke afbeeldingen en video's. In dit kader is het inzetten van dynamische achtergrondafbeeldingen, -grafieken en -video's een belangrijke webdesign-trend voor 2018.

Dynamische achtergrondelementen geven websitebeheerders de mogelijkheid om informatie sneller en directer over te brengen dan met tekstelementen het geval is. Bovendien kunnen ze met foto's, grafieken en video’s inspelen op de emoties van de gebruiker. Een dynamisch achtergrondontwerp heeft daarom vaak tot doel om bepaalde gevoelens aan te wakkeren en de bezoeker in de gewenste stemming te laten komen.


7. Kwalitatief hoogwaardige illustraties

Een andere webdesign-trend die je kunt toepassen om een uniekere en opvallendere website te creëren, is het inzetten van kwalitatief hoogwaardige illustraties. Een groot voordeel van zulke illustraties, is dat ze geschreven inhoud op een eenvoudige manier kunnen ondersteunen en concreet kunnen maken. Daardoor wordt de inhoud van de tekst beter overgebracht. Vooral als het gaat om multimediale inhoud, bieden illustraties een prettige afwisseling die in het oog springt. Illustraties kunnen bovendien niet gemakkelijk worden gekopieerd door de concurrentie en zijn daardoor een geschikt middel om je te onderscheiden van de massa. Wie zelf geen illustraties kan maken, kan een professionele grafisch designer de opdracht geven om dit te doen. Een bekend voorbeeld van een website die gebruikmaakt van illustraties is de website van online opslagdienst Dropbox.

Website-trends: illustraties
Illustraties op de website van Dropbox. Bron: https://www.dropbox.com/about

8. Performance: geschatte vs. daadwerkelijke laadtijd

Ontwerptrends binnen het moderne webdesign, zoals interactieve animaties, parallax-effecten en een dynamische achtergrond, kunnen ervoor zorgen dat je website er spectaculair uit komt te zien en dat de informatie die je publiceert beter overgebracht wordt. Een indrukwekkend ontwerp gaat echter vaak ten koste van de performance. Webdesigners moeten daarom goed nagaan welke interactieve elementen en multimedia meerwaarde bieden voor de gebruiker en welke de website onnodig trager maken. Over het algemeen geldt: ”less is more”, waarmee niet per se bedoeld wordt dat flat design je uitgangspunt moet zijn.

Houd altijd in het achterhoofd dat de performance de user experience op een directe manier beïnvloedt. Hierbij kan onderscheid worden gemaakt tussen daadwerkelijke en geschatte laadtijd. Een vertraging vormt alleen dan een probleem, wanneer de gebruiker deze waarneemt. Webdesigners gebruiken daarom onderstaande trucjes om laadtijden minder storend te laten zijn.

  • Voortgangsbalk – Als een bezoeker moet wachten, moet hij ten minste kunnen zien hoe lang de laadtijd is. De laadtijd wordt door de voortgangsbalk weliswaar niet korter, maar lijkt sneller voorbij te gaan als de balk er interessant uitziet.
  • Sleutelelementen eerst laden – Website moeten zo worden geprogrammeerd, dat de zogenoemde ‘above the fold’-inhoud het eerst wordt gedownload en in de browser kan worden weergegeven. Dit zijn de delen van de website die voor de gebruiker zonder te scrollen zichtbaar zijn. Als deze inhoud beschikbaar is, is het voor de gebruiker in eerste instantie onbelangrijk of andere inhoud (‘below the fold’) pas later wordt gedownload.
  • Progressive JPEG – Afbeeldingen die als progressive JPEG op de website worden geplaatst, worden niet van boven naar beneden gedownload. In plaats daarvan wordt gebruikgemaakt van interlaced scanning; de kijker ziet eerst een preview-afbeelding van lage kwaliteit, die geleidelijk scherper wordt tot de benodigde data voor de gewenste beeldkwaliteit geheel zijn gedownload.

Tip!
Over het algemeen geldt voor alle soorten video's, foto's en gimmicks hetzelfde als voor de inhoud: ze moeten kwalitatief hoogwaardig, uniek en voor de gebruiker relevant zijn. Verder is het zinvol wanneer deze elementen pas geladen worden als de bezoeker ze aanklikt. Vooral bezoekers die een mobiel apparaat gebruiken of een slechte internetverbinding hebben, profiteren van goed gestructureerde websites die niet onnodig veel data verslinden.

Website-trends: succes op het internet

Benut website-trends voor succes op het internet

Als we naar de webdesign-trends voor 2018 kijken, is interactiviteit het sleutelwoord. Bovendien moeten websites in de toekomst nog gebruiksvriendelijker worden ingericht en snel toegankelijk zijn. Webinhoud wordt niet langer afzonderlijk aangepast aan verschillende toestellen, maar in het kader van responsive design geoptimaliseerd voor toesteloverschrijdende weergave.

Parallax-effecten en infinite scrolling zijn populaire stijlmiddelen die bezoekers op hun reis door de website moeten begeleiden. Een vergelijkbaar patroon biedt de website-trend interactive storytelling; de gebruiker krijgt de gewenste informatie niet zomaar voorgeschoteld, maar gepresenteerd als klein verhaal. Handgetekende illustraties, kwalitatief hoogwaardige achtergrondelementen en unieke typografie geven de website een persoonlijke touch. Het is belangrijker dan ooit om een websitebezoeker persoonlijk aan te spreken en op emotioneel vlak te raken. Een grondregel die niet nieuw is, maar nog altijd geldt: het creëren van een website die de gebruiker voorop stelt en kwalitatief hoogwaardige inhoud op een aantrekkelijke manier presenteert, is de eerste stap op weg naar succes op het wereldwijde web.

Ontwerp je op dit moment een eigen website of wil je je website graag vernieuwen? Laat je dan inspireren door de hierboven beschreven webdesign-trends voor 2018.

  • Gecertificeerde veiligheid

    Gecertificeerde veiligheid
  • Beste hostingbedrijf

    Beste hostingbedrijf
  • MKB Best Choice

    MKB Best Choice
  • Professionele support

    Professionele support
  • Hosted in Germany

    Hosted in Germany