Share
Fotografiske bilder tar vår oppmerksomhet og utløser en nesten øyeblikkelig respons når vi møter dem. De er derfor en viktig del av ethvert nettsted vi lager. Bilder spiller en viktig rolle i å bestemme vårt førsteinntrykk, men de kan også fortelle oss hva nettstedet handler om, og kan være en stor faktor for å tjene tillit.
Når de brukes riktig, er bildene svært effektive og kan raskt sende den tilsiktede meldingen til publikum. Bruk av feilbilder kan imidlertid forringe brukerens opplevelse. Hvordan velger vi de riktige?
Så mye som vi bryr oss om alle aspekter av nettstedet vi lager: innhold, farger, typografi, hierarki, informasjonsarkitektur og andre detaljer, fortjener bilder så mye oppmerksomhet når det gjelder brukervennlighet og generell brukeropplevelse på nettstedet ditt.
Å håndtere bilder på nettsteder bør være noe designere forstår og søke effektivt, så denne artikkelen vil peke deg i riktig retning og vise deg hvordan du tenker på bilder når du bestemmer deg for å bruke en på ditt neste webprosjekt.
Folk skanner skjermer basert på tidligere erfaringer og forventninger. Øverst til venstre er det vanligste utgangspunktet for brukernes øyne, selv om dette avhenger av kulturens lesemønstre. Hvis du bruker et stort bilde på siden, vil den straks fange oppmerksomheten og trekke dem bort fra deres vanlige tendens.
Jeg er sikker på at du ikke vil argumentere for meg som et bilde på en nettside er innhold, men behandler du det som sådan? Bruker du det bare som et tillegg eller et fint innholds fyllstoff? Har du vurdert alle aspekter av det aktuelle innholdet? Har du vurdert bildet riktig før du har valgt å bruke det? Har du vurdert brukere mentale modeller og hvilken innvirkning bildet vil ha på dem? Gir bildet en meningsfull informasjon eller gir hjelp til brukerens nåværende oppgave? Dette er bare noen av spørsmålene du må svare før du bruker et bilde på en nettside.
Bilder må aldri brukes bare for å "jazz up" nettsiden.
Jeg har sett mange designere bare å plassere et vakkert fullskjermbilde på en nettside, kaste inn noen tagline eller en "Call to action" og erklære det gjort. I mange tilfeller har bildet ikke blitt vurdert, designeren fulgte bare en pågående trend. La oss se hvordan du vurderer et bilde før du bruker det på nettstedet ditt.
Det er noen ting du bør vurdere når du bestemmer deg for å velge et bilde i ditt design.Jeg vil anta at du allerede vet hvordan du skal vurdere grunnleggende aspekter av et bilde, de er: kvalitet, størrelse, sammensetning og eksponering. Kvalitet i form av nødvendig oppløsning, størrelsen på bildet og helst dets orientering for den tilsiktede bruken, effektiv sammensetning og beskjæring av bildet for å trekke oppmerksomhet og riktig utsatte fag på bildet.
Når du har gjort det, og bildet har bestått grunnleggende testen, kan du fortsette å utforske alternativene for den tiltenkte bruken din.
Hjernen vår behandler bilder 60.000 ganger raskere enn å lese tekst. - Mike Parkinson
Fremfor alt må et bilde være nyttig. Det er ikke noe galt med å bruke et bilde som plassholder for å lyse opp en side eller fylle litt plass, men selv da vurdere konteksten der du bruker bildet. Nyttige, hjelpsomme, tankevekkende innholdsbilder er de som trenger vår spesielle oppmerksomhet. Nyttige bilder skal
Et vakkert eksempel på et nyttig bilde i webdesign er Square-nettstedet.
Du kan fortell at dette bildet har blitt profesjonelt skutt (se på hendene og fingerneglene). Viktigst av alt kommuniserer det direkte hva produktet handler om, og hvor enkelt det er å bruke. Veldig nyttig, pedagogisk og instruksjonsfoto.
Et annet eksempel på et nyttig bilde er blyant-nettsiden. På samme måte som forrige eksempel viser dette bildet nøyaktig hva produktet handler om (en penn), hvor og hvordan den kan brukes (iPad-applikasjon).
Woodster-nettsiden gjør også god bruk av bilder for å forklare produktet. Det er klart at deres produkt brukes til å heve din Mac, men gir også nyttige USB-tilkoblinger for hånden. Tenk deg dette produktet, isolert uten kontekst (iMac). Tror du at bildet ville være like nyttig som dette?
Grovemade gjør en god jobb med å presentere en samling av sitt produkt på et enkelt fullskjerm bakgrunnsbilde. Det er ganske tydelig at de produserer high-end tre kontortilbehør. Ikke bare er dette bildet nyttig, det er også veldig effektivt og følelsesmessig på samme tid. Vi kommer til effektive og følelsesmessige bilder på et øyeblikk.
Hvis du ser på eksemplene ovenfor, vil du legge merke til at alle bildene er ganske opplagte, selvforklarende og at de kommuniserer den tilsiktede meldingen veldig bra. Du trenger ikke å se lenge for å finne ut hva produktet / tjenesten / nettstedet handler om. Dette er alle kjennetegnene til et nyttig bilde i webdesign.
Et effektivt bilde er det som ber om en handling, påvirker vår oppførsel og kommuniserer den tilsiktede meldingen tydelig. Spesielt bør gode og effektive produktbilder oppfordre brukere til å kjøpe disse produktene. Vi har sett fra eksemplene ovenfor at brukbare bilder faktisk er effektive da de gjør produktet ønskelig og oppfordrer oss til å kjøpe dem. Når vi ser et bilde som utløser en forandring i vår oppførsel, kan vi beskrive det som værende effektiv.
Hvis du ser på Mobilitetsnettstedet og de saftige røde hodetelefonene, blir du umiddelbart tiltrukket og potensielt ønsker å kjøpe dem!
Apple er kjent for perfeksjonisme i alt de gjør. IPhone-destinasjonssiden er full av flotte og ønskelige produktfotografier som gjør at du vil eie en av produktene sine.
Et annet eksempel på et effektivt bilde er tsptr nettsiden. Legg merke til hvordan mannen på bildet ser nedover som det er noe under for deg å utforske? Faktisk er det noe under.
Mapquest-nettstedet gir ikke bare følelser med bildene, men bruker også smart blikkretning for å veilede brukernes øyne til viktig innhold på siden, i dette tilfellet den mobile nedlastingslinken til venstre.
Poco People bruker et morsomt og underholdende bilde på deres hjemmeside. Du kan umiddelbart si at det er noe rart om det. På grunn av det, og god bruk av farger, lys og eksponering, blir interessen din pikret på en måte for å se hva dette nettstedet handler om.
Colossal nettside har et stort bilde på hjemmesiden som viser hva de gjør (de håndmaler store annonser og veggmalerier) og hvordan de gjør det (sjekk mannen til høyre). Det interessante med dette bildet er menneskene som passerer til venstre. De ser glade for hva de opplever som involverer deg som observatør og gjør hele bildet og meldingen spennende og effektive.
Et følelsesmessig bilde skal resultere i en følelsesmessig respons fra betrakteren. Det er bare behagelig å se på, eller berolige eller forstyrre på en måte som tvinger oss til å ta noe, morsomt og underholdende, eller attraktivt og ønskelig, så lenge bildet appellerer til våre følelser på en eller annen måte, vil det få større påvirkning enn en som ikke gjør det.
Frogdesign har en casestudie på deres hjemmeside om FEMA og katastrofehjelp. Hovedbildet, kombinert med en god tagline, er veldig effektiv og følelsesfull. Det forteller en historie, og det viser fare og på grunn av at vi føler det knyttet til det.
Hovedfotoet av Breath-nettstedet er veldig beroligende. Kombinert med en god tagline og riktig blikkretning, overfører kvinnen på bildet hennes pusten til seeren. Legg merke til knappetiketten "Inhale"?
Shaun Groves nettstedets hovedfoto forteller en god historie om ham. Den overfører lykke, tillit, håp, vennskap og forventning til betrakteren som blir knyttet til den og føler seg empati mot sitt arbeid.
Ved siden av nytten og effektiviteten til Relay Foods fotovalg, oversetter de også følelser om tjenesten de tilbyr. Kvinnene til venstre og høyre viser sin glede i å jobbe for dem, og fordi Relay Foods handler om naturlige produkter, er kvinnens ansiktsuttrykk på disse bildene justert med deres merke / servicemelding.
Det er syv (eller åtte) grunnleggende følelser:
De er universelle og kommuniseres (vanligvis) av ansiktsuttrykk og fysiske bevegelser. Hvis du bruker bilder av folk til å kommunisere din tilsiktede melding, pass på disse grunnleggende syv følelsene og avgjøre hvilke som kjører målgruppen din.
Nærbilder av mennesker tar øyeblikkelig vår oppmerksomhet og hjelper til med å utløse våre følelser, noe som gjør dem til et kraftig designelement.
Når vi ser et ansikt, blir vi automatisk utløst for å føle noe eller å empati med den personen
Vi har allerede sett bilder av folk i tidligere eksempler, men la oss utforske dem litt lenger.
Selv om Build Fire-fotoet til en kvinne ikke forteller oss noe om deres produkt, legger det til personlighet i deres produkt og er en nyttig og effektiv måte å gripe brukerens oppmerksomhet på. Den samme effekten ville ikke bli oppnådd hvis det bare var et bilde av iPhone istedenfor kvinnen.
Hvis du noen gang bestemmer deg for å bruke et stort portrettfoto på din personlige nettside, hilser jeg deg, jeg har vært der. Men vær forsiktig! Et lite ansiktsuttrykk kan gjøre stor forskjell i meldingen du kommuniserer. Daniel Eckler gjør en veldig god jobb med å presentere seg til publikum. Hans ansiktsuttrykk kommuniserer tillit, ro og tillit.
Folk kan fortelle når et smil er ekte eller falsk
Alle vet hva som skjedde med WTC. 9/11 Tribute Center-nettstedet er dedikert til historiene til de som var der. Mannen på bildet ser direkte på oss og hjelper oss dermed med å forholde oss til temaet på nettstedet som inviterer oss til samfunnet.
Merk: dette er gjort uten å være konfronterende; en fin linje!
Et annet godt eksempel på å bringe over meldingen med et nært menneskelig ansiktsfoto er Conservation-nettstedet. Kayapo mannen på bildet kommuniserer autoritet, mot og takknemlighet.
Som Susan Weinschenk sa, er nærbilde mest overbevisende på et veldedighetssted, og det er sant. Save the Children har et nærbilde av et barn som har behov for det, og passer perfekt sammen med tagline og tema på nettstedet. Legg merke til blikkretningen mot donasjonsknappen?
Selv om vi har sett mange gode eksempler på hvordan du bruker bilder i vårt webdesign, kan disse enkelt bli misbrukt. Derfor skal jeg vise deg få eksempler på hvordan ikke å bruke bilder og hva du skal unngå.
Ikke-relatert bilde - et webdesignstudio som tilbyr "Skreddersydde" tjenester bruker et ikke-relatert bakgrunnsbilde (fargetråder) som skaper feil førsteinntrykk og sender feilmeldinger til den besøkende. Det er mening her, men det er en uklar metafor.
En mye bedre løsning her ville være å bruke enten farge eller et gruppeprofil. Dessuten kan ikke digitale produkter skreddersys.
En programvare som tjeneste som tilbyr samarbeidsverktøy for lag, bruker et bilde av en bekymret kvinne på jobb. Dette kan skape inntrykk av at hun er bekymret for den samme programvaren nettstedet fremmer. En mye bedre løsning her ville være å vise enten de virkelige produkt skjermbilder eller vise en glad kvinne ved hjelp av deres produkt.
Sløret fotobakgrunn - Brukes kun som dekorativt stedholder, kommuniserer ikke noe om nettstedet og har dermed ingen reell effekt. Jeg vil råde deg til å unngå uklare fotobakgrunner så mye som mulig, du kan gjøre det bedre da;)
Et annet helt urelatert bilde til emnet på nettstedet. Selv om ordene "håndlagde" og "verksted" kan relateres til selve bildet, kommuniserer det ikke det virkelige emnet på nettstedet. Brand Bat handler om å skape merkevarestrategier, og med serien av treprosesseringsrelaterte bilder mangler de en flott mulighet til å kommunisere deres melding.
Feil bildevalg - hva var ditt første inntrykk da du så dette bildet? To glade mennesker som står i en kaffebar, vil hjelpe din bedrift til å lykkes på nettet. Ikke sant? Nei, et fullservice webdesignbyrå tilbyr faktisk denne hjelpen, og bildet skal vise en av deres lykkelige og vellykkede kunder. Dette kan også være et lager foto som du bør unngå.
Arkivfotografier - de kommuniserer nesten aldri riktig budskap. Hvorfor er det en ung gutt som bærer briller og holder tommelen opp? Er han en utvikler som tilbyr PHP-kodingstjenester? Jeg tror ikke det.
Nasjonalt nettsted mislykkes i å kommunisere meldingen med dette bildet. For det første er bildet ikke relatert til emnet, kvinnen ser ut til å bite neglene hennes (vi vet at dette er en psykologisk lidelse), og skjermen på tavleplaten er uskarpt. Dette bildet viser engstelse, nervøsitet og stress, og jeg tror virkelig ikke Nationwide ønsket å kommunisere det til sine besøkende.
Denne artikkelen har handlet om å bruke store bilder på nettstedet ditt, men det er mange andre måter fotoer kan brukes riktig til å engasjere publikum. Begynn å tenke på bilder tidlig i designprosessen. Hvis du har gjort riktig prosjektforskning, har du allerede mye innsikt.
Invester i gode fotoskudd: En flott fotograf kan legge til en formue for nettstedets forretningsverdi.
Uansett hva du designer, består publikum av folkene som vil dra nytte av designen din. Å forstå menneskelig atferd er virkelig den eneste måten å lage effektiv design, og dette gjelder å velge de beste bildene for ditt neste webdesign.
Accentsconagua