A imagem de plano de fundo do site é mais do que apenas uma imagem bonita. Tem um impacto significativo na experiência geral do usuário. Ela tem o potencial de se tornar uma ótima ferramenta de narrativa que obrigará seu público a ficar com você. Portanto, escolher uma imagem de plano de fundo do site é tão importante, seja ela uma cor básica de bloco sólido, uma imagem real ou até mesmo um vídeo. Aqui está um guia sobre as práticas recomendadas para selecionar planos de fundo de sites para ajudá-lo a tomar a melhor decisão.
Sugestões para escolher uma imagem de plano de fundo do site
Escolher bons fundos de sites é uma tarefa difícil. É um aspecto importante do design geral do seu site, e pode ser difícil combinar sua marca com uma imagem ou design específico. Dito isso, as diretrizes a seguir devem ajudá-lo a selecionar uma imagem de plano de fundo do site adequada.
1. Alta resolução é obrigatória
O pior erro que você pode cometer é escolher um plano de fundo de baixa resolução. Nesse caso, o plano de fundo é granulado e de baixa resolução e parece com um papel de parede do Win95.
Imagens de alta resolução farão com que seu site pareça mais atraente e profissional para todos os visitantes que você encontrar. Embora pagar por fotografia e design personalizados seja uma ótima ideia se você puder pagar, a boa notícia é que há muitas fotografias de alta resolução disponíveis online. Muitas são gratuitas, enquanto outras custam apenas alguns dólares.
2. Complemente com a imagem da sua marca
Um problema que muitas empresas têm é que elas gostam do plano de fundo ou do layout de um site e tentam forçá-lo em sua marca. Isso nem sempre é uma boa ideia. Nunca é uma boa ideia escolher uma imagem de plano de fundo do site e depois desenvolver sua marca em torno dela.
Em vez disso, você deve ter uma compreensão completa da identidade da sua marca para escolher um plano de fundo que atenda às suas necessidades.
3. Esteja ciente dos contrastes
As imagens de fundo da página do seu site são exatamente isso – um plano de fundo. Ele não deve assumir seu site. Tenha em mente o contraste visual entre o primeiro plano e o plano de fundo. Algo precisa ser alterado se seus cabeçalhos e texto estiverem se misturando.
A escrita em seu site deve saltar para fora da página. É por isso que, ao escolher um plano de fundo, é sempre uma boa ideia considerar a tipografia e o esquema de cores. Se você não conseguir fazê-lo funcionar, tente outra opção.
4. A prioridade é dada à acessibilidade
Ao escolher uma imagem de plano de fundo do site, a primeira coisa a considerar é como isso afetará a leitura do artigo. Você deve certificar-se de que o texto seja legível e que a taxa de contraste entre o texto e o plano de fundo seja adequada.
Se você não tiver certeza sobre as preocupações de acessibilidade acima, mas ainda quiser usar uma imagem, há algumas coisas que você pode fazer para que funcione. Para ajudar a tornar as informações mais legíveis, você pode utilizar ferramentas de edição de imagens ou até mesmo CSS para modificar coisas como opacidade e contraste ou aplicar máscaras de camada. Também é crucial selecionar o tipo de letra e o tamanho da fonte apropriados para o material.
5. Texturas sutis devem ser usadas
As texturas podem adicionar um toque de classe à aparência geral do seu site. Procure texturas que sejam perfeitas, o que significa que elas podem repetir um padrão na tela para dar a impressão de uma imagem vasta, sejam elas utilizadas como plano de fundo da página ou em uma área de conteúdo específica. Embora uma imagem de plano de fundo do site texturizado em tamanho real possa às vezes ser usada, as mais detalhadas nem sempre transitam bem em vários tamanhos de tela. Além disso, fotos com tamanhos de arquivo grandes podem diminuir o tempo de carregamento da página.
A menos que você esteja tentando uma aparência mais brutalista, a sutileza também é uma característica desejável em uma textura. O objetivo é evitar sobrecarregar os consumidores com grandes padrões. Procure imagens com linhas e cores mais suaves que se destaquem em relação ao material.
6. Considere o uso de uma variedade de telas e dispositivos
Dependendo do tamanho da tela, a área visível do plano de fundo pode se alterar consideravelmente. Isso pode ser muito perceptível em fotografias. O que parece ótimo em um monitor widescreen pode parecer terrível em um smartphone. Elementos importantes de uma imagem de plano de fundo do site podem ser cortados, resultando em perda de contexto.
Parte do problema aqui é a seleção de fotos, e parte é a codificação. Por isso, procure fotos que atendam à proporção especificada (paisagem, retrato, quadrado). Elas são mais propensas a se encaixar bem em telas menores.
7. Indivíduos reais devem ser apresentados
Escolher uma imagem de plano de fundo do site com pessoas é um ótimo método para aumentar potencialmente a taxa de conversão do seu site. Se possível, evite usar fotos de banco de imagens e, em vez disso, use pessoas genuínas. Você não quer que sua imagem acabe em centenas de outros sites, o que pode acontecer se você usar uma foto de banco de imagens.
Por exemplo, em sua página, a Warby Parker não apenas apresenta duas pessoas, mas também mostra a seus consumidores como seus óculos ficarão em pessoas reais, em vez de apenas exibi-los como objetos independentes.
8. Otimize as Imagens
Vale a pena otimizar cada imagem que você enviar, seja um blog, um negócio online ou apenas um site padrão que você deseja melhorar com fotografias de alta qualidade.
Para começar, verifique se as fotografias estão em boas condições, como descrevemos anteriormente. Então, garantindo que o arquivo de imagem seja nomeado corretamente, você pode garantir que eles sejam facilmente indexados pelos mecanismos de pesquisa.
Você já salvou uma imagem com os nomes "Photo1.jpg" ou "Screen Shot 2019-03-18 at 4.13.42 pm?" Quando se trata da imagem de plano de fundo do site, isso não é uma boa ideia.
Seja consistente com seu nome e evite usar pontuação ou espaços. Também é preferível usar hífens em vez de sublinhado no nome.
9. Selecione o formato de arquivo de imagem apropriado
Você não tem certeza de qual tipo de arquivo de imagem usar? Vamos descobrir mais sobre isso.
- JPGs: Esses arquivos são ideais para imagens, pois podem lidar com uma ampla gama de cores, mantendo um tamanho de arquivo modesto. Quando esta imagem for utilizada, você não precisará se preocupar em ter um arquivo grande, o que acelera o tempo de carregamento.
- PNGs: esse tipo de arquivo é melhor para gráficos, especialmente quando há grandes extensões de cores. A maioria dos designs, infográficos, imagens com muito texto e logotipos se enquadram nessa categoria. PNGs também podem ter um plano de fundo transparente (o que é ideal para logotipos). Se possível, salve seu PNG em um formato "24 bits" para maior qualidade e uma exibição mais variada de cores.
10. Permita que a imagem fale por si mesma
Uma imagem de fundo do site cativante vai despertar o interesse dos visitantes do seu site. Em vez de um grande número de palavras em seu site, use uma imagem que transmita a mensagem. Mesmo que a escrita seja agradável de ler, nem todos os seus clientes dedicarão tempo ou cuidado para fazê-lo.
Adicione imagens de fundo ao seu site impressionante
Você pode escolher uma imagem da biblioteca Strikingly ou uma imagem de estoque da biblioteca Strikingly como imagem de fundo. Você pode adicionar imagens, vídeos ou cores ao seu plano de fundo de três maneiras.
Para saber como adicionar fotos de fundo ao seu site Strikingly, siga estas etapas.
1. Vá ao editor do seu site e abra-o.
2. Selecione a opção Plano de fundo. Você pode usar um vídeo ou uma imagem como plano de fundo.
1. Clique em "Mais" para ver nossa biblioteca de imagens.
2. Clique em "Carregar imagem" para adicionar sua própria imagem de fundo. Observe que só aceitamos os seguintes tipos de arquivo: gif, jpeg, png, BMP e ico.
Diretrizes para Escolher as Imagens de Fundo
A imagem de plano de fundo do site da Strikingly é feita para acomodar uma variedade de tamanhos de tela, do monitor ao tablet e ao telefone. Recomendamos um tamanho de 1600 pixels de largura por 900 pixels de altura para que seu plano de fundo apareça bem em todas as telas. Com cuidado, inclua fotografias sem fundo de pessoas, marcas e outras informações! Para ver como as coisas ficarão, use nosso recurso de "visualização".
Você tem algumas opções para dimensionar e alinhar seu plano de fundo.
Esticar: ela estica sua imagem para preencher toda a tela, tanto em altura quanto em largura. Essa geralmente é a melhor opção, pois a imagem de plano de fundo do site funcionará como fundo em qualquer tamanho de tela. Por outro lado, se sua imagem apresentar conteúdo nas laterais (principalmente à esquerda e à direita), ela pode não ser visualizada em telefones celulares.
Conter: mostrará a imagem inteira, garantindo que nenhuma parte dela seja omitida. No entanto, isso pode resultar em algum espaço em branco em algumas telas.
Centrar: A imagem será mostrada no centro da seção e não será dimensionada se você escolher o centro. O plano de fundo, por outro lado, mostrará o espaço em branco ao redor das bordas se a imagem for muito pequena. Algumas partes da imagem podem ser cortadas se forem muito grandes, especialmente em telas menores.
Mosaico: centralizará e repetirá uma imagem, o que é útil para criar padrões.
Conclusão
Com tantas tecnologias interessantes afetando o design do site, é lógico que não prestamos tanta atenção na imagem de plano de fundo do site. Eles, no entanto, desempenham um papel significativo na narrativa e nos auxiliam na criação de uma interface de usuário agradável. Os fundos de página inteira ajudam a estabelecer o tom de um site, enquanto os fundos de seção fornecem ao nosso conteúdo algum espaço para respirar.
Claro, tudo funciona melhor quando selecionamos fotografias que são apropriadas para nossos propósitos. Imagens que melhoram em vez de atrapalhar a capacidade do usuário de consumir conteúdo. No entanto, também devemos considerar recursos como tamanho, proporção e compatibilidade com dispositivos móveis. É importante lembrar que, mesmo em segundo plano, os detalhes importam.
