Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Photography

O Guia de Seleção de Fotos para Web Designers

by
Difficulty:BeginnerLength:LongLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Imagens fotográficas chamam nossa atenção e ativam uma resposta quase que imediata quando as encontramos. Assim, são parte importante dos sites que criamos. As fotos são determinantes em nossa primeira impressão, mas também podem nos dizer do que se trata um site, além de serem um enorme fator no estabelecimento da confiança. 

Quando usadas corretamente, fotos são muito efetivas e podem enviar a mensagem pretendida ao seu público. Contudo, se usadas erroneamente, podem diminuir a experiência dos usuários. Como fazemos para escolher a melhor? 

Usando Fotos no Design para Web

Tanto quanto todos os outros aspectos que nos importamos em um site – conteúdo, cores, tipografia, hierarquia, arquitetura da informação e outros detalhes – as fotos merecem nossa atenção quando se trata de usabilidade e experiência do usuário.

Lidar com fotos em sites deve ser algo que os designers devem entender e aplicar corretamente, assim, esse artigo ajudará você a seguir a direção correta, mostrando como tomar a melhor decisão sobre as fotos para seu próximo projeto para web.

Clame Atenção Usando Uma Foto Grande

As pessoas escaneiam as telas, baseadas em experiências passadas e em suas expectativas. O canto esquerdo superior é o ponto inicial mais comum para os olhos dos usuários, embora isso dependa dos padrões de leitura da cultura da pessoa. Usando uma foto grande na página, ela chamará toda a atenção, imediatamente, tirando-os da sua tendência tradicional.

Tratando Fotos Como Conteúdo

Você pode argumentar que uma foto numa página web é conteúdo, mas você realmente as trata dessa forma? Você as usa apenas como um adereço ou um preenchedor de espaço? Você já considerou todos os aspectos desse conteúdo em particular? Você avaliou a foto, apropriadamente, antes ter escolhido usá-la? Você considerou o modelo mental dos usuários e o impacto que ela terá sobre eles? A foto provê informação significativa ou provê ajuda a atual tarefa do usuário? Esses são apenas alguns dos questionamentos que você precisa responder antes de usar uma foto para uma página.

Fotos nunca deveriam ser usadas apenas para “animar” uma página.

Vi muitos designers apenas colocando fotos lindas para preencher o plano de fundo de páginas web, usando qualquer texto ou “botão de ação” (call to action) e achando que está tudo finalizado. Em muitos casos, a foto não foi avaliada, o designer estava seguindo a tendência, apenas. Vejamos como avaliar uma foto antes de usá-la em nossos sites.

Escolhendo a Foto Perfeita

Há alguns pontos a considerar quando se decide escolher uma foto para seu projeto. Assumirei que você já saber como avaliar os aspectos fundamentais de uma foto, que são: qualidade, tamanho, composição e exposição. Qualidade em termos de resolução mínima; tamanho da imagem e, preferencialmente, a orientação em que ela será usada; composição efetiva; corte usado para chamar atenção à foto; e objetos alvos expostos apropriadamente.

Uma vez feito isso e a foto tendo passado no teste fundamental, você pode continuar a explorar as opções para seu uso.

Nosso cérebro processa imagens cerca de 60mil vezes mais rápido que a leitura de um texto. - Mike Parkinson

Ela é Útil?

Acima de tudo, uma foto deve ser útil. Não há nada errado em usar uma foto como preenchedor de espaço reservado para melhorar a página, mas, mesmo assim, considere o contexto em que a foto será usada. Fotos eficientes, úteis e provocantes são aquelas que precisam de nossa atenção especial. Fotos úteis devem

  • Ajudar a entender algo, 
  • Ensinar a usar algo, ou
  • Mostrar como fazer algo. 

Um ótimo exemplo de uma foto útil em um projeto web é a do site da Square.

squareupcomsquareupcomsquareupcom

Você percebe que a foto foi tirada por um profissional, imediatamente (veja as mãos e as unhas). O mais importante, ela passa a informação do que é o produto e como usá-lo. Foto muito útil, educacional e instrucional.

Outro exemplo de foto útil é a do site Pencil. Semelhante ao exemplo anterior, essa foto mostra, exatamente, sobre o que o produto é (uma caneta stylus), onde e como pode ser usada (aplicativo para iPad).

Pencil websitePencil websitePencil website

O site Woodster também faz bom uso de fotos para explicar o produto. Está claro que o produto é usado para deixar o Mac mais alto, porém, também provê conexões USB extras. Imagine esse produto isolado de seu contexto (o iMac). Você acredita que a foto seria tão eficiente quanto essa daqui?

Woodster websiteWoodster websiteWoodster website

O Grovemade faz um ótimo trabalho de apresentar a coleção dos seus produtos em uma única foto, que preenche o plano de fundo. Fica bem óbvio que eles manufaturam acessórios de escritório em madeira de alta-qualidade. A foto não apenas é útil, como também é efetiva e emocional. Voltaremos a falar em efetividade e emoção daqui a pouco.

Se você prestar bem atenção nos exemplos acima, perceberá que todas as fotos são bem óbvias, auto explicativas e comunicam a mensagem pretendida muito bem. Você não precisa olhar a foto por muito tempo para saber do que se trata o serviço/produto/site. Essas são todas características de fotos úteis nos projetos para web.

É Efetiva?

Uma foto efetiva é aquela que chama por uma ação, influencia nosso comportamento e comunica a mensagem pretendida, claramente. Em particular, fotos boas e efetivas de produtos encorajam os usuários a comprar tais produtos. Nós já vimos, nos exemplos acima, que fotos úteis também são fotos efetivas, uma vez que elas tornam o produto desejável e, assim, encorajando-nos a comprá-lo. Toda vez que vemos uma foto que ativa uma mudança em nosso comportamento habitual, podemos caracterizá-la de efetiva.

Se você vir o site do Mobility, os fones de ouvido vermelhos sangue atrairão, imediatamente, sua atenção e, muito provavelmente, farão você querer comprá-los!

A Apple é conhecida por seu perfeccionismo em tudo que faz. A página de entrada do iPhone é repleta de fotos de um produto brilhante e desejável, fazendo-nos querer tê-lo.

Outro exemplo de foto efetiva é a do site tsptr. Perceba como o homem da foto está olhando para baixo como se tivesse algo que pudesse explorar mais para baixo? E, claro, há algo a mais para explorar na parte de baixo.

O site Mapquest não só passa emoção com as imagens, mas também direciona o olhar dos usuários, guiando-os para o conteúdo importante da página, que, nesse caso, é o link para enviar uma sms para baixar o aplicativo no dispositivo móvel, que está mais à esquerda.

Poco People usa uma foto engraçada e divertida em sua página inicial. Você, imediatamente, percebe que há algo estranho. Por conta disso e do bom uso das cores, luzes e exposição, o interesse em saber sobre o que o site se trata desperta em você.

O site da Colossal destaca uma foto grande na página inicial, mostrando o que eles fazem (pintam, a mão, propagandas grande e murais) e como o fazem (veja o homem à direita). O ponto interessante dessa foto são as pessoas passando pela esquerda. Eles parecem excitados sobre o que estão presenciando, o que envolve você como observador, tornando a foto e mensagem efetivas e excitantes.

É Emotiva?

Uma foto emotiva deve resultar em uma resposta emocional por parte de quem a visualiza. Seja por ser agradável olhá-la; confortável; perturbadora no sentido de nos fazer tomar uma ação; ou engraçada e divertida; atrativa e desejável. Enquanto a foto apelar para nossas emoções, ela terá um grande impacto sobre nós, mais que aquelas que não o fazem.

Frogdesign destaca um caso de estudo em seu site sobre a FEMA e a administração de ajuda em caso de desastres. A foto principal, combinada com uma boa chamada, é bastante efetiva e emotiva. Ela conta uma história e mostra o perigo da situação, uma vez que estamos, de certa forma, ligados a ela. 

A foto principal do site Breath é bem tranquilizante. Combinada com uma ótima chamada e direcionamento ocular apropriado, a mulher na foto transfere sua respiração leve para o visitante. Percebeu o texto do botão: "Inhale"? 

A foto principal do site Shaun Groves conta uma ótima história sobre ele. Transmite felicidade, confiança, esperança, amizade e antecipação ao visitante que se sente atrelado a ela, empatizando com o trabalho dele.

Além da utilidade e efetividade da seleção de fotos da Relay Foods, eles também passam emoção sobre o serviço que oferecem. As mulheres à esquerda e direita mostram vontade em trabalhar para eles e, uma vez que a Relay Foods é sobre produtos naturais, as expressões faciais das mulheres nessas fotos estão alinhas com a mensagem da marca/serviço.

O Poder dos Rostos

sete (ou oito) emoções básicas: 

  1. alegria
  2. tristeza
  3. desprezo
  4. medo
  5. aversão
  6. surpresa
  7. raiva

Elas são universais e, geralmente, são comunicadas por expressões faciais e gestos físicos. Se você usa fotos de pessoas para comunicar sua mensagem, preste atenção às essas sete emoções básicas e decida quais delas melhor conduz seu público alvo.

Fotos em close de pessoas chamam nossa atenção e ajudam a ativar nossas emoções, o que as torna um poderoso elemento do projeto. 

Quando vemos um rosto, automaticamente somos ativados a sentir algo ou simpatizar com aquela pessoa

Nós já vimos fotos de pessoas nos exemplos anteriores, mas vejamos algumas outras mais.

Embora a foto da mulher no site Build Fire não nos diga uma coisa sequer sobre seu produto, adiciona personalidade ao produto e é uma forma efetiva e útil de chamar a atenção dos usuários. O mesmo efeito não seria alcançado se tivesse apenas a foto de um iPhone ao invés da mulher.

Se você decidiu usar uma foto grande em seu site pessoal, parabenizo você, também já fiz isso. Mas, tenha cuidado! Um pouco de expressão facial faz uma grande diferença na mensagem que você quer passar. Daniel Eckler faz um ótimo trabalho em apresentar-se ao seu público. Sua expressão facial passa confiança e calma. 

As pessoas percebem se um sorriso é verdadeiro ou falso

Todo mundo sabe o que aconteceu com o World Trade Center. O site 9/11 Tribute Center é dedicado às histórias daqueles que estavam lá. O homem da foto olha diretamente para nós, ajudando a nos relacionar ao tópico do site, convidando-nos a fazer parte da comunidade.

Nota: isso foi obtido sem precisar ser confrontador; uma linha muito tênue!

Outro grande exemplo de trazer uma mensagem a partir do close em um rosto humano é o do site Conservation. O homem de Kayapo na foto passa autoridade, coragem e apreciação.

Assim como Susan Weinschenk disse, fotos em close são mais persuasivas em sites de caridade, o que é verdade. O site Save the Children destaca uma foto em close de uma criança em necessidade, que se alinha perfeitamente à chamada e tópico e do site. Percebeu o direcionamento em relação ao botão de doações?

Como *Não* Usar Fotos em Design para Web

Mesmo que tenhamos visto excelentes exemplos de como usar fotografias em nossos designs para web, podemos usar esse artifício erroneamente. Dessa forma, mostrarei alguns casos que demonstram como não usar fotos e o que se deve evitar.

Fotos não relacionadas - um estúdio de design para web oferecendo serviços "sob medida" utiliza uma foto de plano de fundo sem relação ao conteúdo e tópicos (carreteis de linhas coloridas), criando uma primeira impressão errada, passando a mensagem errada ao visitante. Há um sentido para seu uso, mas é uma metáfora muito obscura, difícil de perceber.

Uma solução muito melhor seria usar uma cor sólida única ou uma foto de grupo. Além disso, produtos digitas não podem ser "sob medida".

Um aplicativo, em forma de serviço, oferecendo ferramentas de colaboração para equipes, usou uma foto de uma mulher preocupada no trabalho. Isso talvez passe a ideia de que ela está preocupada com o aplicativo que o site promove; Uma solução muito melhor seria mostrar capturas de tela do produto real ou uma mulher feliz usando o produto.

Fotos borradas de plano de fundo - usadas apenas para decoração e ocupação de espaço, não transmite nada sobre o site, não tendo efeito algum sobre o visitante. Recomendaria evitar fotos de plano de fundo borradas o máximo possível. Você é capaz de muito mais ;)

Outra foto totalmente destoante do assunto do site. Mesmo que as palavras "feitas à mão" e "oficina" possam relacionar-se à foto em si, essa última não comunica qual o verdadeiro assunto do site. Brand Bat trabalha com criação de estratégias de marca e, com uso dessas fotos em seu site, perdem uma ótima oportunidade de passar sua mensagem.

Escolha de foto errada - qual foi a sua primeira impressão ao ver essa foto? Duas pessoas felizes em pé em uma cafeteria ajudarão seu negócio online. Certo? Não. Uma agência de serviços de design para web que oferece esse tipo de ajuda, e a foto deveria mostrar um dos seus clientes felizes e bem sucedidos. Essa foto também pode ser uma foto genérica, comprada em sites especializados. Você deve evitá-las.

Fotos Genéricas - elas quase nunca comunicam a mensagem corretamente. Por que há um jovem usando óculos e fazendo sinal de positivo? Ele é um programador provendo serviços de programação em PHP? Não creio. 

O site Nationwide falha em comunicar sua mensagem com essa foto. Primeiramente, a foto não se relaciona ao assunto, a mulher parece estar roendo as unhas (sabemos que isso é uma disfunção psicológica), e a tela do tablet está borrada. Essa foto passa ansiedade, nervosismo, estresse e acredito que a Nationwide não queria passar isso aos seus visitantes.

Pontos Finais

Esse artigo tratou sobre o uso de fotos grandes em seu site, mas há inúmeras outras maneiras que fotos podem ser usadas para interagir com seu público alvo. Passe a pensar nelas desde o começo do processo do projeto. Se fizer corretamente um projeto de pesquisa, você terá muitas percepções para poder trabalhar. 

Invista em fotos profissionais: Um ótimo fotógrafo pode agregar uma fortuna ao valor do negócio do seu site.

O que quer que esteja projetando, seu público alvo compreende todas as pessoas as quais podem se beneficiar do seu design. Compreender o comportamento humano é a única forma de obter um design efetivo e isso também implica na escolha das melhores fotos para seu próximo design para web.

Leitura Adicional

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.