É verdade o que dizem - as primeiras impressões contam. O cabeçalho do seu site é a primeira coisa que as pessoas veem ao acessar o seu site. Múltiplos estudos de rastreamento ocular descobriram que os humanos escaneiam telas de computadores e dispositivos móveis começando pelo topo e fazendo um padrão em zigue-zague pela tela. A função primária do cabeçalho do site é a navegação. Mas ele também desempenha um papel importante na comunicação do estilo e aparência da sua marca. Neste guia, exploraremos o mundo dos cabeçalhos de sites e abordaremos a questão de qual deve ser o tamanho ideal do cabeçalho de um site.

Princípios-chave do Cabeçalho do Site

1. Branding

Comece criando uma imagem, gráfico ou outro conceito visual que mostre a essência do seu produto ou serviço. O gráfico deve mostrar a marca do seu negócio e ter um logotipo também. Um cabeçalho artístico terá uma escolha adequada de estilo e cor que combine com o seu site e inspire os leitores.

Grande, ousado, não convencional: Atlassian

O cabeçalho da Atlassian é grande e ousado. Talvez uma referência ao seu homônimo, Atlas, o Titã grego que "carregava os céus sobre seus ombros". A marca azul da Atlassian é destacada em todo o texto hiperlinkado, botões de chamada para ação e imagens.

Atlassian

Abafado, minimalista: Apple

Poucas marcas conseguem alcançar o tipo de sensação minimalista que a Apple consegue. Para uma organização com muitas divisões e mais de 130.000 funcionários em todo o mundo, ela se destaca em simplificar tudo e comunicar visualmente sua marca de forma tão sucinta.

Apple

Orientada à ação: Oxfam

A ONG global Oxfam usa seu cabeçalho para impulsionar a ação mais importante: doações. O posicionamento, tamanho, cor e proeminência da "barra de ação" servem não apenas como uma ferramenta de navegação, mas também como uma forma de comunicar seu propósito e, mais importante, incentivar a ação.

Oxfam

Pesquisa em destaque e no centro: Shutterstock

O site de imagens Shutterstock é todo sobre busca. A barra de busca é proeminente e integrada de forma homogênea utilizando a fonte, cor e iconografia da marca.

Shutterstock

2. Tamanho

Para sites que vendem produtos, o cabeçalho é uma ferramenta útil para destacar produtos populares e promoções. Carrosséis ou sliders são frequentemente usados para alternar entre produtos em destaque ou seções que servem como um ponto de partida para partes importantes do site.

O cabeçalho da Zara funciona quase como uma barreira, destacando um carrossel de coleções. Os indicadores do carrossel (pontos) são mostrados verticalmente na parte inferior direita enquanto o cabeçalho preenche a tela 100% com a navegação sobreposta no topo. É um visual impactante.

Zara

Internet.org é outro exemplo de um cabeçalho de tela inteira com navegação superior em tom suave. Mas, em vez de um carrossel, ele usa o lado esquerdo do cabeçalho como uma área de navegação e conteúdo duplo. Quando o usuário faz uma seleção, o site desliza para a esquerda, movendo a imagem de destaque para o lado esquerdo e revelando o conteúdo principal no lado direito.

Internet.org

Nesta variação de largura total da Virgin Galactic, o cabeçalho serve como um elemento de navegação herói com vídeo de fundo fornecendo visuais impressionantes.

Virgin Galactic

3. Conteúdo

Cada elemento no cabeçalho do seu site deve funcionar em conjunto. A localização e o tamanho de cada objeto no cabeçalho fornecem aos usuários pistas visuais sobre como navegar e usar seu site assim que eles acessam. A cor de um botão, o espaçamento e o preenchimento ao redor dos elementos ou o tamanho da fonte de um título podem significar toda a diferença entre o usuário realizar a ação desejada ou não.

O Carrossel de Imagens

Um carrossel de imagens é comumente usado em cabeçalhos de sites porque eles alcançam uma série de coisas:

  • Comunica uma peça de conteúdo por vez para evitar confusão
  • Depende fortemente da comunicação visual (o que é melhor porque as pessoas geralmente varrem o conteúdo, ao invés de ler o conteúdo)
  • Dá destaque ao conteúdo importante
  • Comporta-se como uma pré-navegação, permitindo que o usuário explore diferentes conteúdos sem sair da página principal
  • Elemento de site familiar e esperado que os usuários sabem como usar e interagir: deslizar ou tocar nos pontos para avançar os slides

O cabeçalho da HTC tem três slides apresentando três novas tecnologias:

HTC

O Chamado para Ação (CTA)

Às vezes, você só quer que o usuário tome uma atitude. Neste caso, The Information deseja capturar o endereço de email do visitante. Ao remover todos os outros elementos e focar 100% na CTA, The Information consegue otimizar para a ação desejada:

As Informações

O Estilo Editorial

A BMW reinventou seu site como se fosse uma editora e apresenta histórias e artigos para o usuário, começando com o artigo principal no cabeçalho sobre a história do logotipo M e suas cores:

BMW

O estilo do Catálogo

O site da Target emula seu catálogo físico com o cabeçalho usado para destacar as "Novidades Femininas" seguidas pelos vários outros departamentos dentro da loja, misturando coleções, promoções, produtos individuais e informações.

Alvo

Como encontrar o tamanho certo Usando o WordPress

O melhor lugar para começar é verificar suas “Configurações de Mídia” sob a aba “Aparência” no Admin do WordPress.

  • A melhor largura de imagem para uma imagem em uma postagem de blog (por exemplo, 1024px é para o tema Showcase Pro), e
  • Qual tamanho de imagem funcionará melhor na barra lateral do seu tema (300)

Entretanto, esta seção não fornecerá as dimensões ideais de imagem para a sua página inicial, imagem do cabeçalho ou banners de página.

Configurações de mídia do WordPress

Dependendo do seu tema, o WordPress deve listar os tamanhos ideais de imagem para a sua página inicial/imagem de cabeçalho em Aparência —> Personalizar —> Imagem de Cabeçalho da Página Inicial. A maioria dos tamanhos mostrados aqui são em torno de 1600 px por 1050 px.

Como encontrar o tamanho da imagem do banner do cabeçalho de qualquer página

Insira a URL do seu site no Navegador Chrome e use Inspect para obter o tamanho exato da imagem seguindo os passos abaixo:

    1. Clique com o botão direito + Clique / Control + Clique (Mac) na página da web
    2. Clique em Inspecionar
    3. Clique no menu de 3 pontos para poder visualizar os Elementos na parte inferior para que a visualização da página não seja responsiva

Inspecionar Elemento

Aqui está o Element no final da página:

Configuração do Elemento

    1. Clique com o botão direito na imagem do cabeçalho. Escolha uma imagem que seja a mesma do banner do cabeçalho
    2. Dimensões: Defina o tamanho exato da imagem usado na demonstração do tema

Neste exemplo abaixo, o tamanho é de 2548 px x 227 px. Enquanto a largura do cabeçalho é responsiva, a altura do cabeçalho pode ser muito pequena para ser um cabeçalho.

Configuração de Estilo

O quê? Nem toda imagem de banner de cabeçalho tem o mesmo tamanho

Se o cabeçalho da Home (1600px x 1050px) não for do mesmo tamanho que o banner do cabeçalho do Blog (1080px x 960px), use imagens que fiquem boas em espaços longos e estreitos.

Enquanto as telas estão ficando maiores, uma largura de cabeçalho de 1024px ainda é o tamanho mais popular. Sites são projetados para resolução de 1024 x 768px.

Se você pretende usar um cabeçalho que tenha mais de 1000 pixels, use um destes tamanhos de cabeçalho:

  • 1280px
  • 1366px
  • 1440px
  • 1600px
  • 1920px.

Estes são tamanhos de alta resolução que podem se ajustar para manter resoluções de mais de 1920 sem problema.

Qual é o tamanho certo para o seu site?

Os tamanhos de cabeçalho mais populares para sites:

TAMANHO DO CABEÇALHOLARGURAALTURARAZÃO
Cabeçalho tamanho 102410242564:1
Cabeçalho tamanho 1024

Um Terço de Página (Altura Extra)

102430024:7
Cabeçalho tamanho 1024

Meia Página

10243848:3
Cabeçalho tamanho 1024 Página Completa (Hero Header)10247684:3
Cabeçalho tamanho 1280

Um Terço da Página

128026724:5
Cabeçalho tamanho 1280

Um terço de Página (Altura Extra)

128037524:7
Cabeçalho Tamanho 1280

Meia página

128040016:5
Cabeçalho Tamanho 1280

Página Completa (Cabeçalho Principal)

12808008:5
Cabeçalho tamanho 1366

Um Terço da Página

136625616:3
Tamanho do Cabeçalho 1366

Meia Página

136638432:9
Tamanho do Cabeçalho 1366

Página Completa (Cabeçalho Principal)

136676816:9
Cabeçalho Tamanho 1440

Um Terço da Página

144030024:7
Cabeçalho Tamanho 1400

Meia Página

144045016:5
Cabeçalho Tamanho 1440

Página Completa (Cabeçalho Principal)

14409008:5
Cabeçalho Tamanho 1600

Um Terço da Página

160030016:3
Cabeçalho Tamanho 1600

Meia Página

160045032:9
Cabeçalho Tamanho 1600

Página Completa (Cabeçalho Principal)

160090016:9
Cabeçalho Tamanho 1920

Um Terço da Página

192036016:3
Cabeçalho Tamanho 1920

Meia Página

192054032:9
Cabeçalho Tamanho 1920

Página Completa (Cabeçalho Principal)

1920108016:9

Em conclusão

Pense primeiro no que você deseja que seus usuários façam quando acessarem seu site e otimize seu cabeçalho para essa ação. Certifique-se de que suas imagens não sejam maiores que 72 dpi e que elas usem o formato de cor RGB. Quanto menos elementos você tiver no seu cabeçalho, mais focada será a ação desejada. Por outro lado, quanto mais elementos no cabeçalho, mais o usuário é sobrecarregado com a varredura do conteúdo e a interpretação do que é mais relevante para ele. Não há certo ou errado, tudo depende das jornadas típicas de seus usuários e da ação pretendida que você deseja impulsionar. Tenha em mente que, quanto mais mídia rica no seu cabeçalho, mais longo será otempo de carregamento e amplie seu tamanho da página do site. Sempre verifique a velocidade de carregamento do seu site com o SEOptimer para garantir um bom equilíbrio entre a experiência do usuário otimizada e a velocidade de carregamento otimizada.