Share
Fotografiska bilder tar upp vår uppmärksamhet och utlöser ett nästan ögonblickligt svar när vi stöter på dem. De är därför en viktig del av alla webbplatser vi skapar. Foton spelar en viktig roll för att bestämma vårt första intryck, men de kan också berätta vad webbplatsen handlar om och kan vara en stor faktor för att tjäna tillit.
När de används korrekt är foton mycket effektiva och kan snabbt skicka det avsedda meddelandet till publiken. Användning av felbilder kan dock försämra användarnas upplevelse. Hur väljer vi de rätta?
Så mycket som vi bryr oss om alla aspekter av webbplatsen som vi skapar: innehåll, färger, typografi, hierarki, informationsarkitektur och andra detaljer, förtjänar bilderna så mycket uppmärksamhet när det gäller användbarhet och övergripande användares erfarenhet på din webbplats.
Hantera bilder på webbplatser borde vara något som designers förstår och tillämpar effektivt, så den här artikeln kommer att peka dig i rätt riktning och visa dig hur du tänker på foton när du bestämmer dig för att använda en på ditt nästa webbprojekt.
Människor skannar skärmar utifrån tidigare erfarenheter och förväntningar. Överst till vänster är den vanligaste utgångspunkten för användarnas ögon, även om detta beror på deras kulturens läsemönster. Om du använder ett stort foto på sidan kommer det omedelbart att fånga uppmärksamheten och dra bort dem från sin vanliga tendens.
Jag är säker på att du inte kommer att argumentera med mig som ett foto på en webbsida är innehåll, men behandlar du verkligen det som sådant? Använder du det bara som en tillägg eller ett fint innehåll fyllmedel? Har du övervägt alla aspekter av den specifika innehållsdelen? Har du utvärderat fotot ordentligt innan du valt att använda det? Har du tänkt på användares mentala modeller och vilken inverkan bilden kommer att få på dem? Ger bilden meningsfull information eller ger hjälp till en användares aktuella uppgift? Det här är bara några av de frågor du behöver svara innan du använder ett foto på en webbsida.
Bilder ska aldrig användas för att "jazz upp" på webbsidan.
Jag har sett många designers bara placera ett vackert fullskärmsfoto på en webbsida, kasta in någon tagline eller en "Call to action" och förklara det gjort. I många fall har fotot inte utvärderats, designern följde bara en pågående trend. Låt oss se hur du utvärderar ett foto innan du använder det på din webbplats.
Det finns några saker att tänka på när man väljer att välja ett foto i din design.Jag antar att du redan vet hur man ska utvärdera grundläggande aspekter av ett foto, det vill säga: kvalitet, storlek, sammansättning och exponering. Kvalitet i form av nödvändig upplösning, bildens storlek och helst dess orientering för den avsedda användningen, effektiv sammansättning och beskärning av fotot för att uppmärksamma och korrekt utsatta ämnen på bilden.
När du har gjort det och fotot har passerat det grundläggande testet kan du fortsätta att utforska alternativen för din avsedda användning.
Vår hjärna bearbetar bilder 60.000 gånger snabbare än läsning av text. - Mike Parkinson
Framför allt måste ett foto vara användbart. Det är inget fel med att använda ett foto som platshållare för att lysa upp en sida eller fylla lite utrymme, men även då överväga det sammanhang där du använder det fotot. Användbara, hjälpsamma, tankeväckande innehållsbilder är de som behöver vår speciella uppmärksamhet. Användbara bilder ska
Ett vackert exempel på ett användbart foto i webbdesign är Square-webbplatsen.
Du kan direkt berätta att den här bilden har blivit professionellt skuten (titta på händerna och fingernaglarna). Viktigast är det att kommunicera direkt vad produkten handlar om och hur lätt det är att använda. Mycket användbart, pedagogiskt och instruktionsfoto.
Ett annat exempel på ett användbart foto är webbplatsen Pencil. På samma sätt som föregående exempel visar detta foto exakt vad produkten handlar om (en pennan), var och hur den kan användas (iPad-applikation).
Woodster-webbplatsen använder också bilder för att förklara produkten. Det är uppenbart att deras produkt används för att höja din Mac, men ger också användbara USB-anslutningar till hands. Föreställ dig denna produkt isolerad utan kontext (iMac). Tror du att fotot skulle vara lika användbart som det här?
Grovemade gör ett bra jobb med att presentera en samling av sin produkt på ett enda fullscreen bakgrundsbild. Det är uppenbart att de tillverkar avancerade träkontorstillbehör. Inte bara är detta foto användbart, det är också mycket effektivt och känslomässigt samtidigt. Vi kommer till effektiva och känslomässiga foton på ett ögonblick.
Om du tittar på exemplen ovan kommer du att märka att alla bilder är ganska uppenbara, självförklarande och att de kommunicerar det avsedda meddelandet mycket bra. Du behöver inte se lång tid för att ta reda på vad produkten / tjänsten / webbplatsen handlar om. Dessa är alla egenskaper för ett användbart foto i webbdesign.
Ett effektivt foto är det som kräver en åtgärd, påverkar vårt beteende och kommunicerar det avsedda meddelandet tydligt. I synnerhet ska bra och effektiva produktbilder uppmuntra användare att köpa dessa produkter. Vi har sett från exemplen ovan att användbara bilder verkligen är effektiva eftersom de gör produkten önskvärt och uppmuntrar oss därför att köpa dem. När vi ser ett foto som utlöser en förändring i vårt beteende kan vi beskriva det som ett effektiv.
Om du tittar på Mobilitetswebbplatsen och de saftiga röda hörlurarna blir du omedelbart lockad och potentiellt vill köpa dem!
Apple är känt för perfektion i allt de gör. IPhone-målsidan är full av lysande och önskvärda produktbilder som gör att du vill äga en av sina produkter.
Ett annat exempel på ett effektivt foto är tsptr-webbplatsen. Lägg märke till hur mannen på bilden ser neråt som att det finns något under för att du ska utforska? Det finns faktiskt något nedan.
Mapquest-webbplatsen förmedlar inte bara känslor med bilderna, men använder också smart blickriktning för att styra användarnas ögon till viktigt innehåll på sidan, i det här fallet den mobila nedladdningslänken till vänster.
Poco People använder ett roligt och underhållande foto på sin hemsida. Du kan genast säga att det är något konstigt om det. På grund av det, och god användning av färger, ljus och exponering, är ditt intresse piqued på något sätt för att se vad den här sidan handlar om.
Colossal hemsida har ett stort foto på hemsidan som visar vad de gör (de handar målar stora annonser och väggmålningar) och hur de gör det (kolla mannen till höger). Det intressanta med detta foto är de människor som passerar till vänster. De ser entusiastiska över vad de bevittnar som involverar dig som observatör och gör hela bilden och meddelandet spännande och effektiva.
Ett känslomässigt foto ska resultera i ett känslomässigt svar från betraktaren. Var det bara glädjande att titta på, lugna eller störa på ett sätt som tvingar oss att ta någon åtgärd, eller roligt och underhållande, eller attraktivt och önskvärt, så länge som bilden appellerar till våra känslor på något sätt kommer det att ha större påverkan än en som inte gör det.
Frogdesign har en fallstudie på deras hemsida om FEMA och katastrofhantering. Huvudbildet, kombinerat med en bra tagline, är mycket effektiv och känslomässig. Det berättar en historia och det visar fara och på grund av att vi känner oss knutna till det.
Huvudbildet på Breath-webbplatsen är väldigt lugnande. Kombinerad med en bra tagline och korrekt blickriktning överför kvinnan på fotot hennes andas till att betrakta betraktaren. Lägg märke till knappmärket "Inhale"?
Shaun Groves webbplatsens huvudfoto berättar en stor historia om honom. Den överför glädje, förtroende, hopp, vänskap och förväntan till betraktaren som blir knuten till den och känner sig empati mot sitt arbete.
Förutom användbarheten och effektiviteten i Relay Foods fotoval, översätter de också känslor om den tjänst de erbjuder. Kvinnorna till vänster och höger visar sin glädje i att arbeta för dem, och eftersom Relay Foods handlar om naturliga produkter, anpassas kvinnornas ansiktsuttryck på dessa bilder med deras märke / servicemeddelande.
Det finns sju (eller åtta) grundläggande känslor:
De är universella och är vanligtvis kommunicerade av ansiktsuttryck och fysiska gester. Om du använder foton av människor för att kommunicera är ditt avsedda meddelande att se upp för dessa grundläggande sju känslor och bestämma vilka som driver din målgrupp.
Närbilder av människor tar omedelbart vår uppmärksamhet och hjälper till att utlösa våra känslor, vilket gör dem till ett kraftfullt designelement.
När vi ser ett ansikte utlöses vi automatiskt för att känna något eller att empati med den personen
Vi har redan sett bilder av personer i tidigare exempel men låt oss utforska dem lite längre.
Även om Build Fire-fotot på en kvinna inte berättar något om deras produkt, lägger den personlighet till sin produkt och är ett användbart och effektivt sätt att ta tag i användarnas uppmärksamhet. Samma effekt skulle inte uppnås om det bara fanns ett foto på iPhone istället för kvinnan.
Om du någonsin bestämmer dig för att använda ett stort porträttfoto på din personliga hemsida hälsar jag dig, jag har varit där. Men var försiktig! Ett litet ansiktsuttryck kan göra stor skillnad i meddelandet du kommunicerar med. Daniel Eckler gör ett riktigt bra jobb med att presentera sig för publiken. Hans ansiktsuttryck kommunicerar förtroende, lugn och tillit.
Människor kan berätta när ett leende är verkligt eller falskt
Alla vet vad som hände med WTC. Webbplatsen 9/11 Tribute Center är tillägnad historierna av dem som var där. Mannen på fotot ser direkt på oss, vilket hjälper oss att relatera till ämnet på webbplatsen som bjuder in oss till samhället.
Notera: Detta är gjort utan att vara konfronterande; en bra linje!
Ett annat bra exempel på att föra över budskapet med ett närbild på människans ansikte är Conservation-webbplatsen. Kayapo mannen på fotot kommunicerar med myndighet, mod och uppskattning.
Som Susan Weinschenk sa är närbilderna mest övertygande på en välgörenhetsplats, och det är sant. Rädda barnen har ett närbildsfoto av ett barn i nöd som perfekt anpassas till taglinjen och ämnet på webbplatsen. Observera blickriktningen mot donationsknappen?
Även om vi har sett många bra exempel på hur man använder foton i vår webbdesign, kan dessa enkelt missbrukas. Därför kommer jag att visa dig några exempel på hur inte att använda foton och vad man ska undvika.
Orelaterat foto - En webbdesignstudio som erbjuder "Skräddarsydda" tjänster använder ett orelaterat bakgrundsbild (färgade trådar) som skapar fel första intryck och skickar felmeddelanden till besökaren. Det menar här, men det är en obeskild metafor.
En mycket bättre lösning här skulle vara att använda antingen solidfärg eller ett gruppfoto. Dessutom kan digitala produkter inte skräddarsys.
En programvara som tjänst erbjuder samarbetsverktyg för team använder ett foto av en orolig kvinna på jobbet. Detta kan skapa intrycket att hon är orolig för samma program som webbplatsen marknadsför. En mycket bättre lösning här skulle vara att visa antingen den verkliga produkten skärmdumpar eller visa en glad kvinna som använder sin produkt.
Suddig foto bakgrund - Används endast som dekorativ platshållare, kommunicerar ingenting om webbplatsen och har därmed ingen verklig effekt. Jag skulle råda dig att undvika suddiga fotobakgrunder så mycket som möjligt, du kan göra det bättre då
Ett annat helt orelaterat foto till ämnet på webbplatsen. Även om orden "handgjorda" och "verkstad" kan relateras till själva fotot, meddelar det inte det verkliga ämnet på webbplatsen. Brand Bat handlar om att skapa varumärkesstrategier och med serien av träbehandlingsrelaterade bilder saknar de en bra möjlighet att kommunicera sitt meddelande.
Fel foto val - vad var ditt första intryck när du såg detta foto? Två glada människor som står i en kafé hjälper ditt företag att lyckas på nätet. Höger? Nej, en fullservice webbdesignbyrå erbjuder faktiskt denna hjälp och bilden ska visa en av sina lyckliga och framgångsrika kunder. Detta kan också vara ett lager foto som du borde undvika.
Stock foton - de kommunicerar nästan aldrig rätt meddelande. Varför är det en ung pojke som bär glasögon och håller tummarna upp? Är han en utvecklare som tillhandahåller PHP-kodningstjänster? Jag tror inte det.
Den rikstäckande webbplatsen misslyckas med att kommunicera meddelandet med det här fotot. För det första är bilden orelaterad med ämnet, kvinnan verkar bita på naglarna (vi vet att det här är en psykologisk störning) och skärmen på hennes tablett är suddig. Detta foto visar ångest, nervositet och stress och jag tror verkligen inte Nationwide ville kommunicera det med sina besökare.
Den här artikeln har handlat om att använda stora bilder på din webbplats, men det finns många andra sätt att foton kan användas korrekt för att engagera publiken. Börja tänka på bilder tidigt i din designprocess. Om du har gjort rätt projektforskning har du redan mycket insikter.
Investera i bra fotograferingar: en bra fotograf kan lägga till en förmögenhet för din webbplatss affärsvärde.
Oavsett vad du utformar består din publik av de personer som kommer att dra nytta av din design. Att förstå mänskligt beteende är verkligen det enda sättet att göra effektiv design, och det gäller att välja de bästa bilderna för din nästa webbdesign.
Accentsconagua