A elaboração do design do seu site muitas vezes requer a orientação de especialistas que estejam imersos no assunto (sim, somos nós). Veja o design do cabeçalho de site, por exemplo. Claro, você já ouviu falar sobre o cabeçalho e viu muitos deles em outros sites — mas você realmente compreende o potencial desse pequeno espaço em um site?

Criar o cabeçalho (também conhecido como header) perfeito é um processo que deve ser mais personalizado do que você imagina. Ao planejar seu site, lembre-se de que o cabeçalho é a primeira coisa que os visitantes verão quando chegarem à sua página inicial. Como todos os demais elementos do seu site, ele precisa refletir sua marca, e envolve tanto pensamento estratégico quanto criativo.

Quer você esteja começando agora ou reformulando seu site atual, reunimos as práticas recomendadas para criar um design de cabeçalho tão estratégico e atraente quanto o restante do seu site.

Leia também: qual é o melhor criador de sites.

O que é um cabeçalho de site?

Como o nome indica, um cabeçalho refere-se à seção superior da página de um site. É uma faixa de conteúdo geralmente fixa no topo e que, portanto, aparece de forma consistente em todas as páginas.

O principal objetivo de um cabeçalho é fornecer aos visitantes uma descrição clara do conteúdo básico do seu site e convidá-los a explorar mais. Não menos importante é sua função como ferramenta de navegação. À medida que os visitantes passam de uma página para outra, um cabeçalho de site pode oferecer a eles uma direção clara.

O cabeçalho define o tom do resto do site, por isso não é de surpreender que que cada vez mais designers de sites enfatizam entusiasticamente seu valor estético. O resultado é uma grande variedade na forma como os cabeçalhos podem ser criados, o que podem incluir e como são exibidos em um site.

O que você deve incluir em um cabeçalho de site?

Os cabeçalhos de site são uma parte importante do design do seu site, mas não ocupam muito espaço. Cabe a você decidir quais elementos incluir nesse pequeno (embora valioso) local.

É importante que o design do cabeçalho melhore a interação dos visitantes com seu site, portanto, ao escolher o que incluir nele, considere destacar os elementos que você mais deseja salientar. Esse espaço deve convidar os usuários a examinar tal conteúdo.

Aqui estão os elementos mais populares geralmente incluídos em um cabeçalho de site (embora nem todos precisem ser adicionados):

Nome do negócio

Incluir o nome do seu negócio é uma boa maneira de ajudar os visitantes a reconhecer que chegaram ao local correto. Além disso, a presença do seu nome comercial no topo do site fortalece a identidade da sua marca.

A propósito, usamos o termo nome comercial de forma ampla aqui — se você estiver criando um blog ou um portfólio online, insira seu nome ou iniciais no cabeçalho.

Logo

A criação do logo é essencial quando se tem uma pequena empresa ou marca pessoal. Não importa a qual indústria você pertença, seu logotipo é a estrela de todos os seus ativos de marketing. Portanto, adicionar o logo ao cabeçalho do seu site é outra excelente maneira de fortalecer a identidade da sua marca. Além disso, é uma boa oportunidade de exibi-lo.

Se você está se perguntando onde exatamente colocar seu logo, saiba que não existe uma prática padrão. Muitos designers de site o centralizarão e muitos o posicionarão nas laterais. Um estudo interessante do grupo Nielsen Norman constatou que os usuários são mais propensos a se lembrar de uma marca quando veem seu logo do lado esquerdo do cabeçalho, então isso pode pesar na sua decisão — mas não deixe de lado a sua satisfação com o layout do site.

Dica profissional: se você está preocupado com o tamanho do seu logo, que ele seja grande demais para o pequeno espaço de um cabeçalho, convém criar uma variação de logotipo, ou seja, uma versão menor e mais simples do original.

Menu de navegação

O cabeçalho é considerado um local padrão para posicionar o menu de navegação do site. Isso significa criar uma lista de itens do seu site (como a página Sobre) e vincular cada um ao local designado. Incluir um menu em seu cabeçalho é de fato uma decisão lógica, já que ele ficará bem visível. Isso fornecerá aos visitantes uma navegação objetiva no site, garantindo uma experiência do usuário positiva.

Carrinho de compras

Ao criar um site, muitas de suas decisões devem envolver direcionar o usuário para onde ele precisa estar antes mesmo dele começar a procurar. Se o seu site tiver uma loja online, adicionar um carrinho de compras ao cabeçalho do site irá simplificar e melhorar o processo de checkout. O popular ícone da cesta serve como um local de checkout reconhecível à medida que os usuários continuam a navegar e adicionar itens aos carrinhos de compras. Mais importante ainda, eles não se distrairão do objetivo final (deles e seu): realizar os pedidos e pagar com facilidade.

Barra de busca

Adicionar uma barra de busca ao seu cabeçalho pode ser excelente para os visitantes. Ela oferece a eles a opção de realizar uma pesquisa em seu site, exibindo uma lista de itens relacionados à consulta. Esta é uma ferramenta especialmente inteligente para adicionar a um blog, pois ajuda os usuários a encontrar posts relacionados aos assuntos nos quais estão mais interessados.

Se você for adicionar um elemento como este ao seu site, a melhor opção é posicioná-lo no cabeçalho, pois os visitantes poderão encontrá-lo com facilidade.

Login

Se você criar um site para membros, será necessário que os usuários façam login — pois seu objetivo é proteger informações exclusivas do público. Quer os membros paguem por uma assinatura ou não, você terá que fornecer credenciais para que eles possam acessar o material exclusivo do seu site. Para isso, é preciso ter um local claro onde fazer login, e o espaço mais óbvio para isso é no cabeçalho da sua página inicial, onde todos poderão encontrar facilmente.

Links para redes sociais

Quem não quer mais seguidores nas redes sociais? A adição de ícones sociais a um site é uma prática comum. Adicionar links aos seus canais desejados simplificará a conversão dos visitantes do site em seguidores e curtidas.

Normalmente, os links sociais são incluídos no design do cabeçalho ou rodapé de um site. Posicionar esses links no topo do seu site definitivamente fará com que os usuários os vejam mais rapidamente. No entanto, se espaço for um problema no design do seu cabeçalho, não se preocupe em encaixá-los aqui. A maioria dos usuários está ciente de que os ícones de redes sociais encontram-se no rodapé de um site e é provável que eles verifiquem lá também.

Idioma

Então, você tem um site em vários idiomas? Isso é incrível. Sério, criar um site multilíngue é um empreendimento ambicioso — se você tiver os recursos adequados, esse tipo de operação aumentará significativamente o seu público e permitirá que você crie conteúdo localizado.

Depois que as traduções estiverem concluídas e você fizer upload do conteúdo, sua próxima tarefa é garantir que os visitantes internacionais possam acessar o idioma de sua escolha. Adicionar um menu de alternância de idiomas ao design do cabeçalho é a melhor maneira de indicar que outras opções estão disponíveis.

Práticas recomendadas para o design do cabeçalho de site

Você não precisa ficar preso ao design padrão de cabeçalho de site. Embora o antigo menu de site de navegação horizontal sirva bem ao propósito, sinta-se à vontade para inovar. Criar um cabeçalho de site envolve muito planejamento, especialmente porque é preciso encontrar maneiras inteligentes de incluir informações em um espaço limitado.

Qualquer que seja o caminho que você escolher, todo design de cabeçalho pode se beneficiar das seguintes práticas:

Use fontes claras e legíveis

Como o cabeçalho é o topo da sua página e inclui alguns dos elementos mais importantes e informativos do site, nem seria preciso dizer que a legibilidade é primordial. Ao criar seu cabeçalho, escolha uma fonte que represente a identidade da sua marca, mas ainda mais importante: que seja fácil de ler. Como o texto existe para guiar o público, seu propósito seria perdido se eles tivessem que se esforçar muito para decifrá-lo.

Mantenha o design consistente

Embora não haja tamanho, cor ou formato padrão para um cabeçalho de site, é importante que ele tenha um equilíbrio delicado: expressivo, mas coeso. Em outras palavras, ele nunca deve passar despercebido, mas também pode servir como um elemento de design que enriquece o visual do restante do seu site.

Isso está sempre aberto à subjetividade, mas existem algumas regras práticas a serem seguidas. Por exemplo, tente garantir que o tamanho do seu cabeçalho não interfira na maneira como um usuário experimenta seu conteúdo. Além disso, mantenha elementos visuais — como esquema de cores e fontes — consistentes com o restante do design do seu site.

Inclua uma chamada para ação clara

Se for importante para o sucesso do seu negócio, você sairia perdendo se não incluísse um botão de chamada para ação (call-to-action) eficaz em seu cabeçalho, para que todos pudessem ver. Por exemplo, se você tiver um site de restaurante, inclua um botão de chamada para ação em seu cabeçalho com os dizeres “Faça seu pedido”. Ou, no caso de um site sem fins lucrativos, este seria um excelente lugar para incentivar os visitantes com um botão “Doe agora”. Certifique-se de que sua mensagem seja atraente, clara e possa ser resumida em uma ou duas palavras.

Adicione uma ilustração ou animação

Se você tiver espaço, não há motivo para não adicionar um toque extra ao design do cabeçalho do seu site. Graças à incrível tecnologia de arte vetorial, é fácil adicionar imagens de alta qualidade — incluindo ilustrações ou animações — de qualquer tamanho. Incorporar estes elementos proporcionará aos visitantes uma experiência surpreendente, adicionando um detalhe dinâmico de maneira inesperada.

Considere as possibilidades de cabeçalho

Nem todos os cabeçalhos precisam ser iguais. Graças às inovações empolgantes que chegaram com o avanço do web design, vemos muitos sites revelando abordagens novas e interessantes ao seu cabeçalho. Antes de criar o cabeçalho do seu site, considere algumas das variações existentes. Talvez elas ofereçam uma solução melhor para suas necessidades de web design.

Cabeçalho de site fixo

Um cabeçalho de site fixo permanece travado na parte superior de cada página do site, para que os usuários possam vê-lo onde quer que estejam. Esta é uma maneira muito simples de fornecer aos usuários acesso às informações em todos os momentos, proporcionando uma excelente experiência de navegação.

Navegação oculta (menu hambúrguer)

Muitos designers optam por usar o menu hambúrguer em seus sites. Esse design responsivo é uma versão "recolhível" do um menu de navegação e é representado por um ícone de três linhas horizontais paralelas. É provável que você já tenha visto — mesmo que desconhecesse seu nome.

Essa variação de cabeçalho é ideal se você estiver trabalhando com um design de site minimalista, pois um menu hambúrguer permite apresentar aos usuários uma variedade de opções sem ocupar espaço. Além disso, o ícone hambúrguer é muito versátil e pode ser divertido trabalhar com ele.

Cabeçalho mobile

Hoje em dia, a maior parte dos acessos é feita a partir do celular. Por isso, é cada vez mais importante criar um design mobile incrível. Isso significa verificar se o cabeçalho está sendo exibido corretamente no seu dispositivo móvel — pode ser necessário ajustar o tamanho e o conteúdo ou adaptar um menu hambúrguer para esta versão.

Header encolhido

Você tem uma imagem de fundo maravilhosa que merece ser exibida, mas também deseja incorporar um cabeçalho no design do seu site (especialmente depois de ler este artigo). Conhecido nos círculos do web design como header encolhido, esta é a solução perfeita.

Um header encolhido se "dissolve" no plano de fundo do seu site à medida que os usuários rolam para baixo. Os visitantes não o verão o tempo todo, mas saberão que ele está lá. Além de prático, esse estilo de cabeçalho cria um efeito incrível em seu site e fica ótimo quando combinado com o efeito tridimensional da rolagem parallax.

Cabeçalhos com mensagem

Adicionar texto ao cabeçalho do seu site é uma ótima maneira de passar aos seus visitantes uma mensagem pessoal ou profissional desde o início. Não estamos falando dos títulos de suas páginas ou do nome da sua empresa, mas sim de textos informativos ou motivacionais. Por exemplo, seu espaço de cabeçalho pode ser usado para incorporar uma citação inspiradora relacionada à sua marca ou serviço. Além disso, pode ser um ponto de foco para incluir atualizações sobre o seu negócio ou para saudar os visitantes que chegam ao seu simpático site.