De laatste trend in webdesign: Parallax maar dan net even anders - Vance

Nu aan het lezen

De laatste trend in webdesign: Parallax maar dan net even anders

De laatste trend in webdesign: Parallax maar dan net even anders

Wie net als ikzelf in het dagelijks leven websites designt, heeft vast de afgelopen jaren de nodige pagina’s met ‘parallax’ effect ontworpen. Parallax is een populaire animatiestijl, waarbij het lijkt alsof je over een afbeelding heen scrollt, in plaats van dat hij meebeweegt: De afbeelding lijkt stil te staan, of vertraagt te bewegen, terwijl de website verder scrollt. Of verschillende objecten op de pagina lijken met een langzamere snelheid te bewegen dan andere. Zie het voorbeeld hieronder:

parallax-effect

Alhoewel veel opdrachtgevers niet precies weten hoe het heet, krijg ik maar al te vaak de vraag of ik zo’n ‘bewegende achtergrond’ in een webpagina kan verwerken. De term parallax komt oorspronkelijk uit de game industrie, waar het gebruikt werd om een soort 3D effect in platte 2D games te verwerken lang voordat dat de standaard werd. Zoals bijvoorbeeld in deze sequence uit Super Mario:

parallax-scrolling-mario

Parallax effect in webdesign wordt inmiddels alweer een aantal jaartjes toegepast in webdesign, dus het nieuwe is er inmiddels wel een beetje af. Maar er zijn nieuwe ontwikkelingen die het effect weer helemaal up-to-date maken. We verzamelden hieronder een aantal voorbeelden daarvan.

De belangrijkste ontwikkeling is dat parallax effecten al lang niet meer alleen maar gebruikt worden om een achtergrond te laten ‘bewegen’. De meest gebruikte parallax toepassingen creeeren vaak een soort ‘slideshow’ effect, zoals ook in bovenstaand voorbeeld te zien is. Maar nieuwere integraties van de techniek denken veel minder vanuit losse ‘slides’, en veel meer vanuit een naadloos totaaleffect.

Fluïde effect

Screen Shot 2016-02-01 at 14.48.19

Check bijvoorbeeld dit mooie voorbeeld van design studio SFCD, waarin parallax op de gehele homepage gebruikt wordt in een soort van longscroller: Er gebeuren tijdens het scrollen meerdere parallax effecten op hetzelfde moment, waardoor de hele site een dynamischer en fluïde uiterlijk krijgt. Zo veranderen niet alleen de afbeeldingen, maar ook de achtergrond van kleur.

Kleurverandering

Screen Shot 2016-02-01 at 14.51.45

Ook op de website van Sway Water zien we kleurverandering in de website terugkomen als special effect wanneer we beginnen te scrollen. Daarnaast maakt deze site een gedeelte van het parallax effect transparant, waardoor er een soort doorkijkraster over de site komt te liggen. Maar het is met name het veranderende kleurgebruik dat deze site veel meer tot één geheel maakt.

Felle kleuren, grote letters

Screen Shot 2016-02-01 at 14.58.23 Screen Shot 2016-02-03 at 20.45.28

Overall zien we een grote trend in webdesign voor 2016: Felle kleuren en grote letters. Zie bijvoorbeeld deze erg mooie site van Publicis of dit voorbeeld van True Digital en deze pagina van Your Primer. Deze stijl past goed bij homepages waarop bedrijven veel verschillende informatie kwijt willen: Door de verschillende kleuren wordt duidelijk onderscheid gemaakt tussen verschillende contentblokken en functionaliteiten.

Links via DesignModo

Marjolijn Kamphuis is Creative Director bij OK GO en hoofdredacteur van Vance.nl. Ze schrijft onder meer over technologie, media innovatie, inspiratie en creativiteit.

Meld je aan voor de nieuwsbrief.