Qual é o Tamanho Ideal do Cabeçalho do Site para o Seu Site?

É 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.

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.

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.

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.

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.

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.

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.

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:

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:

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:

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.

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.

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. 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

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

1. 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.

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.

Tamanho de pixel recomendado para a imagem de cabeçalho do seu site

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ÇALHO	LARGURA	ALTURA	RAZÃO
Cabeçalho tamanho 1024	1024	256	4:1
Cabeçalho tamanho 1024 Um Terço de Página (Altura Extra)	1024	300	24:7
Cabeçalho tamanho 1024 Meia Página	1024	384	8:3
Cabeçalho tamanho 1024 Página Completa (Hero Header)	1024	768	4:3
Cabeçalho tamanho 1280 Um Terço da Página	1280	267	24:5
Cabeçalho tamanho 1280 Um terço de Página (Altura Extra)	1280	375	24:7
Cabeçalho Tamanho 1280 Meia página	1280	400	16:5
Cabeçalho Tamanho 1280 Página Completa (Cabeçalho Principal)	1280	800	8:5
Cabeçalho tamanho 1366 Um Terço da Página	1366	256	16:3
Tamanho do Cabeçalho 1366 Meia Página	1366	384	32:9
Tamanho do Cabeçalho 1366 Página Completa (Cabeçalho Principal)	1366	768	16:9
Cabeçalho Tamanho 1440 Um Terço da Página	1440	300	24:7
Cabeçalho Tamanho 1400 Meia Página	1440	450	16:5
Cabeçalho Tamanho 1440 Página Completa (Cabeçalho Principal)	1440	900	8:5
Cabeçalho Tamanho 1600 Um Terço da Página	1600	300	16:3
Cabeçalho Tamanho 1600 Meia Página	1600	450	32:9
Cabeçalho Tamanho 1600 Página Completa (Cabeçalho Principal)	1600	900	16:9
Cabeçalho Tamanho 1920 Um Terço da Página	1920	360	16:3
Cabeçalho Tamanho 1920 Meia Página	1920	540	32:9
Cabeçalho Tamanho 1920 Página Completa (Cabeçalho Principal)	1920	1080	16: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.