O que é Dobra?
Dobra, também chamada de fold ou dobra da página, é a linha onde a tela do visitante acaba. Tudo que fica acima dela aparece assim que a página carrega. Tudo que fica abaixo só é visto por quem rola.
O nome vem do jornal impresso. Na banca, o jornal ficava dobrado ao meio, e apenas a metade superior da capa aparecia para quem passava. Aquela faixa vendia a edição, então recebia a manchete e a foto principal. A web herdou a ideia junto com o vocabulário.
A dobra é uma linha móvel. Um monitor de 27 polegadas mostra uma quantidade de conteúdo, um notebook mostra menos e um celular mostra bem menos ainda. Cada visitante tem a sua. Por isso o time de design trabalha com a dobra como faixa aproximada, definida pelas telas mais comuns do público, e apoia essa decisão em responsividade.
Como funciona na prática?
A dobra entra no projeto de uma página em três momentos:
- No planejamento, quando a equipe decide o que ocupa a área acima da dobra: oferta, apoio visual e chamada para ação.
- No wireframe, quando a linha é desenhada nas resoluções principais para conferir o que sobra de espaço.
- Na medição, quando um scrollmap mostra até onde as pessoas realmente descem e qual porcentagem passa de cada seção.
Exemplo hipotético: uma página institucional recebe 70% do tráfego por celulares. No desktop do designer, o botão de contato aparece sem rolagem. No celular do público, o mesmo botão fica 800 pixels abaixo da dobra, escondido atrás de um banner alto. O scrollmap confirma que só 38% dos visitantes chegam lá.
Exemplos de uso
- Uma loja de móveis descobre que o preço do produto fica abaixo da dobra no mobile e sobe a informação, porque preço é a primeira pergunta do comprador.
- Um portal de notícias posiciona a manchete principal e a foto acima da dobra, repetindo no site a lógica de vitrine que a capa impressa usava na banca.
- Uma consultoria em Porto Alegre insere uma dica visual de rolagem no fim da primeira tela após o scrollmap mostrar que muitos visitantes param onde a seção termina de forma perfeitamente alinhada com a dobra.
Erros comuns
- Enxergar a dobra do desktop como se fosse a dobra de todo mundo, quando a maior parte do tráfego brasileiro chega por celular.
- Espremer conteúdo demais acima da linha e prejudicar a leitura só para “caber tudo”.
- Encerrar uma seção exatamente na dobra, criando a impressão visual de que a página acabou ali.
- Deixar imagens pesadas no topo, o que atrasa o carregamento justamente da área que decide a permanência do visitante.
- Ignorar barras do navegador e teclados no mobile, que reduzem a área útil real da tela.
Perguntas frequentes sobre Dobra
Onde fica a dobra de um site?
A posição varia de acordo com a tela de cada visitante. Celulares mostram uma faixa curta, notebooks mostram mais e monitores grandes mostram bastante conteúdo sem rolagem. Consulte as resoluções mais frequentes do seu público no analytics e projete a página com base nas duas ou três telas dominantes.
A dobra ainda importa no design de sites?
Sim, ainda importa como referência de prioridade. Rolar é um gesto natural hoje, e a primeira tela continua decidindo se o visitante fica ou sai. Ela funciona como critério de hierarquia: o que precisa ser visto por todos vai para cima da linha.
Qual a diferença entre dobra e above the fold?
Dobra é a linha onde a tela termina. Above the fold é a área que fica acima dessa linha, visível sem rolagem. Na prática do dia a dia, os dois termos aparecem quase como sinônimos, e a distinção útil separa o limite (a dobra) do espaço que ele delimita (o above the fold).