Como escolho uma boa foto de capa para o meu site?


22

Está na moda ter imagens de fundo grandes com relativamente pouco texto sobre eles para cabeçalhos e introduções em páginas da web, incluindo o início das postagens do blog. Eu poderia dar inúmeros exemplos disso, mas acho que você sabe exatamente do que estou falando.

O que torna uma foto de capa / plano de fundo eficaz? O que devo ter em mente ao procurar imagens ou planejar tirar e editar algumas para o meu site?


1
Agora está na moda ter vídeos de fundo grandes.
usar o seguinte comando

1
Muito bem feita, uma das melhores perguntas auto-respondidas do site (não me lembro de nenhuma outra, possivelmente a melhor). :)
Dom

Respostas:


30

Você realmente precisa seguir a tendência?

Nunca faça algo porque é uma tendência. Faça as coisas porque elas são boas para a experiência do usuário, porque é isso que é melhor para sua empresa e seu design. Pense muito sobre as implicações que a adição de uma imagem grande ao seu site terá e pesa as outras opções que você possui. Você não precisa usar essa técnica para ter um site "moderno" .

Com isso dito, há muitas coisas a serem lembradas ao escolher uma imagem de plano de fundo para o seu site. Como essa resposta é longa, aqui está a lista resumida; Dou mais detalhes sobre cada um, incluindo exemplos abaixo.

  • Verifique se a imagem está relacionada ao conteúdo
  • Verifique se a imagem diz o que você deseja
  • Verifique se a imagem é relativamente única
  • Use uma imagem de coisas reais
  • Verifique se a imagem funciona com seu layout
  • Verifique se a imagem segue boas regras de fotografia e design
  • Verifique se a imagem segue seu esquema de cores
  • Limitar a variação na imagem
  • Verifique se o tamanho da imagem é grande o suficiente
  • Verifique se você tem direitos para usar a imagem
  • Verifique se a qualidade da foto é alta

Verifique se a imagem está relacionada ao conteúdo

Uma foto não relacionada não fará nada além de prejudicar. Assim como qualquer coisa no seu design, se ele não se encaixar diretamente no objetivo do seu site, então se livre dele. Verifique se ele está diretamente relacionado ao conteúdo, e não a algo mais tarde. A imagem precisa ter um contexto adicional trazido por algum texto ou layout para ajudar os usuários a entenderem que é um site e não apenas uma imagem estática.

insira a descrição da imagem aqui


Verifique se a imagem diz o que você deseja

Todas as imagens têm uma conotação com base no conteúdo da imagem e no seu estilo. Verifique se a imagem se encaixa na sensação que você espera transmitir, bem como na marca. A imagem deve transmitir uma compreensão adicional além do que o texto ao seu redor fornece. Verifique também se ele ajuda a criar sua marca da maneira que você deseja que ela seja criada.

insira a descrição da imagem aqui

Escusado será dizer que a imagem deve ser visualmente atraente. Mais detalhes sobre os traços para a imagem ser atraente estão abaixo.


Verifique se a imagem é relativamente única

As imagens personalizadas são melhores que as de estoque, desde que a qualidade seja pelo menos a mesma. Isso significa que você deve evitar imagens de estoque muito conhecidas, desde que a alternativa seja da mesma qualidade e apropriada. No entanto, ser absolutamente único não é tão importante quanto ter uma imagem ótima e apropriada.

insira a descrição da imagem aqui


Use uma imagem de coisas reais

Há algo sobre uma imagem real (mesmo uma versão altamente editada) que tem uma grande influência sobre nós como seres humanos. Nós gostamos de ver coisas reais. Sempre que possível, opte por uma imagem real em vez de algo gerado por computador, a menos que não se ajuste totalmente ao conteúdo ou estilo que você deseja.

insira a descrição da imagem aqui

Mostrar às pessoas tem um efeito ainda maior, que pode ser bom e ruim. Se feito corretamente, pode fazer com que os usuários sintam que a experiência é mais real e pessoal. Se mal feito, pode fazer com que pareça im pessoal e barato. Mais sobre isso aqui .

Os rostos, em particular, chamam a atenção, portanto, verifique se eles são um rosto apropriado e coloque-os apenas onde realmente importa. Às vezes, colocá-los em outros contextos, como um livro, e iPad, computador etc. pode ajudar. Outras vezes, é mais apropriado cortar os rostos (pense em um site de roupas ou em um manequim). Mostrar o rosto de uma marca / porta-voz é muito eficaz, se bem feito, eu recomendo se você puder.

insira a descrição da imagem aqui


Verifique se a imagem funciona com seu layout

O fluxo do usuário e o layout do site são mais importantes do que qualquer imagem que você escolher. Crie-os primeiro. Se esse melhor layout e fluxo tiver um pouco de espaço aberto na parte superior, considere adicionar uma imagem.

Verifique se nenhuma parte importante da imagem é coberta pelo conteúdo que você possui. Use diretrizes visuais para ajudar os usuários a acessar o conteúdo que você deseja que eles vejam (mais sobre isso na próxima seção).

insira a descrição da imagem aqui


Verifique se a imagem segue boas regras de fotografia e design

As imagens devem seguir as principais regras da fotografia, incluindo a regra dos terços , usar linhas visuais, focar bem o conteúdo principal, enquadrar o assunto corretamente, ter um bom histórico e simetria e padrões, entre outras coisas. Para saber mais, confira aqui ou pesquise mais recursos online.

Esses princípios darão à imagem mais propósito, ajudando a chamar a atenção para as partes importantes da imagem e seu contexto circundante.

boas regras de imagem


Verifique se a imagem segue seu esquema de cores

Todos os sites devem ter uma aparência unificada, incluindo um esquema de cores. Se você escolhe ou não o esquema de cores primeiro e depois escolhe a imagem ou escolhe a imagem e o esquema de cores ( ferramentas como essa podem ajudar com o último), verifique se as cores da imagem se encaixam no esquema geral de cores. Às vezes, lavar a imagem e aplicar um filtro de cores pode funcionar bem.

descr


Limitar a variação na imagem

Não deixe a aparência visual ocupada. A existência de várias cores e objetos na imagem dificulta a inserção de texto e o ajuste no layout. Como dito anteriormente, crie o conteúdo primeiro e depois escolha a imagem.

Adicionar sobreposições parcialmente transparentes, escurecer uma imagem ou lavá-la em preto e branco antes de adicionar um filtro de cores pode ajudar a reduzir ruídos desnecessários. Além disso, as cores do plano de fundo podem ser aplicadas atrás do texto ou em um elemento para ajudar na legibilidade também.

insira a descrição da imagem aqui

A imagem acima escurece a imagem original e usa algumas sombras nas bordas para reduzir o ruído. A imagem abaixo parece usar uma sobreposição escura parcialmente transparente para fazer a mesma coisa.

insira a descrição da imagem aqui


Verifique se o tamanho da imagem é grande o suficiente

Escusado será dizer que a imagem usada deve ser grande o suficiente para cobrir cada tela sem esticar. Isso significa que, para telas de tamanho completo, precisamos ter imagens com uma resolução mínima de 1024 x 768 pixels, mas é melhor apontar para pelo menos 1200 pixels de largura. Também podemos economizar o carregamento de imagens grandes para telas menores, fornecendo tamanhos diferentes de imagens com base na resolução, mais aqui . Tente otimizar o tempo de carregamento da imagem, no entanto, sem comprometer a qualidade da imagem.


Verifique se você tem direitos para usar a imagem

Se você não tem permissão para usá-lo, não use . Se você não souber quais são os direitos autorais da imagem , procure-a, mas não a use até saber! A última coisa que você quer fazer é ser processada por infração.


Verifique se a qualidade da foto é alta

Não use imagens granuladas ou embaçadas. Não use uma foto com conteúdo questionável ou não relacionado. Mantenha-o simples, mas (principalmente) real. Pense bem nas partes boas e ruins de cada imagem que você considera e não aceite algo medíocre.

Recursos adicionais:


4
Boa resposta. Eu provavelmente teria sido muito sucinto: "Certifique-se de que seja uma boa foto e seja relevante para as necessidades e objetivos do seu site" :)
DA01 08/15

@ DA01 Enquanto Concordo plenamente com essa afirmação, algumas pessoas precisam de um pouco mais ajuda :)
Zach Saucier
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.