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?
website-design
images
background
design-principles
Zach Saucier
fonte
fonte
Respostas:
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
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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:
fonte