Webdesign trends 2014: het web gaat eindelijk los

Geen reacties
Tags: , , , , , , , , , ,
Posted 03 feb 2014 in nieuws

2014 wordt een heerlijk jaar voor webdesigners, want het web gaat eindelijk los. We leggen de beperkingen vanuit de oude media nu eindelijk echt naast ons neer. Niemand maakt zich meer druk over een grid van 960 pixels, want een website kan door de komst van al die verschillende schermpjes geen vaste maat meer hebben. We mogen weer scrollen. Zelfs horizontaal. ‘Above the fold, wat is dat?’

Mobile first

Het gebruik van smartphones en tablets is de laatste jaren enorm toegenomen en haalt het gebruik van desktops snel in. Dit jaar zal het gebruik van mobiele apparaten op het web alleen maar toenemen. Dit dwingt ontwerpers om goed na te denken over websites die een ideale gebruikerservaring geven op verschillende schermgroottes. Van wearables (draagbare apparaten) tot slimme televisies. Door ‘mobile first’ dwingen ontwerpers zich om prioriteiten te stellen. Helaas denken de meeste organisaties nog sterk ‘mobile second’. Maar voor de vooruitstrevende organisaties die technieken als responsive web design en progressive enhancement omarmen, biedt dit een groot concurrentievoordeel.

Mobile First

Minder tekst

Deze trend is tegenstrijdig aan een andere trend, namelijk die van steeds meer lange teksten die we verderop zullen behandelen. Maar met name in de gebruiksomgeving voor mobiele apparaten zien we een sterke toename van het gebruik van iconen en andere visuele hulpmiddelen om informatie snel en overzichtelijk weer te geven.

info interface

Minimalistische navigatie

Iets dat we de laatste tijd steeds vaker zien, is een tot op het bot uitgeklede navigatie. Uit noodzaak geboren bij het ontwerpen voor smartphones zien we minimalistische navigatie ook steeds meer bij desktopontwerpen. Bij de minimalistische navigatie maken ontwerpers veel gebruik van icoontjes, compacte navigatie, rolldowns en navigatie die zich automatisch verbergt zodra je gaat scrollen.

Medium minimal navigation

Cards / tiles

In onze blogpost van 10 oktober 2013 schreven we al uitgebreid over deze designtrend, die al wat langer aan de gang is en dit jaar verder doorzet. Zeker ook door de komst van nog kleinere schermpjes op horloges en uiteraard de Google Glass die helemaal is gebaseerd op cards. Lees ook dit artikel over waarom cards de toekomst zouden zijn van het web.

cards / monochrome design

Grote, bewegende achtergronden

Een trend die behoorlijk lijkt door te zetten dit jaar is die van de grote, bewegende achtergronden. Sommige zelfs met video-achtergronden, zoals dit prachtige artikel Firestorm uit The Guardian duidelijk maakt. En andere trend betreft grote foto’s die animeren. Vaak in reactie op scrollen of andere interactie. Een fraai voorbeeld hiervan is de website van Protest. Deze prachtige ervaringen op de desktop zijn wel wat lastig te vertalen naar smartphones. Een mooie uitdaging voor de ontwerpers van responsive websites.

Protest - grote afbeeldingen

Micro UX

Vergaande aandacht voor fijne details kunnen van een website een bijzondere ervaring maken. Micro UX-effecten kunnen een website echt tot leven wekken met menu’s, transities en andere kleine interacties om je vingers bij af te likken. Een mooie verzameling voorbeelden vind je hier. En wat dacht je van deze bijzondere voortgangsindicator van The Daily Beast.

Micro UX

Haal meer uit een pagina

We zien ook steeds meer websites die uit één pagina bestaan. Door middel van light boxes, overlays en cards die groeien, krimpen en verplaatsen beperken deze ontwerpen het aantal clicks in de user journey.

Hyperkleurrijk

Omdat flat design soms wat saai dreigt te worden, grijpen veel ontwerpers tegenwoordig naar het gebruik van heel veel kleuren. Iets wat dan gelukkig vaak ook heel goed werkt bij flat designs.

Hyperkleurrijk

Grotere, betere afbeeldingen

Minimalistische ontwerpen stellen de content centraal. En dat is een grote verbetering ten opzichte van de websites waarbij de elementen van de website zelf vaak alle aandacht opeisen (niet zelden om te verhullen dat de inhoud niet veel voorstelt. Gevolg van deze trend is wel dat de kwaliteit van de content veel meer het totale beeld bepaalt. Ontwerpers kiezen daarom vaak voor grotere, betere afbeeldingen. Een prima ontwikkeling, al is het wel oppassen bij responsive websites dat smartphonegebruikers worden geconfronteerd met te lange laadtijden.

grote afbeeldingen

Flat design zet door

Een trend die flink op de kaart is gezet door Microsoft met Windows 8, en later ook door Apple is overgenomen met iOS7, is flat design. In navolging van deze twee digitale reuzen zien we flat design steeds vaker opduiken en die trend zet dit jaar zeker nog flink door. Bij B2B-websites ligt een flat design al snel voor de hand omdat het zakelijk overkomt en toch door middel van kleurgebruik sympathiek oogt. Deze trend krijgt ook een flinke steun in de rug van Responsive Web Design, omdat het gebruik van flat design het ontwerpen van responsive websites minder ingewikkeld maakt.

Flat design

Monochroom design

Een duidelijke trend van de laatste tijd is het gebruik van slechts twee kleuren in diverse gradaties. Het oogt rustig en chique en het zorgt voor een zakelijke uitstraling. We zien het ook veel bij online tools die mensen vaak gebruiken, zoals kalenders. Het geeft de mogelijkheid om belangrijke zaken goed op te laten vallen.

monochroom / minimalistisch design

Fixed position content / navigatie

Om belangrijke content en of navigatieonderdelen altijd in beeld te houden, zien we een toenemend gebruik van fixed position-technieken. Deze zorgen ervoor dat de content of navigatie altijd in beeld blijft terwijl de bezoeker scrollt. Soms verkleint de navigatie wel om minder in de weg te zitten, zodat je hem weer kunt vergroten door op een icoontje te klikken wanneer je dat wilt.

Awwwards - fixed position navigation content

Lange content

Haaks op de eerder genoemde trend van minder tekst, staat de wederopstanding van langere artikelen en video’s. Mensen krijgen inmiddels negen keer zoveel informatie voor hun kiezen als vijf jaar geleden, dus de eerste reactie van veel uitgevers was om ontent in steeds kleinere, hapklare brokjes aan te bieden.

Maar uit onderzoeken blijkt dat websites met veel, lange content het vaak veel beter doen in de zoekresultaten van Google en vaak ook beter converteren. Het effect van de enorme aanwas van informatie die mensen over zich heen krijgen is blijkbaar niet alleen dat ze steeds meer informatie in dezelfde tijd willen consumeren en dus kiezen voor hapklare brokken. Veel mensen kiezen juist voor diepgang. Ze willen hun beperkte tijd het liefst besteden aan content waar ze wijzer van worden. Daarom verwachten wij in 2014 een toename van lange, gedetailleerde content ten koste van de inmiddels wat obligate lijstjes van “7 manieren om… etc.”

Medium long form copy

7 manieren SERP

Meer scrollen

De term ‘above the fold’ horen we gelukkig steeds minder. Scrollen mag weer! En terecht. Een website is geen krant. Scrollen hoort bij het web. En helemaal bij het mobiele web. En op smartphones is scrollen, oftewel swipen, bijna altijd noodzakelijk en niemand heeft er meer moeite mee. Ontwerpers schudden dan ook in rap tempo het juk van ‘above the fold’ van zich af en maken steeds fraaiere lange webpagina’s waarin het scrollen en swipen een plezier is. Gelukkig maar, want waarom zouden we ons laten beperken door verouderd gedachtengoed? Alleen is het met al teveel scrollen wel oppassen geblazen, vooral met infinite scrolling.

Rijkere content ervaringen

Een combinatie van de meerdere hierboven genoemde trends is die waarbij webpagina’s steeds rijkere multimediale ervaringen worden. Door tekst te combineren met afbeeldingen, video, interactieve functies en het nodige scrollen ontstaan prachtige presentaties. Hier laten we duidelijk de traditionele media los om de kracht van het web veel beter te benutten. Tijd- en dus ook geldrovend om te maken, en dus niet voor iedere organisatie weggelegd.

rich content espn grantland

Mooiere voorbeelden?

Omdat we zo gericht op zoek zijn gegaan, is deze lijst zeker niet compleet, maar we hopen dat jij er op jouw beurt weer inspiratie uithaalt. En als je zelf nog mooiere voorbeelden weet, deel ze met ons hieronder in de reacties!



Lees het volledige bericht op Emerce »


Add Your Comment