Abrimos um site, olhamos por dois segundos e fechamos. A maioria das decisões sobre ficar ou sair acontece ali, na parte que aparece antes do primeiro scroll. É o que chamamos de above the fold — a área visível assim que a página carrega, sem precisar rolar nada.

Na GazetaTech passamos dias testando isso manualmente, abrindo página por página, medindo onde a atenção realmente para e onde o visitante desiste. Testamos home pages, landing pages e subpáginas. Colocamos layouts lado a lado e fomos anotando o que funcionava e o que nos fazia querer fechar a aba. O resultado foi menos óbvio do que parece: o problema quase nunca é o design bonito ou feio. É a falta de clareza nos primeiros segundos.

Neste artigo a gente conta o que descobriu na prática sobre o above the fold — por que ele ainda é o espaço mais caro do seu site, como construir um que funcione e quais erros continuam aparecendo mesmo em páginas feitas por agências.

Above the fold não é decoração. É a sua única chance

A expressão vem dos jornais impressos. Quando um jornal era exibido dobrado nas bancas, só a metade de cima ficava visível — era ali que precisava estar a manchete, a foto forte e o gancho que fazia alguém comprar. Na web é a mesma lógica, só que a "dobra" agora é a borda inferior do navegador.

O que descobrimos nos testes é que esse espaço virou sinônimo de decisão. É a primeira coisa que a pessoa vê e o fator que determina se ela vai rolar a página ou sair. Não é exagero: em bastante site que testamos, foi exatamente o acima da dobra que decidiu se ficávamos ou íamos embora.

O uso principal dessa área, em qualquer página, é um só: introduzir o conteúdo e dizer do que o site trata. Parece básico, mas uma quantidade absurda de páginas que abrimos não faz nem isso.

As três perguntas que quase ninguém responde

O erro número um que anotamos, repetido em página após página, é não responder a três perguntas essenciais logo no topo: quem você é, o que faz e como pode ajudar o visitante. É assustador quantos sites profissionais falham nisso nos primeiros segundos.

A estrutura que mais funcionou nos nossos testes é direta: o logotipo visível responde ao "quem", um título grande (o H1) responde ao "o que faz" e um parágrafo curto, de uma a três frases, responde ao "como ajuda". Sites que seguiram esse esqueleto nos fizeram entender o negócio em segundos. Os que não seguiram nos deixaram confusos mesmo depois de rolar.

Quando uma página acerta isso, o resto flui. Quando erra, não importa quão bonito seja o fundo — a pessoa já saiu.

A regra dos 85% (e a ilusão do fundo falso)

Esse foi o aprendizado mais contraintuitivo dos nossos testes. Existe um erro estrutural que chamamos de fundo falso, ou ilusão de completude: o above the fold tenta ocupar 100% da área visível, preenche tudo até a borda inferior e cria a falsa impressão de que a página acabou ali. Não há motivo para rolar.

Testamos isso de verdade. Em páginas onde a primeira seção ia até o último pixel da tela, várias vezes nem percebíamos que havia mais conteúdo abaixo. O cérebro simplesmente concluía: acabou. É frustrante, porque o designer caprichou no topo e esqueceu de sinalizar que a página continuava.

A regra prática que adotamos depois de testar é simples: a primeira seção deve ocupar no máximo entre 80% e 90% da altura da viewport. Os 10% a 20% que sobram deixam entrever o início da próxima seção, um indicador visual de que dá pra rolar. Parece detalhe, mas muda completamente o comportamento.

Onde realmente fica a atenção (e por que mudou)

Para entender se essa obsessão com o topo fazia sentido, fomos atrás dos dados. Achamos estudos de UX relevantes que confirmam o que vimos na prática — e mostram como o comportamento mudou.

Um estudo de 2010 mostrava que 80% do tempo e da atenção das pessoas ficavam estritamente acima da dobra. Faz sentido: naquela época os sites exigiam menos rolagem e as telas eram menores. Um estudo mais recente, de 2018, mudou o quadra: hoje, 57% do tempo do usuário é gasto acima da dobra. Menos do que antes, mas ainda a fatia dominante.

O mesmo estudo aponta que 74% da atenção fica nas duas primeiras telas e que as pessoas passam 81% do tempo concentradas nas primeiras três telas de altura. A conclusão é categórica: conforme a página desce, o tempo gasto diminui drasticamente. As pessoas rolam mais hoje do que antes, sim — mas continuam priorizando massivamente o topo. Ou seja, o above the fold perdeu um pouco de peso, mas continua sendo onde a maior parte da decisão acontece.

Imagem, cor sólida ou vídeo? O que funcionou nos testes

Na hora de preencher o topo, testamos três caminhos. O mais comum em home pages é a hero section: um texto grande sobre um fundo. A questão é o que pôr nesse fundo.

Cor sólida foi o que mais gostamos quando o objetivo era foco e impacto na mensagem. Sem distração, o texto respira e o visitante lê. Funciona tanto em versão clara quanto escura — o importante é abraçar uma e manter o contraste.

Imagem de fundo agrega impacto emocional e contexto. Em páginas de produto e portfólio, trouxe uma força que cor sólida não dá. Mas foi também onde vimos o pior erro de todos (que a gente detalha adiante).

Vídeo de fundo é o caminho para quem quer se destacar e ser memorável. Em algumas landings que testamos, um vídeo cinematográfico curto e silencioso criou uma sensação premium imediata. A ressalva é grande: quando o vídeo dependede de áudio (que o navegador bloqueia) ou tem cenas distrativas, vira ruído. Usamos só quando o vídeo é simples, sem som e não compete com o texto por cima.

Também vimos variações de layout que funcionaram bem: layouts de duas colunas (texto à esquerda, espaço ou imagem à direita), layouts centralizados e layouts que quebram o visual em blocos. Não existe um vencedor único — existe o que combina com a mensagem.

O erro de contraste: onde quase todo mundo tropeça

Se tivéssemos que apontar um único erro mais recorrente nos nossos testes, seria o contraste entre texto e fundo. É insano quanta gente estraga nisso.

O cenário típico: o designer ou o cliente quer ver a imagem de fundo com clareza, então o texto por cima fica claro demais sobre uma imagem clara. O resultado é ilegível. Para salvar a leitura, a regra que seguimos é semprepender para o lado do texto em vez da imagem. Se a imagem atrapalha o texto, escurece a imagem. Sem dó.

A batalha com o cliente aqui é real. Vários insistem em ver a foto do fundo nítida, e o designer acaba lutando pela legibilidade. Nosso conselho, depois de testar: decida entre fundo claro ou escuro, escolha um e mantenha o contraste absoluto. A imagem é apoio. O texto é o que converte.

Subpáginas têm regras diferentes

Quase tudo o que testamos se concentrou em home pages, porque é onde o above the fold pesa mais. Mas também olhamos subpáginas e o padrão é outro.

O design que funcionou melhor em subpáginas é a barra de título simples: um título alinhado à esquerda ou centralizado, acompanhado de um parágrafo curto que resume o que aquela página entrega. Em sites extensos, migalhas de pão (breadcrumbs) no topo da subpágina fizeram muita diferença para o visitante se localizar — testamos e a navegação ficou claramente menos confusa.

Uma teoria que ficou dos testes, mas que não conseguimos validar a fundo: páginas de contato talvez não precisassem de seção de título grande, para deixar o formulário mais perto do topo e converter mais. É uma intuição que vale testar no seu caso, mas que ainda pede validação.

A nossa conclusão depois dos testes manuais

O above the fold não morreu. Ele só deixou de ser um argumento absoluto e virou uma prioridade relativa — ainda a maior, mas não a única.

O que mais pesou nos nossos testes foi isso: a parte de cima do site precisa responder, em segundos, quem você é, o que faz e como ajuda. Precisa ocupar no máximo uns 85% da tela para não criar a ilusão de que acabou. E precisa de contraste absoluto — sempre favorecendo o texto em detrimento da imagem de fundo.

Quando esses três pontos estão certos, o visitante rola. Quando erram, não importa o resto da página, porque ninguém vai ver. É a parte mais cara do seu site, literalmente: é onde se decide se alguém continua ou vai embora.

Todos os testes deste artigo foram realizados manualmente pela GazetaTech, abrindo e comparando páginas reais.