15+ Lindos cabeçalhos de websites e porque funcionam tão bem

Qual é a primeira coisa que um utilizador vê no seu website?

Exactamente, o cabeçalho.

Se isso não for suficientemente apelativo, se não trouxer clareza, os seus utilizadores podem simplesmente desaparecer, e talvez nunca mais voltar.

Não queremos isso, pois não?

Os cabeçalhos do website são uma parte central do design de um website. Eles desempenham um papel fundamental para captar a atenção dos usuários e estabelecer uma conexão com os visitantes do site.

É por isso que, nas linhas seguintes, vamos abordar alguns princípios de design de cabeçalho que você deve estar ciente ao projetar um cabeçalho de site.

Princípios de Design de Cabeçalhos a Seguir

Estudos de pesquisa descobriram que os olhos dos utilizadores se movem numa página Web seguindo um dos 3 padrões:

• O padrão de Gutenberg

Fonte de Imagem: https://vanseodesign.comThe O padrão do Gutenberg pode ser aplicado a conteúdos de texto pesado. Sugere que os olhos dos leitores varram a página e para baixo numa série de movimentos horizontais.

Exemplo:

>

• O padrão em forma de Z

O padrão Z define o caminho que os olhos dos usuários seguem ao digitalizar uma página, um caminho que toma a forma de uma letra Z. É recomendado para o design de páginas de destino, que os leitores digitalizem rapidamente.

>

Exemplo:

>

>

>

• O padrão em forma de F

Este padrão descreve o estilo de leitura de blocos de conteúdo mais comumente usado no meio online. Os usuários rapidamente escaneam uma página web, e seus olhos seguem um padrão F.

Exemplo:

>

Sem entrar em mais detalhes sobre estes padrões, gostaríamos de reforçar que para qualquer um destes modelos, a linha horizontal superior é onde os visitantes começam a escanear uma página.

O que integrar em um cabeçalho de website?

Estes padrões mostram porque um web designer deve decidir cuidadosamente o que os usuários devem ver primeiro. O cabeçalho deve servir como um gancho que irá chamar sua atenção e convidá-los a explorar o resto da página.

Não há chance de causar uma segunda impressão. Então, você deve pensar duas vezes sobre o que incluir no cabeçalho:

• Strong hero image

Uma imagem de herói é uma imagem de banner muito grande que é mostrada acima da dobra em uma página da web. Está incluída na secção de cabeçalho e é a primeira coisa que os utilizadores vêem quando chegam a um website. As imagens de herói também têm o propósito de atrair a atenção dos visitantes para o ponto de venda único (USP) do negócio. A melhor prática diz que a utilização de rostos de pessoas reais nas imagens do herói pode ajudar os visitantes a relacionarem-se melhor com a marca. A comunicação torna-se mais humana e pessoal.

Source: Drift.com

• Unique selling point (USP)

O USP é uma frase que explica a razão da existência de um negócio. Ela deve revelar o que o negócio faz, porquê e para quem. Deve também enfatizar características e benefícios únicos, que fazem com que a marca se destaque entre seus concorrentes. Uma USP forte é vital para transmitir a mensagem certa aos visitantes do site, e, em última análise, para convertê-los em clientes.

Fonte: miro.com

• Nome da marca

A marca acostuma as pessoas à identidade do site ou reforça a imagem que as pessoas têm da sua identidade comercial.

A imagem deve refletir a personalidade da sua marca e garantir que a voz da sua marca seja consistente em todo o site. Ela deve ser facilmente reconhecível mesmo se recortada do cabeçalho do site. E quando colocada no cabeçalho do website, deve desempenhar um papel fundamental no estabelecimento de uma conexão pessoal com cada usuário.

Source: carolinaherrera.com

• Vídeo do produto

>

Porque leva apenas 50 milissegundos para que os usuários formem uma opinião sobre um website, significa que você deve ter as mensagens mais importantes no cabeçalho. É por isso que muitas empresas não esperam que seus usuários rolem para baixo e cheguem às características de seu produto/serviço, mas estão usando o poder do vídeo para transmitir melhor sua mensagem. Também não esqueçamos que 78% das pessoas vêem vídeos online todas as semanas, e 55% vêem vídeos online todos os dias.

>

>>

Source: wistia.com

>
• Call to action (CTA)

A CTA é uma mensagem (geralmente em um botão), que aciona uma certa resposta dos visitantes do site. A chamada para ação deve ser claramente definida e fácil de entender pelos visitantes do site. Naturalmente, uma CTA colocada no cabeçalho, exatamente onde os visitantes começam a sua viagem ao site, aumenta as chances de obter a ação desejada dos respectivos usuários.

>

>

Source: creatopy.com

• Produto com

No caso de você dirigir uma loja de eCommerce, você vai querer enfatizar a qualidade e conveniência de um determinado produto, e a melhor maneira de fazer isso é incluir esse produto no cabeçalho. A atenção dos usuários será direcionada para esse melhor negócio, e eles serão propensos a entrar no processo de compra.

>

>

>

Source: amazon.com

Em qualquer um dos casos acima, a regra geral é: manter simples, manter claro, tornar o cabeçalho envolvente! A pesquisa mostra que “a diferença média de como os usuários tratam as informações acima vs. abaixo da dobra é de 84%”. Portanto, é melhor concentrar seus esforços em reduzir esses números o máximo possível. E você fará melhor se tiver definido alguns objetivos quanto ao que você quer transmitir.

Websites grandes, como www.youtube.com, limitam o espaço dedicado ao cabeçalho a apenas uma pequena quantidade. Isto é feito de propósito, pois a intenção é deixar a atenção dos usuários ser direcionada para algo mais importante, como produtos, ou serviços, ou vídeos (ex. YouTube).

Por vezes você nem precisa de um cabeçalho, ou se precisar, você precisa apenas de um pequeno.

Depende das particularidades do site. Pense nisso e dê ao seu site a personalidade que ele precisa, não importa o que as tendências do web design estão “dizendo” de vez em quando.

O que o cabeçalho do seu site inspira?

Além de transmitir certas mensagens, você também pode considerar a possibilidade de incutir certas emoções nos leitores. Dependendo do propósito que você dá ao cabeçalho, ele pode inspirar nos leitores um dos seguintes:

• Curiosidade

Para certos websites, seria adequado configurar um cabeçalho que inspira curiosidade nos leitores. Eles vão querer saber mais, vão desejar mais, vão apressar-se em explorar o resto da história.

É o que eu sinto sobre este cabeçalho do Canva. Eles fazem uma enorme promessa ali mesmo: “Desenhar qualquer coisa”. E você está convidado a testar isto. Você consegue resistir?

>

• Ação

Em alguns casos, é melhor agitar a ação diretamente do cabeçalho. Com uma chamada para ação, você pode convidar os usuários a clicar em um botão, ou realizar alguma outra interação com o site, direto do taco. No caso do Planable, seu USP está diretamente conectado ao CTA abaixo. Também, se você não estiver pronto para comprar, há uma opção para agendar uma demonstração também.

>

>

• Trust

Pode ser útil começar por inspirar confiança em seus visitantes. Você quer que eles tomem algumas medidas mais tarde, e para isso, eles têm que se sentir plenamente confiantes de que tomam a decisão certa.

>

Vejamos como a Salesforce faz isso. Eles afirmam que são o maior CRM do mundo. Ok, você pode dizer que 99% das empresas lá fora não são as primeiras em seu campo. E você estaria certo. Mas, se você ler abaixo, definitivamente há algo que você pode usar. Há um estudo de caso que mostra como o produto é eficiente. Você mesmo pode aproveitar esse estudo de caso.

• Pain

Por que na terra você gostaria de inspirar dor nos leitores, especialmente a partir do cabeçalho? Bem, muitas empresas têm o seu marketing baseado no princípio FUD (Medo, Incerteza, Dúvida). Em uma fase inicial do processo de conversão, o medo/dor desencadeará a decisão de aplicar imediatamente uma solução e fazer com que a dor desapareça.

Esta pode ser uma abordagem para serviços de segurança cibernética, serviços de segurança física, mas também em saúde ou fundos de pensão.

>

Tal abordagem pode ser alavancada em campanhas que querem conscientizar as pessoas de que é preciso vacinar contra a COVID, ou usar cinto de segurança.

>

• Riso

Tal abordagem pode ser alavancada em campanhas que querem conscientizar as pessoas de que é preciso vacinar contra a COVID, ou usar cinto de segurança.

>

• Riso

>

Tal abordagem pode ser alavancada em campanhas que querem conscientizar as pessoas de que é preciso vacinar contra a COVID, ou usar cinto de segurança. E não há melhor maneira de fazer isso do que fazê-los rir. E rir alto. Um senso de cumplicidade está sendo formado e você terá seus usuários ao seu lado, enquanto eles estão explorando o website.

• Familiaridade

Conectar a situação dos usuários com uma situação similar apresentada no cabeçalho pode criar um certo grau de familiaridade.

Tipos de Cabeçalhos para Diferentes Tipos de Websites

Dependente das especificidades do website, um cabeçalho se encaixará melhor no design geral do que outro. Assim, você deve ter uma idéia clara do tipo de cabeçalho que melhor se adequará ao seu próprio website (seja ele eCommerce, blog, portfólio, jornal online, etc.).

• CTA-focused header

No caso do Avental Azul, o cabeçalho do website usa um grande vídeo, ao invés de uma grande imagem de herói. Ele transmite uma sensação de aconchego, familiaridade, apetite.

>

Próximo, temos um CTA que convida o usuário a tomar medidas para se beneficiar da mesma experiência aconchegante e gostosa.

>

>>

>

O site CrazyEgg vem com um cabeçalho que convida os usuários a levar seu produto para uma demonstração ao vivo. O produto deles é perfeito para tais demonstrações em tempo real. E ele prova instantaneamente os benefícios do produto. Eles também estão usando uma deixa visual, apontando para o CTA: a mão do homem no balão está direcionando o olho para o botão.

>

>>

>

• Brand-focused header

>

Este é um belo exemplo de um site com um cabeçalho focado na identidade da marca e elementos de marca. Ele inclui o logotipo, uma réplica das cores do logotipo da marca na parte superior, bem como o seu slogan.

>

>

>

>

• Cabeçalho focado no conteúdo

>

Isso é muito adequado para blogs, e revistas, que promovem artigos e histórias.

Mas, também encontrei algumas exceções.

Patagônia não está promovendo sua loja na página inicial, mas, eles empurram histórias que mostram seu compromisso de fazer uma mudança no mundo. Esta história atual, apresentada no cabeçalho do site, é sobre escravidão e ativismo.

>>

No caso do Ikea, o lado esquerdo da tela avisa aos visitantes de uma das lojas online, enquanto a outra metade avisa aos usuários para ler a história do Ikea.

>

• Cabeçalho com foco no fundo do vídeo

BUKWILD integrou 3 vídeos diferentes no cabeçalho do site. Cada um dos vídeos pode ser reproduzido colocando o mouse sobre a seção correspondente. O que é interessante nisto é a forma criativa como eles usam os vídeos como partes de uma “imagem” maior, uma que representa a sua marca.

• Cabeçalho focado no produto

No caso da Cropp, uma loja de moda online, as últimas coleções estão sendo apresentadas no cabeçalho.

Threadless.com coloca o wall-art em um contexto e apresenta um CMYK Squad. O cabeçalho também inclui um CTA claro, para todos aqueles que sentem que pertencem de uma forma a esse cenário apresentado no cabeçalho pelo “squad”.

Cabeçalho com foco na marca pessoal

No caso do blog de viagens Alex em Wanderland, no cabeçalho do site, além de uma foto do Alex, os usuários podem ver o início de uma história neste cabeçalho: “Cinco anos e contando com a estrada…”. Este é um convite para os leitores quererem explorar mais histórias.

>>

Para terminar…

>

Os líderes contribuem muito para o sucesso ou fracasso de um website. Tecnicamente falando, esta parte superior é naturalmente a primeira coisa no website com que as pessoas interagem.