Os sites variam em estilo, formato e qualidade. Mas uma coisa que todos eles têm em comum? Cabeçalhos — aquela faixa na parte superior que facilita a navegação.

 

Apesar de ocupar um espaço mínimo, os cabeçalhos são o elemento mais engajado em um site. As empresas que desejam deixar uma boa impressão se esforçam para encontrar um equilíbrio perfeito, proporcionando uma experiência fácil e intuitiva, mas única e estimulante.

Neste post, compartilharemos 24 exemplos de cabeçalhos de sites enquanto detalhamos:

• Exatamente o que é um cabeçalho de site
• O que incluir no cabeçalho do seu site
• Práticas recomendadas para otimizar para conversão

Dessa forma, você pode fornecer uma experiência sólida ao usuário e, ao mesmo tempo, apoiar suas metas de marketing.

O que é um cabeçalho de site?

Um cabeçalho de site é uma faixa tipográfica visual ou menu que normalmente é executado na parte superior de um site. Ele contém vários componentes clicáveis, como um logotipo, tags de navegação, botões de login e muito mais. Praticamente todos os sites — mesmo os mais básicos — apresentam um cabeçalho em sua página inicial, e muitos têm variações do cabeçalho no restante de suas páginas.

Aqui está um cabeçalho de site muito básico e reconhecível instantaneamente:

 

Conforme mencionado acima, os cabeçalhos dos sites têm uma dupla responsabilidade:

• Navegação. Em primeiro lugar, eles precisam ser capazes de orientar efetivamente os visitantes do site para outras páginas do site.
• Marketing. Quando projetado corretamente, um cabeçalho pode (e deve) ser um ativo de marketing e um veículo promocional para o seu negócio.

O que um cabeçalho de site deve incluir?

Abaixo, você encontrará vários elementos que podem aparecer no cabeçalho de um site. Mas é importante observar que nem todos os cabeçalhos apresentarão tudo isso. Tudo depende do seu setor, tipo de negócio e formato do site. Além disso, um cabeçalho pode mudar dependendo da página em que você está no mesmo site. Por exemplo, o cabeçalho da página inicial pode apresentar de 5 a 6 elementos clicáveis, enquanto na página de recursos, o cabeçalho pode incluir menos ícones clicáveis.

Logotipo

Com poucas exceções, todas as variações dos cabeçalhos de um site apresentarão com destaque o logotipo da empresa que, quando clicado, leva o usuário de volta à página inicial. Se eles se perderem, sempre podem contar com isso para direcioná-los de volta ao território familiar.

Links de navegação

Isso também é essencial para qualquer cabeçalho de site. Normalmente, você deseja manter suas principais opções de navegação entre 5 e 7 elementos, mas as páginas para as quais você vincula variam dependendo do seu nicho. Para algumas empresas, o menu de navegação tem links para a página sobre nós , página de produtos ou serviços , página de preços, página de recursos e página de contato. Para outros, é na página de carreiras ou na página de pacientes iniciantes. Tudo depende da indústria.

A maioria dos cabeçalhos de sites de tecnologia e SaaS se parece com isso:

• Produto oferece aos visitantes uma visão detalhada dos vários recursos ou tipos de produtos.
• Soluções leva os visitantes a uma página/hub onde eles podem ver como a plataforma da empresa pode ser aproveitada em diferentes cenários, ou ver diferentes pacotes.
• Os recursos geralmente contêm o blog, estudos de caso ou depoimentos , base de conhecimento e/ou whitepapers.
• O preço levará os visitantes a uma página abrangente na qual os vários pacotes de assinatura da plataforma são exibidos. Vale a pena notar que algumas plataformas SaaS evitam tornar seus pacotes de preços públicos. Isso é especialmente verdadeiro em relação a soluções corporativas que são personalizadas e não possuem uma estrutura de preços uniforme.

Barra de pesquisa

Nos primórdios da internet, as barras de busca eram muito mais difundidas e muito usadas do que são hoje. Você reconhecerá uma barra de pesquisa quando a vir, com a maioria dos sites usando um ícone de lupa para indicar a função do elemento.

É mais provável que você encontre uma barra de pesquisa no cabeçalho do menu do blog do que no cabeçalho da página inicial. Ainda assim, alguns sites o apresentam no cabeçalho da página inicial. Brightcove, uma plataforma líder de hospedagem de vídeo, curiosamente apresenta uma barra de pesquisa, mas não apresenta o elemento de preço mais comum.

 

Carrinho de compras

Um grampo de sites de comércio eletrônico , este CTA deve estar no canto superior direito e um ícone de carrinho de compras ou sacola de compras.

 

Botões de mídia social

Embora sejam mais comumente exibidos no rodapé de um site, alguns cabeçalhos de sites incluem links para canais sociais. Aqui está um exemplo:

 

Campo de login

Qualquer site que tenha uma opção de login também deve incluir o campo de login em seu cabeçalho. Se você for um cliente ativo, terá um usuário e uma senha que poderá digitar para obter acesso. A maioria das principais plataformas também oferece a opção de obter acesso por meio de sua conta do Google.

 

CTA

Uma coisa que você notará em quase todos os exemplos deste post é que o cabeçalho contém um call to action . Como esse é o elemento mais usado em um site, convém aproveitá-lo para ajudar a apoiar seus objetivos de negócios. Isso pode ser usar uma ferramenta gratuita, inscrever-se em algo, entrar em contato com a empresa, iniciar uma avaliação gratuita e muito mais.

 

Exemplos e tendências de cabeçalho de site

Embora tenham apenas alguns componentes, existem várias maneiras de configurar o cabeçalho do seu site. Vejamos ainda mais exemplos de sites para fornecer ideias e inspiração.

Cabeçalho de linha única com logotipo alinhado à esquerda

Básico, mas eficaz, o Zoho tem apenas quatro elementos de navegação clicáveis, além de uma barra de pesquisa. Observe também como a Zoho optou pelo alinhamento correto. Isso acentua o logotipo, dando-lhe mais espaço para chamar a atenção dos visitantes.

 

Cabeçalho de linha única com uma barra de notificação

Embora o cabeçalho em si seja bastante comum, o banner no topo destina-se a chamar a atenção para algo novo, importante e/ou emocionante. A Elementor usou isso recentemente para anunciar que agora oferece hospedagem em nuvem para WordPress .

 

O SE Ranking está atualmente usando sua barra de notificação para promover o suporte à Ucrânia:

 

Esses banners, é claro, incluirão um CTA . Uma vez clicado, os visitantes serão direcionados para uma página de destino designada detalhando a oferta no banner.

Cabeçalho de duas camadas

Um cabeçalho de duas camadas pode ajudar a apresentar mais opções de navegação sem sobrecarregar os visitantes com uma linha contínua de ícones.

 

Header de duas camadas com barra de notificação

Amplitude adicionou uma barra de notificação acima de seu cabeçalho de duas camadas para promover sua próxima conferência. A barra de notificação tem o mesmo comprimento do cabeçalho, tornando-a menos confusa e mais parecida com uma seção separada do site.

 

Cabeçalho com uma barra de utilitários (barra adesiva)

Alguns sites afixam o cabeçalho para que ele fique com os visitantes enquanto eles rolam a página. Sua lógica é simples: forneça aos seus visitantes a opção de navegar para qualquer parte do seu site a qualquer momento.

 

Este cabeçalho fica com você até a parte inferior do site.

Cabeçalho flutuante

Como visto na página inicial do Mixpanel , um cabeçalho flutuante é semelhante a uma barra pegajosa, a diferença é que quando você rola para baixo, você vê a página da web abaixo e acima do cabeçalho, criando assim um efeito flutuante.

 

Cabeçalho com mega menu

Alguns sites não podem ser escassos com as informações que compartilham em seus cabeçalhos. Nesses casos, usar um mega menu pode ser muito útil.

 

Cabeçalho com navegação em vários sites

Geralmente vistos em sites de varejo e comércio eletrônico , os cabeçalhos multi-navegação permitem que os usuários saltem facilmente de um site de uma empresa irmã para outro.

 

Cabeçalho vertical alinhado à esquerda

O primeiro dos exemplos de cabeçalho não tradicionais, você encontrará muitos dos mesmos itens de menu de navegação pendurados verticalmente à esquerda.

 

Cabeçalho vertical alinhado à direita

Mesmo conceito, mas desta vez alinhado verticalmente à direita. Esses caras deram um passo adiante ao colocar cada item do menu na vertical também.

 

Hambúrguer de encaixe

Menos comuns, mas ainda assim atraentes, os menus de hambúrguer são uma boa demonstração de design elegante da web. O fundo fica escuro à medida que o menu desliza, ajudando a chamar a atenção dos visitantes para as opções clicáveis.

 

 

Aqui está a mesma coisa, apenas do outro lado:

 

Deslizamento completo da aquisição

Você pode ficar muito ousado e fazer com que o menu se estenda por toda a tela, como o Vimeo faz:

 

Práticas recomendadas de cabeçalho do site

• Use contraste de cores.  No mínimo, deve haver uma proporção de 4,5:1 entre a cor de fundo dos cabeçalhos e a fonte escolhida. Isso vale para o cabeçalho junto com qualquer informação secundária incluída em torno dele. Você também pode querer escurecer o fundo de uma página quando o menu do cabeçalho for exibido para torná-lo mais focado.
• Inclua um CTA. Mencionamos isso acima, mas vale a pena mencionar novamente. Seja para entrar em contato com sua empresa, experimentar uma ferramenta gratuita, iniciar uma avaliação,
• Torná-lo pegajoso. Alguns sites impressionam facilmente com seu design e scrollytelling dinâmico, mas, em última análise, a maioria dos sites tem um objetivo claro: Conversões . Você tem cerca de 15 segundos para oferecer valor aos visitantes antes que eles rejeitem, então você precisa tornar o mais fácil possível para os visitantes navegarem para páginas importantes, o tempo todo. Sem mencionar ver esse CTA importantíssimo em todos os momentos.
• Torne-o intuitivo. Antes de selecionar um para o seu próprio site, examine os concorrentes e outros sites do seu nicho para ver o que é mais comum. A navegação no site não é uma área em que você deve se esforçar para ser único ou “disruptivo”.
• Otimize para dispositivos móveis. A menos que você use um tamanho de fonte visível apenas ao microscópio, um cabeçalho horizontal não é uma opção no celular. A abordagem mais comum é configurar um menu de hambúrguer para navegação móvel.

 

 

Vale ressaltar que, se precisar, não precisa perder a barra de pesquisa ou mesmo o botão CTA ao otimizar para mobile. Veja como o Hubspot faz isso:

 

• Fique com fontes simples. Legibilidade é tudo quando se trata de UX (e, como se vê, psicologia de redação também), e é duplamente importante quando se trata do elemento clicável mais fundamental do seu site. A fonte Sans Serif é comum para o texto do cabeçalho do site, pois é altamente legível.

 

Ainda bem que a Lemonade não usou sua fonte de logotipo para sua fonte de cabeçalho.

Cabeçalhos de sites: uma forma de arte delicada

Vindo em uma variedade de formas e tamanhos, os cabeçalhos de site são essenciais para o sucesso do seu site. Se você optar por um design mais tradicional ou algo um pouco mais experimental, é importante aderir às melhores práticas universais. É bastante alheio quando um site acedeu ao elemento de cabeçalho. Os visitantes do seu site sairão tendo uma experiência de navegação sucinta e estimulante. Muitas vezes, isso é fundamental para conduzi-los ao seu objetivo final de negócios; seja aterrissando em páginas específicas ou realmente convertendo em clientes pagantes.