Grafisch verantwoord en verleidelijk beeldgebruik op websites anno 2020

door Angelo Spiler | Last Updated:   24 juni 2020

Auteur: Angelo Spiler van Grafische Cursussen

Net als in de mode zijn er ook op grafisch gebied steeds nieuwe trends en technische mogelijkheden. Soms zijn het eendagsvliegen, soms hits die jarenlang de grafische vormgeving bepalen. In dit artikel komen een aantal van de trends uit de laatste jaren geïllustreerd aan bod. Wil je een trendy, professioneel ogende site? Lees dan mee met de volgende tips.

Niet recht maar schuin

Weet u hoe weinig websites curven of schuine lijnen laten zien? Héél weinig. De reden is niet omdat dit door bezoekers lelijk wordt gevonden (integendeel), maar omdat het toch wat extra’s vraagt om te implementeren. Dat is niet zo vreemd, want alle grafische software en html middels het DOM-model (Document Object Model voor styling van websites) zijn gebaseerd op rechthoeken. Als gevolg daarvan zul je dus een extra stap moeten maken om een foto, video of kleurvlak niet als rechthoek te laten verschijnen. Zo zul je bijvoorbeeld een foto in Photoshop vrijstaand moeten maken. Of een portret als een cirkel laten lijken door de hoeken van de rechthoek wit (of transparant) te maken.

“Curven en schuine lijnen zorgen voor een losser en relaxter gevoel bij de lezer.”

Dus het is mogelijk om een meer vloeiende website te maken, maar je zult iets extra’s moeten presteren. Voor webdesigners is HTML niet de beste vriend als het gaat om natuurlijke curven of schuine lijnen. Een trend van de laatste jaren is dat dit toch steeds vaker in websites voorkomt. En terecht, want curven en schuine lijnen zorgen voor een relaxter gevoel bij de lezer. Hier enkele voorbeelden.

Hero-images met schuine randen en curven

Casual stockfoto’s

Een andere, zonder meer positieve trend is het gebruik van casual stockfoto’s. En ja dit is iets nieuws! Natuurlijk is een goede huisfotograaf de beste optie, maar als de middelen beperkt zijn, dan kunnen stockfoto’s uitkomst bieden. Die hadden tot een paar jaar geleden wel een groot nadeel: je kon ze er direct uitpikken, te gladjes, te opzichtig, te bekend of te geforceerd. Gelukkig staan je tegenwoordig veel betere stockfoto’s ter beschikking. Kijk maar eens naar deze voorbeelden. Ze komen wat rauwer, minder afgewerkt en dus natuurlijker en origineler over.

de nieuwe generatie stockfoto’s

Duotonen

Terug van lang weggeweest: het gebruik van duotone afbeeldingen. Duotonen werden vroeger veel gebruikt voor covers van boeken. Dat gaf sfeer en was minder kostbaar als vierkleurendruk. Toen kwam de periode dat bepaalde films en series op televisie in een duotoon werden uitgezonden. Op websites zag je ze nauwelijks. Maar enkele voorlopers als Spotify en Webflow hebben een opvallende grafische trend gezet: extreme duotonen voor nieuwsbrieven en websites. Dus zeg maar duotonen 2.0. Deze nieuwe trend gaat eigenlijk tegen het goed gebruik in. Want ineens lijkt contrast er niet meer toe te doen.

Duotonen in websites en nieuwsbrieven

Infographics als blijvertje

Het begon met infographics maar die al langer bestaande trend heeft zich verder doorgezet naar explainer-video’s. Je loopt eigenlijk achter als je website op dit moment niet één of meer luchtige explainer-video’s bevat. Persoonlijk ben ik van mening dat de ‘fun’ en ‘luchtigheid’ van deze video’s regelmatig te ver doorslaan en ten koste gaan van de inhoud. Dit is echt gemaakt voor de YouTube-generatie. Ook de NOS kan er wat van.

Maar om terug te komen op infographics: ook die blijven onverminderd populair en worden graag ingezet om saaie onderwerpen te ‘verluchtigen’. Ze kunnen natuurlijk ook een groot didactisch nut hebben als ze op heldere wijze data laten zien. Je kunt geen jaarverslag of how-to-artikel meer lezen of de infographics komen je tegemoet. Terecht overigens want de huidige lezer kan geen webpagina zonder afbeelding meer pruimen.

Parallax Scrolling

Intussen ingeburgerd en met succes. Parallax scrolling is ook een blijvertje, maar de mate waarin het wordt toegepast zal wel afnemen. Sommige sites laten geen beeld voorbijgaan of het moet bewegen. Dit zie je wel vaker bij trends: in het begin wordt het massaal ingezet maar na verloop van tijd beoordeelt men het eerder functioneel. Voegt het iets essentieels in de beleving toe? wordt dan de terechte vraag. Er zijn sites waar parallax scrolling voor een professionele belevenis zorgen, maar er zijn ook talloze voorbeelden waar alle producten op alle pagina’s bijna monotoon van links en rechts de pagina invliegen. Vormgeving en marketing draaien om subtiele verleidingstechnieken, en daar voldoen deze pagina’s niet echt aan.

“Parallax Scrolling is nog steeds een succesnummer, maar gebruik het spaarzaam.”

Technische update voor logo’s

De laatste jaren is er op technisch vlak verbetering gekomen door het bestandsformaat ‘Scalable Vector Graphics’ (.SVG). Daardoor kunnen logo’s, iconen en tekeningen een stuk scherper op het web getoond worden. Niet alleen dat: SVG ondersteunt transparantie en zorgt voor minder kilobytes. Dus laat je logo’s in het oudere png- en (nog slechtere) jpeg-formaat omzetten naar SVG.

Wie een beetje aandacht besteed aan grafische vormgeving kan zijn site al snel (laten) upgraden. Soms zijn daar extra handelingen door een grafisch vormgever of webdesigner voor nodig, maar de lezer zal het altijd appreciëren. Wie zich in de kijker wil spelen, kan dat op bovenstaande manieren vrij eenvoudig realiseren.

Angelo Spiler (Heerlen, 1963) werkt sinds 1990 met Adobe-pro­gram­ma's en heeft tien jaar docent­erva­ring. Hij publi­ceerde inter­ac­tieve les­boeken over Pho­toshop, InDesign, Muse en Apple Key­note en blogt voor tech­site 42biz. Heeft een brede ken­nis van opmaak- en inter­net­tech­no­logie. Op­rich­ter van het plat­form Gra­fische Cur­sus­sen. Grafische Cursussen
content marketing ebook
Schrijf je in voor de b2b updates en ontvang gratis cheat sheet: Nummer 1 met Content Marketing 🏆.

We respecteren uw privacy, u kunt zich op ieder moment afmelden voor deze nieuwsbrief.