18 fotografieprincipes voor een visueel overtuigende website

18 online fotografie principes

Fotografie geeft in één blik de juiste boodschap weer: de emotie, het verhaal, het doel en de voordelen. Het samenspel met scherpe bondige copy versterkt het beeld. Belangrijk, want binnen 7 seconden moet het duidelijk zijn voor een bezoeker: wat heeft deze website mij te bieden? In dit artikel beschrijf ik kort 18 fotografieprincipes om tot een visueel overtuigende website te komen.

Alles draait om de juiste focus. In de fotografie zijn er drie manieren om een focus aan te brengen in beeld: scherptediepte, bewegingsonscherpte en perspectief.

1. Focus door scherptediepte

Scherptediepte geeft het contrast in scherpte aan: het scherpe object komt los komt van de wazige achtergrond en springt naar voren. Dit creëert rust in een groot beeld en de mogelijkheid om tekst te kunnen plaatsen. Zo versterkt de copy het beeld zonder dat het visueel concurreert met de achtergrond. Vooral door de groei van apps en services wordt er steeds meer gebruik gemaakt van een scherp object met een vage achtergrond.

De focus ligt op de telefoon door de sterke toepassing van scherptediepte
http://www.bakkenbaeck.no/

Focus hoeft niet altijd in het beeld zelf te liggen: het beeld kan ook ondersteunend zijn aan tekst. In dat geval is een totale blur of waas een mooie oplossing om met de juiste sfeer de focus te leggen op de textuele boodschap.

De focus ligt op de tekst door de achtergrond vaag te maken
http://www.ringvemedia.com/

2. Focus door bewegingsonscherpte

Vooral bij auto’s, sporters en muzikanten is beweging de kracht van het beeld. Door tijdens het fotograferen met het object mee te bewegen ontstaat er een onscherpte van de beweging om het object heen: bewegingsonscherpte. Hierdoor springt het object uit de foto en word je in de foto gezogen. Deze onscherpte creëert rust om het object heen kan weer goed gebruikt worden om tekst op te plaatsen.

De focus ligt op de auto door de sterke toepassing van bewegingsonscherpte
http://www.landrover.com/nl/nl/lr/

3. Focus met behulp van perspectief

Door foto’s uit een andere hoek te schieten kan het accent in een foto verplaatsen en het beeld interessanter maken. Vooral bij productfotografie kan dit goed werken.

De focus ligt op het beton door een sterke toepassing van perspectief http://www.beton-cire.nl/

4. Regel van derden: sterker en dynamischer

Symmetrie werd lang geassocieerd met schoonheid. De vorm is eenvoudig en makkelijk te herkennen. Symmetrische mensen worden ook als aantrekkelijker gezien. Het geeft balans, harmonie en stabiliteit. Een nadeel is dat het in een ontwerp ook statigheid en saaiheid kan uitstralen. Daarom is het esthetisch om juist van het midden af te wijken met de regel van de derden. Zo wordt het beeld sterker en dynamischer. Verschuif daarom de focus op een derde van een foto. Zo ontstaat er ook ruimte voor andere elementen.

Beeld met de focus op een derde. Op elk kruispunt van de lijnen kan deze focus geplaatst worden
https://soundcloud.com/

5. Laat ogen kijken naar de call to action

Een mooi onderzoek laat zien dat je ogen automatisch naar andere ogen getrokken worden. Echter, als een persoon ergens naar kijkt, dan kijk je daar ook naartoe. Zo kun je de bezoeker naar de juiste plek laten kijken.

De ogen van kijker kijken mee met de ogen van de baby http://usableworld.com.au/2009/03/16/you-look-where-they-look/

6. Laat mensen of producten binnen de website ‘kijken’

Mensen die uit beeld kijken ondersteunen de boodschap minder. Spiegel daarom de richting van producten of mensen naar het midden van de website. Producten hebben in hun vorm ook een richting. In de twee voorbeelden kijkt de vrouw in en uit het beeld: de tweede versie werkt beter. Bovendien kijkt ze de naar de call to action. Daarnaast impliceert een blik naar links het verleden en een blik naar rechts de toekomst.

Laat de ogen binnen het beeld kijken
http://women.g-star.com/signup

7. Gebruik (complementaire) kleuren uit de huisstijl

Laat de foto samenwerken met de huisstijl door de kleuren over te nemen. Ook complementaire kleuren kunnen hier goed bij werken. In het geval van Bits of Freedom (zie voorbeeld hieronder) zou bij de kleur groen de complementaire kleur magenta (felle roze-paarsachtige kleur) goed werken in het beeld. Deze wordt ook gebruikt voor de call to action ‘WORD DONATEUR’. Pas hierbij wel op dat de call to action wel onderscheidend blijft zodra deze kleur ook in het beeld terugkomt.

De kleuren van de foto volgen de huisstijl https://www.bof.nl/

Bang & Olufsen gaan met Beoplay zelfs zo ver dat je in de website de kleur van het product kunt wijzigen, waarna alle contextproducten ook automatisch meeverkleuren. Erg mooi gemaakt.

Klanten laten spelen met kleur en context http://beoplay.com/Products/BeoplayEarset3i#at-a-glance

8. gebruik verloopjes over foto’s heen

Door verloopjes over beeld heen te leggen ontstaat er een rustige en zachte overgang van het beeld. De rechthoekige harde afkadering wordt hiermee losgelaten. Het beeld krijgt meer diepte door de vignettering: het donkerder worden van de hoeken van een foto. Weer ontstaat er zo een rustige plek om tekst neer te zetten.

Het gebruik van een verloop naast het beeld geeft ruimte voor tekst
http://www.sidlee.com/

Vignettering over het beeld voor een diepte effect
http://www.miessociety.org/

9. Context matters

Een product staat bijna nooit los. Zeker niet nu er steeds slimmere, servicegerichte producten op de markt komen. Nest laat op een mooie manier zien hoe een, in eerste instantie niet-sexy product, toch heel mooi neergezet kan worden. Door te scrollen wordt deze slimme thermostaat visueel uitgelegd.

Nest weergegeven in de juiste context
http://www.nest.com/

In kleding en lifestyle is context nog belangrijker. Only gebruikt (interactieve) film om de juiste context weer te geven. Het beeld stopt als je op de kleding klikt waarna je meer informatie over het desbetreffende kledingstuk krijgt.

De producten weergegeven in film context
http://www.onlybecausewecan.com/

10. Laat zien hoe het werkt

Alsof een vriend je laat zien hoe zijn thermosstaat werkt, zie je daadwerkelijk hoe de hand de Nest app bedient en wat het effect is. Helderder kan bijna niet.

De werking met een bewegende hand glashelder uitgelegd www.nest.com

11. Laat de USP’s zien

Laat met gecombineerd beeld en tekst zien waarom je product onderscheidend is; toon de unique selling points. Nike doet dit door middel van plusjes op de producten.

De USP’s uitgelicht in de product foto met plusjes
www.nike.com

12. Zoomen en draaien: maak het product tastbaar

Nike geeft je de optimale productervaring; het product is vanuit meerdere hoeken te bekijken en bij het vergroten van het product vult de website het gehele scherm. Om de gebruiker niet te laten schrikken, wordt er vemeld dat je met escape weer terug kunt komen bij het eerdere scherm.

Het roteren en inzoomen op het product voor een optimale productervaring
www.nike.com

13. Wees consistent

Fotografeer alle producten op dezelfde manier met hetzelfde licht in de studio. Nike heeft alle kledingstukken in dezelfde hoek gefotografeerd met een witte achtergrond, waardoor het een rustige en overzichtelijke pagina wordt.

Alle producten consistent in beeld zorgt voor rust
www.nike.com

14. Details matter

Details geven een gevoel van afwerking en luxe. Vanmoof komt er gelijk mee binnen op de homepagina: het merk op de fiets ingegraveerd maakt menigeen trotse fietsenbezitter blij. Spelen met scherptediepte levert een extra sterk effect op.

Details geven een gevoel van kwaliteit
www.vanmoof.com

15. Laat de menselijke maat zien

Niet bij alle producten is het duidelijk wat het formaat precies is. De nieuwe app Lapka slaagt er extreem goed in om het product met hele minimale middelen helder en fris uit te leggen. De grootte van het apparaat is goed in te schatten bij het zien van de hand.

De handen laten zien hoe groot het product daadwerkelijk is
https://mylapka.com/

16. Laat zien wat je doet

Vooral technische partijen en services hebben er baat bij een gevoel te geven wat ze nou eigenlijk doen. Laat craftmanship naar boven komen. Techniek is niet lelijk.

Techneuten maken tastbaar wat ze doen
http://www.quintaingenieria.com

Ook Maersk is er goed in geslaagd een gevoel te geven van de grootsheid van de schepen en olie door gebruik te maken van een bewegende achtergrond, iets wat mensen normaal niet zien.

Maersk maakt tastbaar wat ze doen met een filmisch beeld
http://www.maerskfleet.com/

17. Speel met paralax

Paralax in websites, een term oorspronkelijk uit de fotografie, laat de gebruiker scrollen waarbij objecten ongelijk verplaatsen waardoor er een gevoel van diepte ontstaat. Om dit te bereiken, moeten de objecten los uitgeknipt worden en is een goede samenwerking vereist tussen de bouwers, designers en fotografen. Het resultaat mag er zeker zijn:

paralax

Mooi voorbeeld van een paralax website inze.it
http://inze.it/

18. Creëer eenheid met fotografie

Zorg dat de fotografie herkenbaar is door alle kanalen heen, online en offline. En ook binnen elk kanaal en vooral binnen de website. Begin daarom vroeg met het totale fotografieconcept; een van de grootste uitdagingen. Kies principes die goed werken voor je product of dienst en pas die consequent toe. Zo ontstaat er een serie met een bepaald thema. Een familie van beelden die anders zijn, maar toch bij elkaar horen en herkenbaar zijn voor het merk.

Zoek naar de gemeenschappelijke deler van je boodschap. Vertaal dit naar consistentie in het beeld. Denk aan overal dezelfde soort kleuren, alles vanuit een zelfde hoek geschoten, zelfde object, zelfde type mens, zelfde soort lichtgebruik, zelfde soort compositie, zelfde soort focus, zelfde locatie, zelfde context, zelfde thema of een zelfde uitstraling.

Herkenbaar blijven de beelden van Suit Supply. Ook al is de controversiële campagne Shameless alweer 2 jaar geleden, het concept blijft consistent werken op de huidige website: een spannend beeld van een man in pak met een mooie schaars geklede vrouw.

suit supply

Suit Supply – sterk fotografieconcept

Deze 18 principes dekken natuurlijk nog lang niet alles. Graag hoor ik welke principes nog meer goed werken.

Interessant?

Lees dan ook onze andere artikelen over , , , , , , , , , , , , .

Reacties

  1. Interessant artikel met zeker een aantal zeer goede tips. Bijvoorbeeld de kijkrichting naar de cta.

    Waar haal je trouwens vandaan dat een kijker binnen 7 seconden beslist op basis van een foto. Heb je een link naar een onderzoek?

    1. Hoi Sander,

      Dank je wel voor je reactie.

      Ik heb de 7 seconden gevonden op http://www.siggyvolgt.nl/2011/02/de-7-seconden-regel.html?m=1, wat vervolgens weer is gebaseerd op het volgende onderzoek:
      http://www.marketingexperiments.com/whitepapers/MEx-Clarity-Trumps-Persuasion.pdf

      Je vraag impliceert dat de 7 seconden op basis zijn van een foto maar ik bedoelde het op basis van de gehele website.

      Klein grappig zijsprongetje: bij kunst is de gemiddelde kijktijd 9 seconden:
      http://nos.nl/artikel/424148-kunsthal-meet-kijktijd-bezoekers.html

      1. Bedankt voor de info!

  2. Ik mis de (interactieve) panoramafotografie, juist omdat die het zo goed doet op de schaal van betrokkenheid.

    Willem Maatman

    1. Hoi Willem,
      Zou je hier een mooi voorbeeld van kunnen geven?
      Bedankt!

  3. Inspirerend artikel. Zelf afgelopen jaar bezig geweest met beperkte middelen mijn website zoveel mogelijk aan te kleden met foto’s. Of dit gelukt is, moeten andere maar beoordelen. Jouw artikel ga ik zeker gebruiken om in de toekomst verbetering aan te brengen. Dank

    Emile Wieman

  4. Interessant artikel, zo zie je echt dat er veel verschil en hoe belangrijk foto’s wel niet zijn.

  5. Leuk artikel met nuttige inzichten. Jammer van die foto bij drie. De nadruk ligt weliswaar op dat betonblad maar het perspectief klopt juist niet. Alle verticale lijnen staan schots en scheef en het wit is helemaal wit uitgebeten. De structuur en de aanwezige spiegeling op het blad gaat helemaal verloren! Dat laat overduidelijk zien: foto van een amateur.

    1. Hoi John en Thomas,

      ja, ik moet jullie wel een beetje gelijk geven. Het ging me bij deze foto vooral om de nadruk die het beton krijgt door het standpunt. Het wit is inderdaad helemaal wit uitgebeten, verblindend. Het zou ook beter zijn als je de details van het beton goed zou kunnen blijven zien, aangezien het daarom gaat. Ik denk dat de sfeer vooral belangrijk en bepalend was in deze foto.
      Floor

      1. Sfeer is mooi en belangrijk, maar hier word het eigenlijke product slecht afgebeeld. Dat lijkt me nooit de bedoeling.

  6. Het perspectief van foto drie klopt van geen kant. Je ziet alleen de onderkant van de rug…

  7. Ik kan mij helemaal vinden in een hoop van bovenstaande opmerkingen. Wij hebben onlangs een fotoshoot gehad om sfeerbeelden te maken bij een simpel product: een wit T-shirt. Dat lijkt eenvoudig, maar dat valt nog best tegen. Maar het is in ieder geval gelukt! De resultaten zijn binnenkort te zien. Ik ben er van overtuigd dat die foto’s zullen helpen bij het stimuleren van sales. De kwaliteit van de hoogwaardige foto’s stralen kwaliteit uit en hopelijk linken de bezoekers dat ook met de kwaliteit van onze shirts zien. Als je onze huidige foto’s van onze shirts ziet, dan kan het ook om een shirtje van de Wibra gaan. Foto’s doen een hele hoop!

  8. Leuk artikel! Ik ben weer aan een opfrissing voor mijn website toe en denk dat ik ideeën wel tot iets origineel kan komen.

  9. Mooie, herkenbare voorbeelden die grotendeels juist ook in B2B om toepassing vragen. Ik ben het eens met John mbt foto #3. En oneens met de stelling bij die foto: “de focus ligt op het beton”. Ik zou graag de resultaten van eye-tracking willen zien (bij mannen en vrouwen). En kan me niet aan de indruk onttrekken dat de focus daar uitgaat naar het model in het licht (en die is niet van beton).

    Het boek Neuromarketing van Patrick Renvoise en Christophe Morin illustreert daarnaast een aantal best practices als het gaat om het (visueel) bereiken van het zogenaamde reptielenbrein van de klant of prospect. Het werken met contrast (zonder of met een bepaalde oplossing), emoties en het ik-perspectief (ons instinct is primair op eigen overleven gericht) zijn daarvan voorbeelden. Zie ook deze toelichting, die voor een groot deel ook op fotografie van toepassing is: http://dutchmarq.nl/raakt-jullie-b2b-website-de-koopknop-in-het-brein-van-de-klant/

  10. Dank voor je boeiende artikel Floor. Voor degenen die zelf de productfotografie voor hun website (willen) verzorgen heb ik een leerzaam artikel geschreven dat mooi aansluit op jouw verhaal: http://artikelpost.nl/webdesign/14-tips-voor-het-maken-van-professionele-productfotos-voor-websites.html

Plaats een reactie

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn met een * aangegeven.

Verschijnt je reactie niet, dan is deze mogelijk in de spam terechtgekomen. Mail ons dan even!