O fundador e CEO da Tilda, Nikita Obukhov, explica como evitar erros comuns ao criar uma capa de site e compartilha dicas de design sobre como combinar texto e imagens.
Uma capa é a essência de um site, expressa em três a cinco palavras e apoiada por uma fotografia. A página de capa é a primeira coisa que os visitantes veem quando chegam ao seu site e, nesse exato momento, as pessoas tomam a decisão de permanecer no site e continuar lendo ou fechar a guia. Portanto, sua tarefa é tornar a primeira página o mais atraente e cativante possível.
Capa do site: Primeiros passos
O princípio fundamental de um design de capa: o texto vem em primeiro lugar, enquanto as imagens apenas o apóiam.
A mensagem é de grande importância, enquanto a imagem de fundo define o clima certo. Portanto, tente escolher uma imagem que não dificulte a leitura do texto e que combine perfeitamente com a voz do seu site.
Além disso, não há necessidade de mostrar imediatamente o que você está oferecendo na capa. A imagem é apenas um plano de fundo que apóia a mensagem. Por exemplo, dê uma olhada na capa abaixo. É a primeira página da loja on-line de moletons e blusas de moletom: o fundo colorido não tem nada a ver com os moletons. Nesse caso, o objetivo da capa é criar um clima específico. Ela deve inspirar os visitantes e ajudá-los a se aprofundar no assunto.
A mensagem é de grande importância, enquanto a imagem de fundo define o clima certo. Portanto, tente escolher uma imagem que não dificulte a leitura do texto e que combine perfeitamente com a voz do seu site.
Além disso, não há necessidade de mostrar imediatamente o que você está oferecendo na capa. A imagem é apenas um plano de fundo que apóia a mensagem. Por exemplo, dê uma olhada na capa abaixo. É a primeira página da loja on-line de moletons e blusas de moletom: o fundo colorido não tem nada a ver com os moletons. Nesse caso, o objetivo da capa é criar um clima específico. Ela deve inspirar os visitantes e ajudá-los a se aprofundar no assunto.
A seção Hero da Activize, activize.ae
Às vezes, porém, a capa parece um anúncio e inclui uma mensagem clara, uma chamada para ação e uma imagem que mostra o que o cliente receberá como resultado. Se estiver administrando um SPA ou um salão de beleza, uma boa foto de capa seria aquela que mostrasse suas esteticistas ou massagistas trabalhando. Se estiver no ramo de reparos domésticos, adicione fotos de seus funcionários, mostrando que eles não são jovens inexperientes, mas profissionais altamente qualificados nos quais se pode confiar. Se estiver vendendo cadernos com gatos fofos, não hesite em colocá-los na capa. Nesse caso, você não precisa nem escrever nada - a imagem fala por si só.
Modelo de site da Tilda para uma empresa de reforma de casas
As imagens gratuitas para seus projetos digitais estão disponíveis em sites de banco de imagens profissionais que distribuem imagens sob a licença Creative Commons Zero (CC0). Isso significa que uma imagem está livre de restrições de direitos autorais: em outras palavras, ela pode ser usada e modificada de todas as formas possíveis, inclusive para fins comerciais, sem pedir permissão.
Aqui estão algumas fontes de fotos gratuitas de alta qualidade: Unsplash, Pexels, Stocksnap, Rawpixel.
Aqui estão algumas fontes de fotos gratuitas de alta qualidade: Unsplash, Pexels, Stocksnap, Rawpixel.
Uma parte importante do meu trabalho é escolher imagens para os modelos do Tilda. Inicialmente, tenho apenas uma descrição e um tema geral do modelo, todas as imagens ainda precisam ser encontradas. Quando o texto está pronto, entendo quantas linhas devo usar na capa, quantas seções devem ser incluídas no menu superior, se temos uma tagline e uma chamada para ação, quantos botões preciso adicionar (se houver), se há um formulário etc. Tendo em mente o número de elementos e seu peso visual, procuro uma imagem com uma composição adequada que, em primeiro lugar, facilite a leitura da mensagem na capa e não roube a cena.
Como escolher uma imagem de capa
Uma foto de capa perfeita deve estar vazia no meio - sem nenhum detalhe ou item.
O título da primeira página quase sempre está localizado no centro. Quando o texto cobre elementos visuais importantes, ninguém os verá. Além disso, o texto pode não ser legível.
O título da primeira página quase sempre está localizado no centro. Quando o texto cobre elementos visuais importantes, ninguém os verá. Além disso, o texto pode não ser legível.
1. Coloque o texto em uma área clara e organizada da foto
Por exemplo, uma foto de paisagem que apresente um deserto ou o céu, um tampo de mesa sem objetos no meio, uma floresta verde... tudo depende do tema de seu site, do clima desejado e de sua imaginação. O objetivo é tornar o texto facilmente legível.
Se você colocar o texto em uma área com muitos elementos, dificultará a leitura. Portanto, certifique-se de que o tamanho dos elementos esteja em harmonia com o tamanho da fonte.
O texto é difícil de ler porque o fundo está ocupado. Capa do site do editor de fotos on-line: pixlr.com
Uma foto de capa é um plano de fundo que cria um clima específico. Ela pode ampliar sua mensagem ou passar despercebida.
Em suma, o objetivo é ajudar o visitante a ler e entender rapidamente o texto. Digamos que você esteja projetando um site para uma conferência. Você adiciona o título, a data, a hora e o local da conferência à capa. Se o texto se mesclar visualmente com o plano de fundo e for quase ilegível, o visitante poderá simplesmente ignorá-lo, rolar a tela para baixo e perder as informações importantes.
Quando o texto se destaca, uma foto bem escolhida reforçará a mensagem. Por exemplo, você coloca uma foto da conferência do ano passado na capa. As pessoas podem ver como o evento foi organizado, se foi em um grande salão com centenas de pessoas ou, ao contrário, em um espaço aconchegante com apenas alguns participantes. Uma foto pode substituir alguns parágrafos. De qualquer forma, antes de tudo, as pessoas devem obter informações essenciais sobre horário e local.
Em suma, o objetivo é ajudar o visitante a ler e entender rapidamente o texto. Digamos que você esteja projetando um site para uma conferência. Você adiciona o título, a data, a hora e o local da conferência à capa. Se o texto se mesclar visualmente com o plano de fundo e for quase ilegível, o visitante poderá simplesmente ignorá-lo, rolar a tela para baixo e perder as informações importantes.
Quando o texto se destaca, uma foto bem escolhida reforçará a mensagem. Por exemplo, você coloca uma foto da conferência do ano passado na capa. As pessoas podem ver como o evento foi organizado, se foi em um grande salão com centenas de pessoas ou, ao contrário, em um espaço aconchegante com apenas alguns participantes. Uma foto pode substituir alguns parágrafos. De qualquer forma, antes de tudo, as pessoas devem obter informações essenciais sobre horário e local.
Minha meta é escolher uma imagem que transmita adequadamente a mensagem. Isso significa que o produto ou serviço deve ser representado na foto de forma direta (interior com cadeiras no caso de uma oficina de móveis) ou indireta (uma bela praia para um site de agência de viagens). Para escolher uma foto que esteja indiretamente relacionada ao tópico, pense no que os clientes estão esperando obter ou inclua imagens dos atributos associados a esse tópico específico.
Aqui estão alguns modelos criados pelos designers da Tilda. Cada modelo é um exemplo de uma abordagem diferente para a escolha de uma capa:
Aqui estão alguns modelos criados pelos designers da Tilda. Cada modelo é um exemplo de uma abordagem diferente para a escolha de uma capa:
2. Trabalhar com formas simples
O texto e a imagem devem se complementar. Por exemplo, coloque seu texto em uma parede vazia. Um plano de fundo uniforme não comprometerá a legibilidade.
Modelo Tilda (seção "Contatos")
Quando a repetição de elementos na imagem forma um padrão, pode parecer que eles preenchem todo o espaço, formando um fundo homogêneo. Isso não é bem assim - observe todos os pequenos detalhes que criam ruído visual e complicam a percepção da cópia. Nesse caso, pode ser uma boa ideia escurecer a imagem de fundo.
O plano de fundo parece uniforme, mas o texto se perde entre os elementos e se torna ilegível
3. Coloque o texto na área com elementos menos importantes
Quando o assunto principal de uma foto está localizado no lado direito, o texto deve ser colocado no lado esquerdo. Funciona da seguinte forma: um visitante do site pode ver claramente o rosto de uma pessoa, que é o objeto mais significativo na foto; outros detalhes são menos importantes.
Se a pessoa estiver no centro da imagem, não adicione texto em cima do rosto - é melhor abaixá-lo mais perto da área do corpo.
De modo geral, o rosto de uma pessoa é o objeto mais significativo na foto. Se o rosto estiver coberto de texto, os visitantes do site não se sentirão confortáveis, pois não conseguirão ver o objeto em detalhes nem ler a mensagem.
Especificações de imagem recomendadas para as capas Tilda
Formato: jpg
Dimensões: 1680×900 px
Pontos por polegada: 72 dpi
Modelo de cores: RGB
Taxa de compactação: 10
Dimensões: 1680×900 px
Pontos por polegada: 72 dpi
Modelo de cores: RGB
Taxa de compactação: 10
A imagem da capa torna o texto mais difícil de ler. Como corrigir isso
Escureça a imagem com filtros de gradiente.
Se a imagem de fundo selecionada dificultar ou impossibilitar a leitura da cópia, cubra-a com um filtro: uma opacidade maior do filtro resulta em um fundo mais escuro.
Se a imagem de fundo selecionada dificultar ou impossibilitar a leitura da cópia, cubra-a com um filtro: uma opacidade maior do filtro resulta em um fundo mais escuro.
É muito mais fácil ler o texto em um fundo contrastante. No entanto, tente não exagerar no escurecimento, pois os objetos na foto podem se tornar indistinguíveis. Observe o brilho original da imagem para decidir como aplicar o gradiente: para algumas fotos, 20% é suficiente, enquanto outras devem ser escurecidas em 70% ou mais. Experimente diferentes opções.
Para escurecer o plano de fundo do Tilda, abra o painel Settings (Configurações) do bloco e altere a porcentagem de opacidade ao lado dos campos "Filter start color" (Cor inicial do filtro) e "Filter end color" (Cor final do filtro). Se você definir os mesmos valores, o escurecimento será uniforme. Ou você pode aumentar a opacidade na área inferior para obter um gradiente suave.
Configurações de capa no Tilda com 2 configurações de filtro: Сolor e Opacity. Quanto maior a porcentagem de opacidade, mais denso será o preenchimento de cor
O escurecimento faz com que o plano de fundo pareça muito sombrio. Como corrigir isso
O escurecimento não é adequado para todas as imagens. As imagens brilhantes podem ficar pálidas ou sujas devido ao gradiente de preto. Pode ser criada uma atmosfera de tristeza. Escolha fotos mais escuras para evitar esse efeito.
Outra maneira de adicionar humor ao site é a tonificação. Opte por filtros de cores em vez do preto padrão. Use as cores oficiais da marca para o gradiente ou escolha uma cor do esquema de cores do site. Como alternativa, escolha uma tonalidade que combine com a paleta de cores da imagem.
Outra maneira de adicionar humor ao site é a tonificação. Opte por filtros de cores em vez do preto padrão. Use as cores oficiais da marca para o gradiente ou escolha uma cor do esquema de cores do site. Como alternativa, escolha uma tonalidade que combine com a paleta de cores da imagem.
Para criar um gradiente de cor no Tilda, escolha a cor para os filtros superior e inferior no painel Settings (Configurações). Você pode usar uma tonalidade única ou combinar duas cores diferentes para obter um efeito de duotom. A intensidade do filtro depende dos valores no campo "Opacity" (Opacidade).
Configurações de cores de filtro no Tilda, modelo de banda de cobertura
Adição de cores
Você pode colorir não apenas o plano de fundo, mas também o texto. Além disso, você pode combinar a tonalidade do plano de fundo e a cor do texto ao mesmo tempo. No entanto, é preciso ter muito cuidado para evitar que o site fique com uma aparência chamativa e berrante.
Dica: escolha duas cores e use uma como cor primária (90%) e outra como cor de destaque (10%).
Por exemplo, você pode aplicar o gradiente amarelo ao plano de fundo e adicionar um texto azul brilhante. Ou cobrir a imagem inteira com um filtro verde ácido e sobrepor o texto em laranja. O visual é brilhante e alegre, portanto, pode ser uma boa opção para um site de conferência ou de uma startup.
Dica: escolha duas cores e use uma como cor primária (90%) e outra como cor de destaque (10%).
Por exemplo, você pode aplicar o gradiente amarelo ao plano de fundo e adicionar um texto azul brilhante. Ou cobrir a imagem inteira com um filtro verde ácido e sobrepor o texto em laranja. O visual é brilhante e alegre, portanto, pode ser uma boa opção para um site de conferência ou de uma startup.
Use ferramentas on-line para ajudá-lo a escolher a cor certa para o texto ou o plano de fundo.
Coolors é um gerador de esquemas de cores que ajuda a verificar rapidamente se várias cores combinam entre si.
Materialpalette ajuda a criar uma paleta de cores para material design, sugerindo as opções de cores para o texto principal ou o plano de fundo.
ColorHunt oferece paletas prontas. Para adicionar uma tonalidade à sua página, copie seu código Hexadecimal.
Coolors é um gerador de esquemas de cores que ajuda a verificar rapidamente se várias cores combinam entre si.
Materialpalette ajuda a criar uma paleta de cores para material design, sugerindo as opções de cores para o texto principal ou o plano de fundo.
ColorHunt oferece paletas prontas. Para adicionar uma tonalidade à sua página, copie seu código Hexadecimal.
Ideias de design de capa para inspiração
Você pode fazer capas brancas, que geralmente ficam bonitas. Se você tiver uma foto de destaque com iluminação clara que apresente um objeto cativante, combine-a com um texto escuro ou colorido.
Não existe um método universal para selecionar imagens. Se você encontrar uma foto adequada, tente visualizá-la na capa: como ela será cortada, onde o texto pode ser colocado, que partes da imagem serão cobertas, se os elementos visuais afetam a legibilidade, se um gradiente pode ajudar. Esse é outro filtro que o ajuda a escolher fotos.
Também verifico se a capa parece natural na página. Ela deve ser consistente com outras imagens e com o layout geral. Portanto, é melhor selecionar todas as fotos para o site de uma só vez.
Também verifico se a capa parece natural na página. Ela deve ser consistente com outras imagens e com o layout geral. Portanto, é melhor selecionar todas as fotos para o site de uma só vez.
As capas que não mostram nada, exceto um objeto, parecem intrigantes. Também é muito mais fácil combinar o texto com essas imagens. Imagine que você solicitou uma sessão de fotos profissional e os objetos estão localizados em um fundo neutro: um sistema de som ou um carro em um fundo branco ou cinza. Isso torna a combinação de texto e imagens muito fácil.
Verifique a aparência da capa no celular. Em telas de baixa resolução, o design da Web pode ser completamente diferente do que é visto na versão para desktop. Se um elemento visual importante estiver coberto pelo texto, crie dois blocos separados: um para a visualização em desktop e outro para dispositivos móveis.
Ajuste a posição do texto e das imagens em ambos os blocos. Em seguida, use a opção "Block Visibility on Devices" (Visibilidade do bloco em dispositivos) no painel Settings (Configurações).
O intervalo de visibilidade para dispositivos móveis é de 0 a 980 px.
O intervalo de visibilidade para dispositivos desktop é de ≤980 px.
Ajuste a posição do texto e das imagens em ambos os blocos. Em seguida, use a opção "Block Visibility on Devices" (Visibilidade do bloco em dispositivos) no painel Settings (Configurações).
O intervalo de visibilidade para dispositivos móveis é de 0 a 980 px.
O intervalo de visibilidade para dispositivos desktop é de ≤980 px.
Um breve guia para criar uma capa
1
Escolha uma imagem de fundo que não comprometa a legibilidade: sem elementos importantes ou pequenos detalhes no centro.
2
Coloque o texto em uma área simples e homogênea da imagem.
3
Se o texto for difícil de ler devido aos elementos que distraem a imagem, escureça o plano de fundo com um gradiente.
4
Se a capa parecer confusa devido a um filtro preto, escolha uma foto diferente ou adicione uma tonalidade colorida à foto atual. Um filtro de gradiente brilhante melhorará o humor de seu site.
5
Use uma cor brilhante para o título. Juntamente com os filtros de plano de fundo, essa técnica contribui para criar a sensação certa.
Texto: Nikita Obukhov, Yana Plyushcheva
Edição, design, layout: Lera Merzlyakova, Ira Smirnova
Ilustrações: Julia Zass
Edição, design, layout: Lera Merzlyakova, Ira Smirnova
Ilustrações: Julia Zass
Se você gostou deste artigo, compartilhe-o com seus amigos! Agradecimentos ✌️
Veja também:
Livro de curso gratuito sobre como projetar, configurar e executar páginas de destino de alta conversão em
Guia prático gratuito para animação na Web com exemplos e técnicas,
e dicas sobre como usá-los
