Share
Fotografische afbeeldingen trekken onze aandacht en veroorzaken een bijna onmiddellijk antwoord wanneer we ze tegenkomen. Ze vormen daarom een belangrijk onderdeel van elke website die we maken. Foto's spelen een belangrijke rol bij het bepalen van onze eerste indruk, maar ze kunnen ons ook vertellen waar de site over gaat en kunnen een grote factor zijn bij het verdienen van vertrouwen.
Bij correct gebruik zijn foto's zeer effectief en kunnen ze het beoogde bericht snel naar uw publiek verzenden. Het gebruik van de verkeerde foto's kan de gebruikerservaring echter verslechteren. Hoe kiezen we de juiste?
Hoe belangrijk we ook zijn voor alle aspecten van de website die we maken: inhoud, kleuren, typografie, hiërarchie, informatie-architectuur en andere details, foto's verdienen evenveel aandacht in termen van bruikbaarheid en algemene gebruikerservaring op uw site..
Omgaan met foto's op websites moet iets zijn dat ontwerpers begrijpen en effectief toepassen, dus dit artikel zal u in de juiste richting wijzen en u laten zien hoe u over foto's moet denken wanneer u besluit om er een te gebruiken in uw volgende webproject.
Mensen scannen schermen op basis van eerdere ervaringen en verwachtingen. De linkerbovenhoek is het meest gebruikelijke startpunt voor de ogen van gebruikers, hoewel dit wel afhangt van de leespatronen van hun cultuur. Als u een grote foto op de pagina gebruikt, zal deze onmiddellijk hun aandacht trekken en ze wegtrekken van hun gebruikelijke neiging.
Ik ben er zeker van dat je met mij niet zult discussiëren over een foto op een webpagina is inhoud, maar behandel je het echt als zodanig? Gebruik je het gewoon als een add-on of een leuke content-filler? Heb je alle aspecten van die specifieke inhoud bekeken? Heb je de foto goed beoordeeld voordat je ervoor hebt gekozen om hem te gebruiken? Heb je de mentale modellen van gebruikers overwogen en de impact die de foto op hen zal hebben? Bevat de foto zinvolle informatie of biedt deze hulp voor de huidige taak van een gebruiker? Dit zijn slechts enkele vragen die u moet beantwoorden voordat u een foto op een webpagina gebruikt.
Foto's mogen nooit worden gebruikt om de webpagina 'op te vrolijken'.
Ik heb veel ontwerpers gezien die gewoon een mooie fullscreen foto op een webpagina plaatsten, waarbij ze een slogan of een "Oproep tot actie" gooiden en verklaarden dat het gedaan was. In veel gevallen is de foto niet geëvalueerd, de ontwerper volgde slechts een aanhoudende trend. Laten we eens kijken hoe u een foto kunt evalueren voordat u deze op uw site gebruikt.
Er zijn een paar dingen die u moet overwegen bij het kiezen van een foto in uw ontwerp.Ik ga ervan uit dat je al weet hoe je moet evalueren fundamentele aspecten van een foto, namelijk: kwaliteit, grootte, compositie en belichting. Kwaliteit in termen van vereiste resolutie, grootte van het beeld en bij voorkeur de oriëntatie voor het beoogde gebruik, effectieve compositie en bijsnijden van de foto om de aandacht te vestigen, en goed belichte onderwerpen op de foto.
Zodra u dat hebt gedaan en de foto de fundamentele test heeft doorstaan, kunt u doorgaan met het verkennen van de opties voor uw beoogde gebruik.
Ons brein verwerkt afbeeldingen 60.000 keer sneller dan tekst lezen. - Mike Parkinson
Bovenal moet een foto nuttig zijn. Er is niets mis met het gebruik van een foto als tijdelijke aanduiding om een pagina op te fleuren of wat ruimte in te vullen, maar denk ook eens aan de context waarin u die foto gebruikt. Nuttige, nuttige, tot nadenken stemmende inhoudsfoto's zijn degenen die onze speciale aandacht nodig hebben. Handige foto's zouden moeten
Een mooi voorbeeld van een nuttige foto in webdesign is de Square-website.
Je kunt meteen zien dat deze afbeelding professioneel is gefotografeerd (kijk naar de handen en nagels). Het belangrijkste is dat het direct communiceert over waar het product over gaat en hoe gemakkelijk het is om te gebruiken. Zeer nuttige, educatieve en educatieve foto.
Een ander voorbeeld van een nuttige foto is de Potlood-website. Net als in het vorige voorbeeld laat deze foto zien waar het product precies over gaat (een stylus), waar en hoe het kan worden gebruikt (iPad-applicatie).
De Woodster-website maakt ook goed gebruik van foto's om het product uit te leggen. Het is duidelijk dat hun product wordt gebruikt om uw Mac te verhogen, maar biedt ook nuttige USB-verbindingen bij de hand. Stel je voor dat dit product zonder context wordt geïsoleerd (de iMac). Denk je dat de foto net zo nuttig zou zijn als deze??
Grovemade doet uitstekend werk door een collectie van hun product te presenteren op één enkele achtergrondfoto op volledig scherm. Het is overduidelijk dat ze hoogwaardige houten kantooraccessoires maken. Deze foto is niet alleen handig, maar tegelijkertijd ook erg effectief en emotioneel. We komen in een oogwenk tot effectieve en emotionele foto's.
Als je de bovenstaande voorbeelden bekijkt, zul je merken dat alle foto's vrij duidelijk zijn, voor zichzelf spreken en dat ze de bedoelde boodschap heel goed communiceren. U hoeft niet lang te zoeken om erachter te komen waar het product / dienst / site over gaat. Dit zijn allemaal kenmerken van een nuttige foto in webontwerp.
Een effectieve foto is degene die vraagt om actie, die ons gedrag beïnvloedt en de beoogde boodschap duidelijk communiceert. In het bijzonder moeten goede en effectieve productfoto's gebruikers aanmoedigen om die producten te kopen. Uit de bovenstaande voorbeelden hebben we gezien dat bruikbare foto's inderdaad effectief zijn omdat ze het product wenselijk maken, waardoor we worden aangemoedigd om ze te kopen. Telkens wanneer we een foto zien die een verandering in ons gedrag teweegbrengt, kunnen we dit als wezen beschrijven effectief.
Als je kijkt naar de Mobility-website en die sappige rode koptelefoon, word je meteen aangetrokken en wil je ze misschien kopen!
Apple staat bekend om perfectionisme in alles wat ze doen. De iPhone-bestemmingspagina bevat veel briljante en wenselijke productfoto's, waardoor u een van hun producten wilt bezitten.
Een ander voorbeeld van een effectieve foto is de tsptr-website. Merk op hoe de man op de foto naar beneden kijkt alsof er iets hieronder is dat je kunt verkennen? Er is inderdaad iets beneden.
De Mapquest-website geeft niet alleen emotie over aan de beelden, maar gebruikt ook een slimme blikrichting om de ogen van gebruikers te richten op belangrijke inhoud op de pagina, in dit geval de mobiele downloadlink aan de linkerkant.
Poco People maakt gebruik van een leuke en vermakelijke foto op hun homepage. Je kunt meteen zien dat er iets vreemds aan de hand is. Vanwege dat, en goed gebruik van kleuren, licht en belichting, is uw interesse op de een of andere manier gewekt om te zien waar deze site over gaat.
Op de Colossal-website staat een grote foto op de startpagina die laat zien wat ze doen (ze geven grote advertenties en muurschilderingen mee) en hoe ze dat doen (bekijk de man aan de rechterkant). Het interessante van deze foto zijn de passerende mensen aan de linkerkant. Ze zien er opgewonden uit over wat ze zien, waardoor je als toeschouwer betrokken wordt en de hele foto en boodschap spannend en effectief maakt.
Een gevoelige foto zou moeten resulteren in een emotionele reactie van de kijker. Of het gewoon aangenaam is om te kijken naar, of te kalmeren, of te storen op een manier die ons dwingt om actie te ondernemen, of grappig en vermakelijk, of aantrekkelijk en wenselijk, zolang de foto onze emoties aanspreekt, op de een of andere manier groter zal zijn impact dan een die dat niet doet.
Frogdesign biedt een case study op hun website over FEMA en rampenbeheersing. De hoofdfoto, gecombineerd met een goede slogan, is zeer effectief en emotioneel. Het vertelt een verhaal en het toont gevaar en vanwege het gevoel dat we eraan gehecht zijn.
De hoofdfoto van de Breath-website is zeer rustgevend. Gecombineerd met een goede slogan en een goede blikrichting, draagt de vrouw op de foto haar ademgemak over aan de toeschouwer. Let op het knoplabel "Inhaleren"?
De hoofdfoto van Shaun Groves vertelt een geweldig verhaal over hem. Het zendt geluk, vertrouwen, hoop, vriendschap en anticipatie naar de toeschouwer die eraan gehecht raakt en voelt empathie ten aanzien van zijn werk.
Naast het nut en de effectiviteit van de foto-selectie van Relay Foods, vertalen ze ook emoties over de service die ze bieden. De vrouwen links en rechts tonen hun vreugde om voor hen te werken, en omdat Relay Foods draait om natuurlijke producten, zijn de gezichtsuitdrukkingen van vrouwen op deze foto's afgestemd op hun merk / dienstbericht.
Er zijn zeven (of acht) basisemoties:
Ze zijn universeel en worden (meestal) gecommuniceerd door gezichtsuitdrukkingen en fysieke gebaren. Als u foto's van mensen gebruikt om uw bedoelde bericht te communiceren, pas dan op voor deze basis zeven emoties en beslis welke uw doelgroep zullen raken.
Close-upfoto's van mensen nemen onmiddellijk onze aandacht en helpen onze emoties te activeren, waardoor ze een krachtig ontwerpelement worden.
Wanneer we een gezicht zien, worden we automatisch geactiveerd om iets te voelen of om ons in te leven in die persoon
We hebben in vorige voorbeelden al foto's van mensen gezien, maar laten we ze een beetje verder verkennen.
Hoewel de Build Fire-foto van een vrouw ons niets vertelt over hun product, voegt het persoonlijkheid toe aan hun product en is het een nuttige en effectieve manier om de aandacht van gebruikers te trekken. Hetzelfde effect zou niet worden bereikt als er alleen een foto van de iPhone was in plaats van de vrouw.
Als u ooit besluit om een grote portretfoto op uw persoonlijke website te gebruiken, groet ik u, ik ben er geweest. Maar pas op! Een kleine gezichtsuitdrukking kan een groot verschil maken in het bericht dat u communiceert. Daniel Eckler doet echt zijn best om zichzelf aan het publiek voor te stellen. Zijn gezichtsuitdrukking communiceert vertrouwen, kalmte en vertrouwen.
Mensen kunnen zien wanneer een glimlach echt of nep is
Iedereen weet wat er met het WTC is gebeurd. De 9/11 Tribute Centre-website is gewijd aan de verhalen van degenen die er waren. De man op de foto kijkt ons rechtstreeks aan en helpt ons ons te verhouden tot het onderwerp van de site die ons uitnodigt in de gemeenschap.
Notitie: dit gebeurt zonder confronterend te zijn; een dunne lijn!
Een ander geweldig voorbeeld van het overbrengen van de boodschap met een close-up foto van een menselijk gezicht is de Conservation-website. De Kayapo-man op de foto communiceert autoriteit, moed en waardering.
Zoals Susan Weinschenk zei, zijn close-upfoto's het meest overtuigend op een liefdadigheidssite, en dat is waar. Save the Children heeft een close-upfoto van een kind in nood dat perfect aansluit op de slogan en het onderwerp van de site. Let op de blikrichting richting de donatieknop?
Hoewel we veel geweldige voorbeelden hebben gezien van het gebruik van foto's in ons webontwerp, kunnen deze gemakkelijk worden misbruikt. Daarom zal ik u enkele voorbeelden tonen van hoe niet om foto's te gebruiken en wat te vermijden.
Niet-gerelateerde foto - een webdesignstudio die "Tailored-made" -diensten aanbiedt, maakt gebruik van een niet-gerelateerde achtergrondfoto (gekleurde draden) die een verkeerde eerste indruk maakt en verkeerde berichten naar de bezoeker stuurt. Er is hier betekenis, maar het is een obscure metafoor.
Een veel betere oplossing zou hier zijn om een effen kleur of een groepsfoto te gebruiken. Bovendien kunnen digitale producten niet worden aangepast.
Een software als service-aanbod voor samenwerkingstools voor teams maakt gebruik van een foto van een bezorgde vrouw op het werk. Dit kan de indruk wekken dat ze zich zorgen maakt over dezelfde software die de site promoot. Een veel betere oplossing zou hier zijn om ofwel de echte productscreenshots te tonen of een gelukkige vrouw te laten zien die hun product gebruikt.
Wazig foto achtergrond - alleen gebruikt als decoratieve plaatsaanduiding, communiceert niets over de site en heeft dus geen echt effect. Ik zou je aanraden om wazige foto-achtergronden zo veel mogelijk te vermijden, je kunt het beter doen dan dat;)
Een andere totaal niet-gerelateerde foto voor het onderwerp van de site. Hoewel de woorden 'handgemaakt' en 'werkplaats' gerelateerd kunnen worden aan de foto zelf, communiceren ze niet over het echte onderwerp van de site. Bij merk Bat draait het allemaal om het maken van merkstrategieën en met de serie foto's die met houtverwerking te maken hebben missen ze een geweldige kans om hun boodschap over te brengen.
Verkeerde fotokeuze - wat was je eerste indruk toen je deze foto zag? Twee gelukkige mensen die in een coffeeshop staan helpen uw bedrijf online te slagen. Rechts? Nee, een full-service webdesignbureau biedt deze hulp echt, en de foto zou een van hun gelukkige en succesvolle klanten moeten tonen. Dit kan ook een stockfoto zijn die u moet vermijden.
Voorraad foto's - ze communiceren bijna nooit de juiste boodschap. Waarom draagt een jonge jongen een bril en houdt hij zijn duimen omhoog? Is hij een ontwikkelaar die codeert voor PHP-codering? Ik denk het niet.
De Nationwide-website communiceert het bericht niet met deze foto. Ten eerste heeft de foto geen relatie met het onderwerp, lijkt de vrouw haar nagels te bijten (we weten dat dit een psychische aandoening is) en is het scherm op haar tablet wazig. Deze foto toont angstgevoelens, nervositeit en stress en ik denk echt dat Nationwide dat niet wilde communiceren met hun bezoekers.
Dit artikel gaat over het gebruik van grote foto's op uw website, maar er zijn veel andere manieren waarop foto's op de juiste manier kunnen worden gebruikt om uw publiek te betrekken. Begin vroeg in je ontwerpproces met nadenken over foto's. Als je goed projectonderzoek hebt gedaan, heb je al genoeg inzichten.
Investeer in goede fotosessies: een geweldige fotograaf kan een fortuin toevoegen aan de bedrijfswaarde van uw website.
Wat je ook ontwerpt, je publiek bestaat uit de mensen die zullen profiteren van je ontwerp. Inzicht in menselijk gedrag is echt de enige manier om effectief ontwerp te maken en dit is van toepassing op het kiezen van de beste foto's voor uw volgende websiteontwerp.
Accentsconagua