Princípios de design da página de destino

1. Seções
2. Hierarquia visual
3. Chamada para ação (CTA) e formulários
4. Capa
5. Navegação
6. Cor
7. Fonte
8. Imagens
9. Ícones
10. Animação
11. Estilo geral
12. Recapitulação

Introduzimos o conceito de seções no segundo capítulo, quando analisamos a estrutura de um website - sua oferta, algumas informações sobre o projeto, o feedback, o cronograma e os blocos de chamada para ação - tudo isso é conhecido como seções em uma landing page.

As seções são úteis porque cada uma aborda uma questão específica - quanto custa algo, onde estamos localizados, por que somos os melhores -, o que significa que elas contêm uma ideia totalmente formada. Isso facilita a percepção das informações pelas pessoas, pois você abordou um assunto (por exemplo, "Para quem é este curso"), explicou-o e passou para o próximo. A consistência e a previsibilidade são duas coisas que o cérebro humano adora.

As seções de aterrissagem são diferentes dos slides de apresentação tradicionais, pois não são limitadas pela altura da tela. Uma única seção pode ocupar desde várias telas até uma pequena parte de uma única tela.

Embora os elementos de uma seção possam parecer diferentes, o importante é mantê-los ligados por um único tema.

Os espaços são necessários, mas nem sempre são suficientes para dividir claramente a página de destino em diferentes seções.

Um divisor na forma de uma linha ou de uma borda é outra maneira de marcar o início ou o fim de uma seção.

Para que a página de destino tenha uma aparência organizada, recomendamos que você use uma forma de borda em toda a página. O uso de estilos diferentes - ziguezagues emparelhados com linhas divisórias inclinadas, por exemplo - dificultará a digestão da página.

As seções podem conter títulos isolados ou apresentar subtítulos. Os títulos definem o ritmo e a estrutura da página e ajudam os usuários a identificar o início de uma nova ideia.

Por exemplo, se o primeiro título "Sobre o curso" tiver 62px, o título da próxima seção - "Para quem é o curso" - também deverá ter 62px. Isso fará com que a página pareça organizada, enquanto cada nova seção (e cada nova ideia) será fácil de ler.

Para tornar a estrutura da página legível não apenas para humanos, mas também para robôs, use a tag H1 para o título na capa da sua landing page e adicione a tag H2 a cada título de seção. Os mecanismos de pesquisa interpretarão isso como uma página bem planejada e corretamente estruturada.

Os cabeçalhos de seção nem sempre precisam ser pretos - eles também podem ser coloridos. Essa é uma medida bastante rara, pois é mais difícil encaixar os títulos coloridos no estilo geral da página.

Se for necessário destacar um elemento com cor, use o mesmo princípio que aplicamos ao tamanho do título - mantenha a cor de todos os títulos de seção idêntica para facilitar a leitura da página.

Percebemos que as páginas que apresentam seções com colunas colocadas uma após a outra são difíceis de ler.

Faz mais sentido visual que as seções vizinhas tenham o mesmo número de colunas - três, por exemplo. Essa página ainda parecerá desequilibrada.

Se você não tiver experiência em web design, é melhor evitar o uso de colunas, pois é muito difícil acertar. Você também pode alternar entre seções com colunas e seções com texto. Por exemplo, uma coluna de texto pode ser seguida por três colunas com ícones, depois uma frase-chave com uma imagem de fundo, seguida por mais três colunas ou uma coluna de texto, e assim por diante.

No início, falamos sobre uma seção que consiste em um título e um conteúdo. Isso é verdade na maioria dos casos. No entanto, às vezes há seções que não se encaixam nessa definição.

Uma galeria de fotos, uma parte central de texto ou um bloco de texto e uma imagem sem título são exemplos de seções "personalizadas". No entanto, se elas ainda contiverem uma ideia e responderem a uma pergunta, ainda estarão sujeitas aos mesmos princípios e precisarão ser espaçadas como todas as outras seções e destacadas usando uma cor de fundo ou uma forma de borda.

Aqui estão alguns exemplos de seções personalizadas:

A hierarquia visual é essencial para eliminar o caos em uma página de destino. "O que está sendo oferecido? Como posso usar isso? Por que eu preciso disso?" - essas são as perguntas para as quais uma pessoa deve obter respostas instantaneamente. As ferramentas visuais o ajudarão a fazer isso.

Por exemplo, o título principal de uma seção é maior do que o título dentro de uma seção. Nesse caso, a hierarquia visual ajuda a entender que os títulos pequenos são semelhantes em significado, com o título principal unindo-os em um só.

Mas você deve prestar atenção ao contraste. Os elementos grandes devem ser grandes. Se um título de segundo nível tiver 22px em comparação com um título de primeiro nível de 24px, o destaque visual será muito fraco, o que significa que não há hierarquia. Uma diferença de 1,5 a 2 vezes no tamanho da fonte é mais fácil de perceber e interpretar.

No contexto da hierarquia visual, "brilho" não se refere a um tom de cor, mas ao contraste e à quantidade de cores na página em relação ao esquema de cores principal.

Um cabeçalho verde com texto azul e um botão laranja criará um conflito visual, e os três elementos acabarão se perdendo. Esse é um exemplo exagerado, mas você deve pensar bem toda vez que quiser adicionar outra cor.

Se uma cor contrastante aparecer contra o fundo de uma cor mais geral, o elemento se tornará mais visível, chamando a atenção e dizendo: "Eu sou importante".

Se vários elementos estiverem localizados um ao lado do outro, isso provavelmente significa que eles estão ligados por um tema ou significado comum. Para combinar os elementos em um grupo, é necessário reduzir a distância entre os elementos dentro do grupo e aumentá-los do lado de fora.

Vamos dar uma olhada em alguns exemplos:

Vários grupos de elementos podem formar uma única composição em uma determinada seção. Por exemplo, um título e um subtítulo podem formar um grupo, enquanto um bloco de texto com uma imagem em duas colunas pode formar outro.

Cada grupo também pode ter subgrupos. Os elementos de um subgrupo são reunidos de acordo com o mesmo princípio: os elementos relacionados em termos de significado são colocados mais próximos uns dos outros do que de todos os outros elementos e subgrupos.

Você pode destacar um elemento de forma tão eficaz usando o espaço em branco quanto manipulando seu tamanho ou cor.

Elementos densamente organizados são como o galpão do seu avô - você sabe que a chave inglesa está em algum lugar, mas é impossível encontrá-la, então você fica com raiva e perde tempo procurando por ela.

Você pode usar um plano de fundo brilhante ou um botão contrastante para destacar o bloco entre outras seções da página de destino.

Para incentivar alguém a preencher um formulário, você pode especificar o que acontecerá depois que a pessoa clicar no botão correspondente.

"Ligaremos de volta em uma hora para coordenar a entrega", "Enviaremos um lembrete duas horas antes do webinar", "Enviaremos o e-book para o seu e-mail", "Enviaremos um boletim informativo educativo apenas uma vez a cada duas semanas" - esses são exemplos de mensagens redigidas de forma simples com um toque humano que incentivam a confiança.

Às vezes, a página de destino é um link intermediário no funil de vendas, com o formulário atuando como um ímã de leads.

Um ímã de leads é a troca de um contato (um e-mail ou número de telefone) por algo valioso, como um e-book, um desconto, um webinar, uma lista de verificação ou dados de pesquisa. Isso cria o seguinte funil:

• Obter gratuitamente
• Compre por um preço razoável (adquira um curso)
• Pós-venda (consulta pessoal)

Por exemplo, alguém se inscreve e recebe o primeiro capítulo de um curso on-line gratuitamente, o que o inspira a comprar o curso completo e, por fim, a solicitar uma consulta pessoal.

Aqui estão alguns exemplos de como aplicar texto às fotos acima:

As ilustrações são uma boa alternativa às fotos de capa, pois definem o estilo da landing page e a tornam mais interessante.

Você pode encomendar ilustrações personalizadas de um ilustrador ou encontrá-las em um banco de fotos.

O layout ideal nesse tipo de capa de landing page seria colocar o texto à esquerda da ilustração. Um formulário de feedback ou um botão de ação de destino também pode ser adicionado ao cabeçalho.

Essa opção não é pior do que uma capa com uma foto - às vezes, pode ser até melhor. Deixe o fundo branco e enfatize a tipografia - trabalhe na composição, no tamanho e na cor das fontes.

Você pode usar uma cor monocromática ou um gradiente como plano de fundo. Com a ajuda do Tilda Colors, você pode copiar cores e gradientes ou baixá-los no formato PNG com resolução de 1680px, adequado para imagens de tela cheia.

Outra opção é usar gráficos abstratos: formas geométricas, ondas, linhas ou um padrão. O principal aqui é manter o cabeçalho legível contra o plano de fundo gráfico.

Abordamos a redação do texto da capa no segundo capítulo.

Quanto ao tamanho e à forma do texto, devemos nos lembrar de que o título e o subtítulo da capa não devem ser exagerados. Idealmente, isso significaria uma frase simples no cabeçalho explicando a essência da oferta e uma ou duas frases no subtítulo que complementem e abram a oferta. Uma ou duas linhas para o cabeçalho e duas ou três linhas para o subtítulo devem ser suficientes.

O menu é usado na capa se a página for longa e você precisar navegar entre as seções. O menu tem uma função auxiliar aqui - na maioria dos casos, você pode passar sem ele.

Uma regra geral para qualquer menu é evitar a sobrecarga a todo custo. Isso é ainda mais relevante para o menu da página de destino, pois ele deve ajudar o usuário a encontrar informações sem distraí-lo da ação desejada.

Um menu fica sobrecarregado quando há muitos elementos. É por isso que você pode remover com segurança o excesso (por exemplo, botões de redes sociais), reduzir os itens do menu ao mínimo e encurtar os nomes para uma palavra para cada item.

O plano de fundo do menu pode ser transparente, transparente ou colorido.

Plano de fundo do menu transparente. Esse menu tem um toque de leveza e é também o estilo mais versátil e comum. Capas sem pequenos detalhes funcionam melhor com o menu transparente. Os filtros de cores também funcionam bem aqui.

Menu semitransparente. Isso será suficiente se você quiser aumentar a legibilidade do menu sem sobrecarregar a primeira tela.

Menu com fundo colorido. Com 100% de opacidade, a cor do menu se torna uma base para o texto, tornando-o perfeitamente legível. Esse método tem duas desvantagens: em primeiro lugar, o menu fica muito visível e chama a atenção e, em segundo lugar, é uma ferramenta estilística bastante forte que não é adequada para todas as páginas de destino.

Quando classificados por tipo de comportamento, os menus podem ser estáticos, fixos ou podem aparecer durante a rolagem.

Os menusestáticos estão localizados na parte superior da página (acima da capa ou sobrepondo parte da capa), permanecendo no lugar e desaparecendo do campo de visão durante a rolagem.

Os menus fixos são fixados na parte superior da página de destino e permanecem visíveis durante a rolagem. Também pode haver dois menus: um fica na parte superior da página e o outro aparece na rolagem. Nesse caso, o segundo menu geralmente contém um número de telefone ou um botão de registro para simplificar a chamada para ação.

Os menus combinados aparecem quando os menus estáticos e fixos são usados simultaneamente. O menu estático contém o logotipo, os itens de menu e os contatos, enquanto o menu fixo contém um botão de chamada para ação.

Você também pode criar um menu simples para a versão desktop da sua landing page e criar um menu de hambúrguer com informações reduzidas ou outras informações para a versão móvel.

Menu de hambúrguer. Normalmente usado em versões móveis para tornar o menu mais compacto. Às vezes, também é usado na versão para desktop para tornar a página mais concisa.

Um menu na forma de marcadores ou pontos fixados na lateral da página distrai pouca ou nenhuma atenção, mas ajuda os usuários a navegar. Os pontos indicadores informam ao usuário qual parte da página ele está visualizando. Ao passar o mouse sobre o indicador, ele verá uma dica de texto e, ao clicar nele, irá para a seção correspondente.

Os indicadores de rolagem são uma versão leve da barra de navegação lateral na parte superior da tela. À medida que a barra de progresso se move da esquerda para a direita, ela representa o quanto o usuário rolou a página para baixo.

Um indicador de progresso é um elemento básico da boa experiência do usuário. Se você clicar em um link e a página não for carregada instantaneamente, você verá que o processo foi iniciado, há uma reação.

O botão de rolagem para cima é usado em páginas de destino longas (geralmente 5 telas ou mais). Esse é um elemento auxiliar que não deve ser muito brilhante ou contrastante para não entrar em conflito com o botão de ação de destino. Os melhores recuos do botão em relação às laterais são de 20 a 30 px.

Clicar no logotipo leva ao início de uma página ou à página inicial. Essa ação se tornou bastante comum.

Quando o usuário termina de rolar a página, ele não deve se deparar com um beco sem saída. Aqui estão algumas opções de navegação para o final da página:

• Chamada para ação: Formulário ou botão
• Links para materiais adicionais: Recapitulações de eventos anteriores, links para outros webinars
• Um rodapé com navegação no site se a aterrissagem fizer parte de um site com várias páginas. A escala do rodapé não deve interferir nem desviar a atenção da ação de destino.

Colocar um formulário ou botão de chamada para ação no final é uma das coisas mais sensatas que você pode fazer ao projetar sua landing page. Em teoria, a página de destino existe para converter visitantes em compradores ou clientes em potencial - qualquer navegação extra pode desviar a atenção desse objetivo.

Por outro lado, se um usuário não tiver informações suficientes e não tiver oportunidade de aprender algo mais sobre sua empresa, a página pode ser percebida como um beco sem saída, o que significa que há uma chance de o usuário fechar sua página e ir para o site de um concorrente.

A regra principal aqui é que não deve haver muitas cores na página de destino - apenas uma ou duas. A cor de destaque não deve ocupar mais de 10% do espaço total, pois ela apenas chama a atenção para os elementos que devem estar visíveis.

Na Tilda, chamamos essa proporção de 90:10 de "regra da butique". Nas lojas caras, as coisas nunca ficam amontoadas em um cabide em corredores estreitos. Pelo contrário, cada item tem espaço suficiente ao seu redor para ser notado.

As lojas caras não precisam provar ou explicar por que têm preços altos. Elas estão confiantes em sua oferta e seus clientes estão confiantes nelas. Sem confusão.

Uma página de destino é essencialmente a oferta de um produto ou serviço. Quando as pessoas gastam seu dinheiro, elas querem ter certeza de que estão pagando pelo seu conhecimento especializado ou pela excelente qualidade. O uso comedido das cores reforçará a confiança delas nesse aspecto.

O cérebro humano usa ativamente os estereótipos: Ele espera que a página de destino de um salão de beleza seja clara e que a de um salão de tatuagem seja preta. O verde é associado a produtos frescos, enquanto a tecnologia é normalmente associada à cor azul. As regras não estão gravadas em pedra, mas simplificam a comunicação, como qualquer outro padrão.

Há muitas paletas prontas na Internet, mas a desvantagem é que elas oferecem combinações complexas de 3 a 5 cores que ficarão ridículas em uma página de destino.

Se precisar de ajuda para escolher uma tonalidade específica, é mais confiável usar o seguinte:

TildaColors é uma coleção de paletas de cores em que você pode escolher uma cor ou um gradiente de duas cores e usá-lo em seus projetos. Clique na sua cor favorita para copiar seu código para a área de transferência.

Você também pode fazer download de qualquer cor ou gradiente no formato PNG com resolução de 1680px, adequado para imagens em tela cheia.

Material UI Colors é uma paleta de cores para o Material Design.

Color Claim é um projeto do designer Tobias Van Schneider, que vem coletando combinações de cores bem-sucedidas desde 2012. Sua coleção consiste principalmente de combinações de duas cores, ideais para o design de páginas de destino.

WebGradients é uma coleção gratuita de 180 gradientes lineares e combinações de cores. A maioria dos gradientes aqui é composta de duas cores.

Há um pequeno número de páginas de destino que visam transmitir a atmosfera de felicidade e alegria, convencendo as pessoas de que elas se divertirão. Os exemplos incluem festivais, concertos e outros eventos. Nesse caso, a regra da "boutique" pode ser deixada de lado e a seleção de cores pode ser aplicada de acordo com o clima que você está tentando criar usando seu gosto e intuição.

É essencial prestar atenção ao peso da fonte ao criar uma página de destino.

O peso da fonte refere-se à espessura ou à espessura dos caracteres do texto que devem ser exibidos. Os valores mais conhecidos são normal e negrito. Algumas fontes suportam apenas essas duas opções, mas a maioria tem configurações adicionais de espessura: light, normal, medium, semi-bold e bold.

As páginas de destino de uma maratona e de um produto cosmético caro têm tonalidades diferentes, que podem ser expressas por várias combinações de fontes.

Uma combinação básica que se adequa a qualquer projeto. Normalmente, é usada se você precisar criar uma página de destino sem destaques adicionais.

Uma combinação popular que é sutil e neutra, mas capaz de mostrar impulso e energia. Essa combinação pode funcionar para aterrissagens relacionadas a movimento e atividade.

Uma combinação de fontes para páginas de destino relacionadas a tecnologia ou estética que mantém um tom moderno e progressivo. Requer muito espaço em branco e pequenos destaques brilhantes.

Esta seção abordou vários aspectos pequenos e altamente práticos do uso de fontes. Se você quiser saber mais, vá para"Como escolher a fonte certa para um site ou artigo".

As imagens são mais fáceis de perceber e mais rápidas de ler - é melhor colocar uma foto do produto em vez de uma descrição detalhada de sua aparência.

Aqui estão alguns exemplos de imagens de aterrissagem:

• Livro: uma expansão
• Aplicativo: um vídeo ou capturas de tela da interface
• Passeio: Pontos de referência ao longo da rota
• Serviço de entrega de alimentos: uma caixa de alimentos
• Webinar: um retrato do apresentador
• Conferência: uma imagem do local do evento

Em geral, as pessoas desconfiam de sites desconhecidos, o que faz todo o sentido, pois qualquer pessoa pode criar um site, e há muitos fraudadores na Internet. As fotos são um dos fatores que ajudam a criar confiança. Isso só funciona se as imagens forem genuínas e mostrarem seu produto ou pessoas reais.

Se você não puder tirar suas fotos, um banco de fotos pode ajudar. Encontrar fotos originais é fundamental para que a página de destino tenha uma boa aparência. O marketing existe há muito tempo, e há muitos clichês de imagens que as pessoas consideram irritantes: Cofrinhos, fotos de pessoas no topo de montanhas e apertos de mão entre pessoas de terno.

Não há necessidade de tentar transmitir uma ideia usando associações simplistas. Uma foto de alguém subindo uma escada não diz "Sou um coach bem-sucedido" - provavelmente é apenas uma foto ruim.

Se você estiver realizando um workshop pela primeira vez e ainda não tiver fotos, poderá encontrar imagens em close-up de eventos semelhantes em um banco de fotos que o ajudarão a transmitir a atmosfera e a emoção.

Se estiver mostrando fotos da sua equipe, talvez seja melhor contratar um fotógrafo para garantir que as imagens sejam uniformes e consistentes com o estilo da página de destino.

Você também pode aplicar um filtro de cores para tornar suas fotos mais uniformes. Se você tiver uma cor corporativa, ela também manterá a identidade do projeto.

A maneira mais fácil de equilibrar fotos diferentes é torná-las em preto e branco.

Os ícones lineares finos são adequados para páginas com design minimalista e fontes finas. Se a página tiver títulos grandes ou fontes em negrito, os ícones preenchidos ou com contornos largos funcionarão melhor.

Todos os ícones em uma landing page devem ter o mesmo estilo. A mistura de ícones de linha com ícones coloridos e a troca de ícones finos e cheios leva à falta de cuidado. Até mesmo a espessura das linhas é importante - devem ser todas iguais. Nem todas as pessoas perceberão que os ícones são de conjuntos diferentes, mas ainda assim terão um palpite de que algo não está certo.

Se estiver usando o Tilda para criar sua landing page, você poderá usar ícones gratuitos da coleção Tilda Icons incorporados ao editor. Abra o bloco de conteúdo com uma imagem, clique no ícone de pesquisa e vá para a guia Ícones do Tilda.

Os ícones são divididos em mais de 45 categorias por tipo de negócio e podem ser pesquisados por palavras-chave. Os designers criam regularmente novos conjuntos de ícones e as categorias se tornam maiores. Se você precisar editar um ícone - alterando sua cor, por exemplo -, poderá fazer o download de um conjunto gratuitamente seguindo este link:

Esse projeto foi criado pelo designer Dario Ferrando. 730 ícones de linha divididos em categorias estão disponíveis gratuitamente.

Uma grande coleção de ícones com uma conveniente função de pesquisa. Os arquivos podem ser baixados no formato PNG ou SVG. Os ícones podem ser usados gratuitamente se você creditar o autor.

Ícones exclusivos e ilustrações em 3D. Disponíveis gratuitamente em baixa resolução com atribuição obrigatória.

O preço médio de um ícone personalizado desenhado por um ilustrador profissional é de US$ 10. Os ícones prontos geralmente são vendidos por assinatura - cerca de US$ 10 por mês - ou como parte de um conjunto.

Os ícones estão sujeitos às mesmas leis de direitos autorais que as fotos, portanto, preste muita atenção ao licenciamento quando usar ícones em sua landing page - descubra se os ícones são gratuitos ou pagos e pesquise em que condições eles podem ser usados.

O uso de animação deve ser moderado para evitar que a página se transforme em uma apresentação de PowerPoint do ensino médio.

Veja como você pode evitar a animação excessiva:

A animação torna a página mais atraente. Ela não tem nenhum significado além de ser uma forma de entretenimento e uma maneira de tornar a página menos monótona. Se você animar tudo, a página se tornará monótona novamente, além de irritante.

O desempenho do site é uma parte importante a ser considerada ao usar animação. Certifique-se de testar as páginas de destino animadas em computadores mais fracos, pois nem todos os dispositivos são capazes de carregar a animação rapidamente.