10 webdesigntrends voor 2012

Euro- en begrotingstekorten. De wereld gaat failliet en ondertussen browset en surft diezelfde wereld er met steeds ruimere bandbreedtes en uiteenlopender apparaten op los. Welke kant gaat webdesign op in 2012? Op internet verwachten we eigenlijk weinig zuinigheid. We zien grote, ruime en rijke ontwerpen en inventieve animaties. Opvallend is een voorkeur voor zachtheid en nostalgie. We spotten tien trends voor het komende seizoen.

1. Lange homepages

In crisistijd gaat de roklengte omlaag. Gezien het economisch tij bevindt de voorgeschreven roklengte zich voor het nieuwe seizoen op de enkel. Websites volgen de trend. Waar we een paar jaar geleden vonden dat je op een homepage niet mocht scrollen, duikt de website van nu flink de diepte in. Natuurlijk vindt de bezoeker de kernboodschap bovenin, maar ‘onder de vouw’ kun je tegenwoordig zonder bezwaar nog heel veel kwijt. Lang leve het muiswieltje.

2. Omgevallen letterkast

De tijd dat we als webdesigners slechts met standaard browserfonts als Times New Roman en Verdana konden werken, ligt ver achter ons. Met de mogelijkheden van CSS3 en eventuele javascript-oplossingen heeft de ontwerper nu duizenden feestelijke lettertypes tot zijn beschikking. Een vrolijk omgevallen loodletterkast is het gevolg; de klassieke Bodoni vergezelt de Unbuntu Condensed en de zwierige Pinyon gaat hand in hand met de vette Ultra. Alles door elkaar: het kan en het mag.

3. Jaren ’50-kleurtjes

Het kleurpalet schrijft zachtheid voor in 2012. Roze, babyblauw en mintgroen voeren de boventoon. We kiezen voor pastel dat we vervolgens afpoederen. Sheer ignorant bliss: websites krijgen de onschuldige blijheid van een stoepkrijtende peuter op een lentemorgen.

4. Papier

Nu het boek en de krant definitief afgedaan hebben, zien we een nostalgische hang naar papier. Een beetje grafisch vormgever verandert pixels in een lijntjesschrift of handgeschept vel. Met name achtergronden van websites behangen we met het materiaal van weleer.

5. Grote illustratie op homepage

Helemaal passé zijn de schreeuwende homepages. Een kakofonie van klik hier, lees meer, check this en bestel nu heeft afgedaan. We willen rust en eenvoud. Een opkomende trend is de welgekozen illustratie. Eén plaatje zegt meer dan duizend woorden. Rust, reinheid en regelmaat: steeds meer organisaties beheersen zich en presenteren de kern van de zaak in één beeld.

6. De slider: een blijvertje

Onze klanten willen het zo graag: dat er iets beweegt op een homepage. Dat vrolijkt de boel zo lekker op. Aan flash doen we niet meer, want daarover struikelen telefoons en tablets. Gelukkig is er jQuery, daarmee kun je heerlijk animeren.

Om eerlijk te zijn, komt de homepage-slider ons wel een beetje de neus uit. We hebben hem als bureau al zó vaak toegepast. Echter, de klant is koning en die lijkt er voorlopig nog niet op uitgekeken. Aan ons de uitdaging om die eeuwige slider op een verfrissende manier toe te passen, want die blijkt in elk geval ook nog voor komend jaar een blijvertje.

7. Parallax

Een mooi nieuw animatie-effect waar we – in tegenstelling tot de slider – voorlopig nog niet op uitgekeken zijn, is de parallax. Ook deze animatie is javascript, dus doet het gewoon op alle apparaten. Verschillende lagen in een achtergrond of illustratie reageren verrassend op muisbeweging of scrollen.

8. Video in de background

De full-screen fotoachtergronden waren het vorig jaar al helemaal. De trend zet zich door, maar nu met video. Bewegend beeld in de achtergrond van je website is druk, dus deze trend is slechts geschikt voor een klein deel van de markt. Echter, voor mode, media of voor hippe retailproducten is de video background een gegarandeerd wow-effect.

Veel van deze video’s zijn gemaakt in flash: dus niet voor alle apparaten geschikt. Een alternatieve achtergrond, bijvoorbeeld met een filmstill biedt uitkomst. Er zijn ook mogelijkheden met jQuery en HTML5 maar deze zijn nog zó nieuw dat ik nog geen commerciële toepassingen ken.

9. Bewegende foto’s

Het is geen foto en geen filmpje, het is een cinemagraph. Cinemagraphs zijn foto’s waarbinnen een klein deel geanimeerd is. Het effect is fascinerend. Je vraagt je af waar je naar zit te kijken. De gebruikte techniek is die van de ouderwetse gif-animatie. Je zet een paar plaatjes achter elkaar en plaatst ze in een loopje.

Je ziet de cinemagraph nog niet veel. Ik verwacht ook niet dat deze trend de omvang zal krijgen van zoiets als de homepage-slider. Wij gaan de cinemagraph binnenkort toepassen. Ik hoop dat er meer bureaus zijn die hem dit seizoen inzetten: van een beetje subtiele raadselachtigheid heeft de wereld nooit genoeg.

10. Responsive webdesign

Een ontwikkeling die nog in de kinderschoenen staat is die van websites die zich aanpassen aan het apparaat waarmee je ze bekijkt: responsive webdesign. Als je de website benadert met een telefoon ziet hij er anders uit dan wanneer je hem op een desktop bekijkt. De website merkt op met welk apparaat hij bezocht wordt en laat op basis daarvan de juiste versie van zichzelf zien.

Bekijk de onderstaande websites en versmal het brouwservenster: schermopbouw, knoppen en illustraties passen zich aan, de hele website voegt zich.

Responsive webdesign vraagt een vrij radicale ontwerp-aanpak, daarom verwacht ik niet dat we vanaf januari 2012 zullen struikelen over dergelijke websites. Maar met de toenemende diversiteit van apparaten waarmee we websites gebruiken, kon dit toch wel eens een belangrijke trend zijn.

Zo, je bent weer helemaal bij. Niemand vertelt jou nog iets over wat hip is op internet.