Texto cinzento e minúsculo sobre um fundo carregado. Os olhos cansam-se antes de chegares ao fim da primeira frase. É por isso que as imagens de fundo importam para a tua marca. Quando o layout e a cor lutam contra a mensagem, as pessoas saem sem te dizer porquê.
As imagens de fundo de um website devem ter pouco contraste atrás do texto ou levar uma sobreposição forte. Este capítulo explica o que isso quer dizer em linguagem simples, porque afeta o teu website e o teu marketing, e como aplicar a ideia sem te perderes em jargão. Vais ver também como a hero image entra no mesmo quadro. Vamos por partes.
Planear em torno das imagens de fundo
As imagens de fundo de um website devem ter pouco contraste atrás do texto ou levar uma sobreposição forte.
Fundos carregados tornam o texto corrido ilegível nos telemóveis.
Os tratamentos de hero image costumam ser diferentes dos de texturas de fundo repetidas.
Formas inteligentes de orçamentar e dar prioridade
Junta uma sobreposição escura ou clara para o texto passar nas verificações de contraste.
Faz uma lista das páginas indispensáveis antes das funcionalidades personalizadas opcionais. Essa lista mantém os orçamentos comparáveis quando falas com designers ou agências.
Quando o âmbito estiver claro, volta a ver fotos de banco de imagens para websites para alinhar os objetivos visuais com o custo.
Lista prática que podes usar hoje
Junta uma sobreposição escura ou clara para o texto passar nas verificações de contraste.
Quando reveres uma página, pergunta se as imagens de fundo se veem logo no primeiro scroll no telemóvel. Se não, reordena as secções antes de afinares os detalhes.
Guarda capturas de ecrã antes e depois das alterações para perceberes o que fez a diferença nas imagens de fundo do teu site.
Partilha esta lista com quem atualiza o teu site para que a hero image se mantenha coerente nas páginas novas.
Escolhe uma métrica para acompanhar este mês, como o tempo na página ou os formulários iniciados, para que as alterações de design se liguem aos resultados do negócio e não apenas ao gosto.
Como este tema se liga ao resto da tua marca
As escolhas visuais raramente vivem numa só página. Os tratamentos de hero image costumam ser diferentes dos de texturas de fundo repetidas.
As tuas publicações nas redes sociais, os emails e os materiais impressos devem repetir a mesma hierarquia, as mesmas cores e as mesmas regras de tipografia que usas na web.
Quando os visuais da marca se afastam, os clientes sentem uma discrepância subtil, mesmo sem a saberem explicar.
Usa texto alternativo para imagens para comparar notas com um capítulo relacionado deste módulo.
Fundos carregados tornam o texto corrido ilegível nos telemóveis.
Perguntas que muita gente esquece
Termos secundários como hero image e imagens para websites ajudam-te a procurar exemplos mais fundos e a comparar o teu trabalho com os padrões comuns.
Os tratamentos de hero image costumam ser diferentes dos de texturas de fundo repetidas.
Escreve uma alteração de antes e depois que vais testar numa página real esta semana. Pequenas edições medidas valem mais do que planos vagos.
Ensinar à tua equipa um vocabulário comum sobre imagens de fundo reduz as rondas de revisão com designers e agências.
Ferramentas que facilitam as atualizações visuais
Não precisas de código à medida para resolver muitos problemas de layout e estilo. Um editor visual deixa-te ajustar espaçamento, cores e tipografia enquanto vês a pré-visualização em telemóvel e computador.
O WEMASY inclui um criador de websites com edição visual, para publicares alterações sem esperar por um programador a cada ajuste. Abre o criador de websites quando estiveres pronto para aplicar o que aprendeste.
Quando publicares atualizações, volta a ver fotos de banco de imagens para websites e tamanhos de imagem para redes sociais para o módulo ficar ligado na tua cabeça.
Já tens uma lente de trabalho para as imagens de fundo. Usa-a quando reveres o teu site, aprovares materiais de marketing ou deres instruções a um designer. Continua com tamanhos de imagem para redes sociais e texto alternativo para imagens para manteres o ritmo neste módulo.
Aprender sobre imagens de fundo é uma competência gradual. Volta a este capítulo depois de publicares uma melhoria, para que as ideias passem da leitura ao hábito. Pequenas revisões repetidas valem mais do que decorar todas as regras de uma vez. Guarda notas sobre o que funcionou com o teu público para a próxima atualização ser mais rápida.
Perguntas frequentes
Quanto tempo leva a melhorar as imagens de fundo de um website?
A maioria das pequenas empresas vê páginas mais claras em poucas sessões focadas, depois de aplicar o essencial deste capítulo. Começa pela página inicial e depois estende as mesmas regras às páginas de serviços e de contacto.
Precisas de um designer para trabalhar as imagens de fundo?
Um designer ajuda em rebrandings complexos, mas muitas correções nas imagens de fundo podem ser feitas por ti, quando já sabes o que procurar. Usa fotos de banco de imagens para websites ao lado deste capítulo para teres orientação relacionada.
O WEMASY pode ajudar-te a aplicar imagens de fundo no teu website?
O WEMASY inclui um editor visual no criador de websites, para ajustares layout, cores e tipografia sem código. Abre o criador de websites para atualizares modelos e veres as alterações no telemóvel.
Qual é o erro mais comum com as imagens de fundo?
As pessoas tentam corrigir tudo de uma vez, em vez de uma página de cada vez. Escolhe uma só prioridade, como a legibilidade ou o contraste, e depois vê tamanhos de imagem para redes sociais para a melhoria seguinte.
Como se ligam as imagens de fundo ao SEO?
Uma hierarquia visual clara e uma tipografia legível mantêm os visitantes mais tempo na página, o que reforça os sinais de envolvimento que os motores de busca acompanham. Junta as correções de design a uma boa estrutura de conteúdo para teres os melhores resultados.
O que deves aprender a seguir às imagens de fundo?
Continua com fotos de banco de imagens para websites e tamanhos de imagem para redes sociais neste livro, para construíres um sistema visual completo para a tua marca online.