mindful marketing & inspired internet

Blog

Wat ons zoal bezighoudt...
10 trends webdesign

10 zichtbare trends in webdesign (…that are here to stay)

2014 is inmiddels al weer aardig op weg om een mooi jaar te worden. Dit geldt ook zeker op het vlak van webdesign. We merken duidelijk dat het web de afgelopen jaren een aantal flinke stappen naar volwassenheid gezet heeft en daar plukken we nu de vruchten van. Er is veel ten goede veranderd op het gebied van standaarden en hulpmiddelen om betere websites te ontwikkelen. Voor eindgebruikers betekent dit onder andere dat websites beter werken op verschillende apparaten, zoals desktop en mobiel. Voor onze klanten betekent dit dat er meer mogelijk is voor minder geld. En voor onszelf, als ontwerpers, ontwikkelaars en schrijvers, betekent dit dat we met nóg meer plezier nóg mooiere producten mogen maken.

In dit blog benoemen we 10 trends die volgens ons de status van trend zullen overleven om als best practice verder te gaan. Concreet houdt dit in dat ze het stadium van experimenteren (soms al een tijdje) voorbij zijn en daarom rijp zijn om toegepast te worden voor serieuze websites.

1. Responsive webdesign: device onafhankelijk ontwerp

Inmiddels een “oude” bekende die niet snel van het speelveld zal verdwijnen. Responsive Web Design (of “device agnostic” design, ik scheer ze maar even over dezelfde kam), vaak afgekort als RWD, zorgt ervoor dat een website zich automatisch aanpast aan de afmetingen van een scherm. Ongeacht of de responsive site via een mobiele telefoon of via een desktop bekeken wordt: de ervaring voor de gebruiker zal zo optimaal mogelijk zijn. In de praktijk betekent dit dat de elementen op de website zichzelf automatisch herorganiseren, afhankelijk van de schermgrootte, zodat de bezoeker de pagina niet zelf hoeft te vergroten of verkleinen om hem beter in beeld te krijgen. Soms worden bepaalde delen weggelaten op kleinere schermen of verandert de werking van het menu (zodat het vriendelijker is voor touch devices). Mooi toch?

Onderdeel van de aanpak om tot een responsive site te komen is dat een deel van het ontwerp in de browser plaatsvindt. Een moderne responsive website heeft volgens de populaire aanpak vier verschillende afmetingen en de daarbij behorende visuele lay-outs. Het is daarmee inefficiënt(er) geworden om elke variant vooraf (in bijvoorbeeld Photoshop) grafisch te ontwerpen. De rollen van ontwikkelaar en ontwerper versmelten meer en meer in de rol van de webdesigner, die zowel de visuele als technische kant voor zijn rekening neemt. Dit is mogelijk een game changer voor bureaus, want een inhoudelijke technische basis zal onmisbaar worden voor ontwerpers in de komende jaren.

Lees meer over responsive design in ons eerdere artikel hierover.

2. Flat design versus skeumorphic design

De Amerikaanse station-wagons met van die pseudo-houten panelen, wie kent ze niet (doesn’t ring a bell? Klik hier en huiver)? Dit is een uitstekend voorbeeld van skeumorphisme: het nabootsen van de werkelijkheid door zo goed mogelijk “net alsof” te doen. In webdesign vertaalt dit zich in knoppen met schaduw en andersoortige 3d-effecten of bijvoorbeeld een “brushed metal look”. No more, want toen kwamen Windows 8 en iOS 7 en nu doet iedereen flat design. Flat design is de kunst van het weglaten van alles dat bij skeumorphic design, of web 2.0, als trendy gezien werd.

Hoewel flat nu helemaal hot is, verwachten we dat de trend op termijn ergens tussen flat design en skeumorphic design zal uitkomen. Lees meer over flat design in dit artikel.

3. Lange, scrollbare pagina’s en websites

Dankzij snellere computers, telefoons (in de categorie nutteloze weetjes die het goed doen op verjaardagen: een moderne mobiele telefoon is 15x sneller dan de Cray-1 supercomputer) en internetverbindingen openen zich nieuwe mogelijkheden voor websites. Eén trend die aanhoudt is die van de lange(re) webpagina’s. Langere pagina’s betekent meer informatie, meer graphics en minder paginawissels voor de bezoekers.

Een afgeleide hiervan is de one page website, waarbij de hele website uit slechts één lange pagina bestaat. Zoals ik eerder schreef is dit niet ideaal voor de vindbaarheid van een website (zie Google), maar kan het zeker interessant zijn als het een gericht doel dient en er nauwelijks keywords nodig zijn om gevonden te worden. Lees meer erover in dit blog over één pagina websites.

4. Parallax-effecten

Parallax-effecten zijn van alle tijden (ze herinneren mij aan mijn eerste C= Amiga 500 computer in 198x, oh joy, 12 lagen parallax, hoe cool was dat) en nu ook terug te zien in websites. De term “parallax” wordt gebruikt om enkele overlappende lagen aan te duiden die op verschillende snelheden ten opzichte van elkaar bewegen. Zo ontstaat een illusie van diepte. Een voorbeeld van een site waarin we dit toepassen is hier te zien.

Parallax in websites is nu mogelijk dankzij snellere (grafische) processors en maakt de ervaring voor de gebruiker interessanter, mits goed toegepast (soms irritanter, als niet goed toegepast).

5. Minder tekst, meer afbeeldingen

De concentratie van een bezoeker is nog nooit zo kort geweest. Als we deze site mogen geloven is de attention span van een website bezoeker momenteel lager dan die van een goudvis (!). Good morning. Omdat veel webdesigners hiervan op de hoogte zijn, worden teksten op sites korter gehouden (dit blog niet meegerekend) en wordt er meer gebruik gemaakt van afbeeldingen. Omdat de lengte van de aandachtsspanne een neerwaartse trend is, zullen websites hierin meegaan, verwachten wij.

Het blijft natuurlijk belangrijk om kwalitatieve inhoud aan te bieden, zodat een site interessant blijft voor bezoekers en goed indexeerbaar door zoekmachines. Wat meer dan ooit geldt: content is king (zie punt 10).

6. Alles wordt groter: schermafmetingen, letters, inputs, buttons, witruimte

Tegenover de trend dat mobiele telefoons steeds krachtiger worden en sites zich dus responsive (zie punt 1) gaan gedragen, staat het feit dat monitoren steeds groter worden. Responsiveness werkt daarom twee kanten uit. Vroeger (ehm, vorig jaar) was een 960 grid (een lay-out met een breedte van 960 pixels gericht op resoluties van maximaal 1024 pixels breed) nog een richtlijn voor het ontwerp van websites. No more. Het is tegenwoordig verstandig om (ook) rekening te houden met resoluties van 1200 pixels breed en meer. De statistieken liegen er niet om.

De hogere resoluties en het minimalistisch(er) design zorgen ervoor dat er grotere letters en meer witruimte gebruikt worden. Daarnaast is de explosie van touch screens (denk: mobiles, tablets, Windows 8 en Minority Report) ervoor verantwoordelijk dat knoppen en invoer-velden groter worden, zodat ze ook gemakkelijk via touch bediend kunnen worden. Dit zal, als het aan ons ligt, dus niet snel veranderen.

7. Grote afbeeldingen en achtergrondvideo’s

Dankzij de snellere internetverbindingen en processors, kunnen we grotere afbeeldingen en video’s tonen op websites. Een mooi overzicht van voorbeelden is hier te vinden. Video is een prima manier om mensen langer op je site te houden en ze gericht te informeren.

8. Tegels of (dynamic) grid lay-out

Een belangrijke trendsetter voor (dynamic) grid lay-outs is het social network Pinterest (online sinds 2010). In grid lay-outs worden afbeeldingen, mogelijk in combinatie met tekst, op overzichtelijke wijze naast en rond elkaar gepresenteerd. Als voordeel ten opzichte van een “klassieke” verticale lay-out (waarbij de artikelen onder elkaar getoond worden) biedt deze lay-out een grotere hoeveelheid diversiteit in één scherm. Dankzij responsive-technieken is het daarnaast mogelijk om in alle resoluties een beeldvullende presentatie te maken.

Mocht deze uitleg enigszins verwarrend zijn: enkele voorbeelden van sites waarin we een grid lay-out hebben toegepast zijn de sites van Max Vicca, The Fungroup en FAC Belgium. Kortom, een prachtige vondst, grootgemaakt door Pinterest (denken we).

9. Animatie

Dankzij de opkomst van nieuwe standaarden (onder andere CSS3) is het steeds gemakkelijker om nette animaties toe te voegen aan websites. (Adobe) Flash is al een tijdje heel erg 2007 en de alternatieven staan te dringen om de plaats van Flash in te nemen (en zeggen dat iets heel erg 20xx is, is trouwens erg 2013 inmiddels). Nu standaarden en, met name, browsers volwassener worden, zien we ook animaties op websites toenemen. Dankzij javascript libraries als jQuery is het zelfs voor minder ervaren webdesigners gemakkelijk om “iets” met animatie te doen.

10. Interessante inhoud

Tenslotte zien we dat goede inhoud onveranderd belangrijker is. Ik schreef het al eerder: content is (meer dan ooit) king. Uiteindelijk kan een website nog zo mooi zijn, technisch en visueel perfect, zonder goede inhoud is het geen zinvol middel. Zonde van de investering.

Over de concurrentie op het internet hoeven we het niet te hebben. We zien dat de intelligentie van Google, nog altijd het belangrijkste middel om bezoekers op je website te krijgen, elk jaar enorm groeit. Vergeet alle truukjes, schrijf goede teksten, bied interessante content aan, zorg dat bezoekers het kunnen en willen delen. Wees authentiek: schrijf, videoblog, fotografeer, teken, I don’t care, maar doe het als een mens voor andere mensen. Dat werkt gegarandeerd en die trend zal niet snel voorbij gaan. Have fun!