O que é layout
Layout é a organização dos elementos de uma página: quais blocos de conteúdo existem e em que ordem aparecem. A versão antiga deste post trazia uma frase truncada — "um layout de site é a maneira como os diferente de como se elementos de uma página web" — e depois listava características genéricas de bom design. Vamos por outro caminho, mais útil: todo site é feito dos mesmos poucos blocos, e o que muda de uma página para outra é quais entram e em que sequência. Layout é, antes de qualquer coisa, uma decisão de ordem.
As decisões visuais que dão forma a esses blocos — hierarquia, tipografia, cor — são assunto de web design. Aqui o assunto é a estrutura.
Os 7 blocos de qualquer página
- Topo e navegação — responde "onde estou e para onde posso ir";
- Abertura — responde "o que é isto e para quem". É o bloco que decide se a pessoa fica;
- Prova — responde "por que acreditar": cases, depoimentos, números, clientes, certificações;
- Conteúdo principal — o que a página realmente tem a dizer;
- Oferta ou chamada para ação — responde "o que fazer agora";
- Dúvidas frequentes — responde "o que ainda me impede de decidir";
- Rodapé — dados da empresa, links secundários e sinais de confiança.
Nem toda página usa os sete. Uma página de captura usa três ou quatro; uma página de serviço usa todos. O trabalho é escolher quais entram — e em que ordem.
Por que a ordem importa mais que os blocos
Os blocos são quase sempre os mesmos; o que separa uma página que converte de uma que não converte é a sequência. Uma página de serviço que começa contando a história da empresa perde quem chegou com pressa buscando um preço. Uma home que tenta explicar todos os serviços em detalhe vira uma página longa que não direciona ninguém e ainda esvazia as páginas internas. Um post que pede orçamento no primeiro parágrafo afasta quem estava só aprendendo.
A regra que orienta a ordem é simples: cada bloco deve responder à pergunta que o visitante tem naquele momento — e não à que a empresa quer responder primeiro.
O layout de cada tipo de página
| Página | Ordem dos blocos | Função | O que não colocar |
|---|---|---|---|
| Home | Topo → abertura → 3 a 5 caminhos → prova → CTA → rodapé | Direcionar | O catálogo inteiro de serviços |
| Serviço | Topo → qual serviço e para quem → como funciona → o que inclui e preço → prova → dúvidas → CTA | Converter | A história da empresa |
| Post de blog | Topo → título e contexto → conteúdo → oferta ligada ao tema → relacionados → rodapé | Responder à busca | Pedido de orçamento no início |
| Produto | Topo → foto, nome, preço e comprar → ficha → frete e prazo → avaliações → relacionados | Vender | Preço e frete escondidos |
| Contato | Topo → formas de contato → formulário curto → endereço e mapa → horário | Facilitar | Formulário com 12 campos |
| Captura | Abertura → benefício → prova → formulário | Uma conversão | Menu e links de saída |
Home: direcionar, não explicar tudo
A home tem a função mais mal compreendida do site. Ela não é onde a venda acontece — é onde o visitante descobre, em segundos, o que a empresa faz e escolhe por onde seguir. Layout que funciona: uma abertura que diz o que a empresa faz e para quem, de três a cinco caminhos claros para as páginas que convertem, um bloco de prova e uma chamada para quem já chegou decidido. O erro clássico é transformá-la em catálogo, com todos os serviços explicados em detalhe: a página fica enorme, ninguém lê até o fim e as páginas internas — que são as que ranqueiam — deixam de receber visitas.
Página de serviço: onde a conversão acontece
É a página que mais importa em site de empresa, e a que mais se erra. A ordem que funciona segue exatamente as perguntas de quem está decidindo: qual serviço é este e para quem → como funciona → o que está incluído → quanto custa (ou como o preço se define) → quem já contratou e o que achou → o que ainda ficou em dúvida → como contratar. Um pedido de contato também no topo atende quem chegou pronto. E há um bloco que não pertence a essa página: a história da empresa — ela mora na página institucional, e no meio de uma decisão de compra só atrasa.
Post de blog: responder primeiro
O post existe para responder a uma busca, e o layout precisa refletir isso: o conteúdo vem antes de qualquer pedido. Depois do título e de um contexto curto, entra o texto — e só depois dele, ou em um bloco discreto no meio, a oferta, sempre ligada ao tema do post. Um sumário ajuda em textos longos; os posts relacionados no fim seguram quem terminou a leitura. O que não funciona é o pedido de orçamento logo na abertura, porque quem está lendo um "o que é" quase nunca está pronto para contratar.
Página de produto e contato
Na página de produto, a primeira tela precisa conter tudo o que decide a compra: foto boa, nome, preço, condições e o botão. Ficha técnica, frete, prazo e avaliações vêm em seguida. O erro mais caro é esconder preço ou frete — o visitante vai embora calcular em outro lugar e não volta.
Na página de contato, o layout deve reduzir esforço: formas de contato visíveis primeiro (telefone, WhatsApp, e-mail — clicáveis), depois um formulário curto, depois endereço, mapa e horário. Cada campo a mais no formulário custa contatos; peça apenas o que a próxima ação realmente exige.
Página de captura: tudo o mais é distração
É o layout mais enxuto e o mais rígido: abertura com a promessa → benefício → prova → formulário, e nada além disso. Sem menu, sem links de saída, sem rodapé cheio de caminhos. A lógica é diferente das outras páginas: aqui o visitante veio de um anúncio ou de um e-mail com uma intenção única, e qualquer link adicional é uma chance de ele sair sem converter. A diferença entre esse formato e um site de página única está em landing page × one page.
"Quase todo site tem os blocos certos. O que quase nenhum tem é a ordem certa — e é a ordem que o visitante experimenta."
O que muda no celular
No desktop, blocos convivem lado a lado; no celular, tudo empilha na ordem do código — e é aí que layouts desatentos se desfazem. Quatro consequências práticas: a ordem de empilhamento precisa ser decidida, não herdada de uma diagramação de duas colunas; o menu vira ícone, e o que era visível passa a exigir um toque; a chamada para ação deve subir, para não ficar a cinco rolagens de distância; e imagens grandes cedem a vez ao texto essencial, para a página abrir rápido. Quem desenha primeiro para o celular resolve isso na origem, em vez de remendar depois.
O wireframe: onde o layout é decidido
O wireframe é o esqueleto da página em cinza — sem cores, sem fontes definitivas, sem imagens finais —, mostrando apenas quais blocos existem e em que ordem. Ele vem antes do visual porque separa duas discussões que não deveriam se misturar: o que a página precisa dizer e como ela vai parecer. Quando as duas se misturam, a reunião de aprovação vira debate sobre cor de botão enquanto a ordem dos blocos passa despercebida — e é a ordem que decide o resultado. Onde essa entrega se encaixa no projeto está em o mapa organizacional da criação de sites.
5 erros de layout
- Home como catálogo — explica tudo, direciona nada e esvazia as páginas internas;
- História da empresa antes do serviço — a informação certa no momento errado;
- Preço escondido em página de produto ou de serviço — o visitante vai calcular em outro lugar;
- Página de captura com menu — cada link é uma saída que você mesmo ofereceu;
- Aprovar layout só no desktop — e descobrir a ordem de empilhamento com o site pronto.
Perguntas frequentes
O que é layout de um site?
É a organização dos elementos de uma página: quais blocos de conteúdo existem e em que ordem aparecem. Todo site é feito dos mesmos sete blocos básicos — topo, abertura, prova, conteúdo, oferta, dúvidas e rodapé —, e o que muda de uma página para outra é quais deles entram e em que sequência. Layout é, antes de tudo, uma decisão de ordem.
Por que o layout é essencial para o site?
Porque a ordem dos blocos determina o que o visitante entende e em que momento. Uma página de serviço que fala da história da empresa antes de explicar o serviço perde quem chegou com pressa; uma home que tenta explicar tudo não direciona ninguém. O layout é o que transforma um conjunto de conteúdos em um caminho até a ação.
Quais blocos compõem uma página?
Sete: topo com navegação (onde estou e para onde posso ir), abertura (o que é isto e para quem), prova (por que acreditar), conteúdo principal (o que a página tem a dizer), oferta ou chamada para ação (o que fazer agora), dúvidas frequentes (o que ainda trava a decisão) e rodapé (dados da empresa, links e confiança).
Qual é o layout ideal de uma página de serviço?
Topo, abertura dizendo qual serviço é e para quem, como funciona, o que está incluído, critério de preço, prova (cases e depoimentos), dúvidas frequentes e chamada para ação — com um pedido de contato também no topo, para quem já chegou decidido. O que não entra aí é a história da empresa: ela pertence à página institucional.
O layout da home deve ser diferente das outras páginas?
Sim. A home tem uma função distinta: direcionar. Ela precisa dizer em segundos o que a empresa faz e oferecer de três a cinco caminhos claros para as páginas que realmente convertem. O erro mais comum é tratá-la como catálogo e tentar explicar todos os serviços nela — resultado: uma página longa que não converte e ainda esvazia as internas.
O que muda no layout quando a página abre no celular?
As colunas viram empilhamento, e a ordem passa a ser a do código — por isso ela precisa ser decidida, não herdada. Na prática: o menu vira ícone, a chamada para ação sobe para perto da abertura, imagens grandes cedem lugar ao texto essencial e blocos longos ganham divisões. Quem desenha primeiro para o celular já resolve isso na origem.
O que é wireframe e por que ele vem antes do layout visual?
Wireframe é o esqueleto da página em cinza, sem cores nem fontes definitivas, mostrando quais blocos existem e em que ordem. Ele vem antes porque separa duas discussões que não deveriam se misturar: o que a página precisa dizer e como ela vai parecer. Aprovar o wireframe primeiro evita refazer o visual por causa de uma decisão de estrutura.
Layout bom melhora o posicionamento no Google?
Indiretamente. Não existe um fator de ranqueamento chamado layout, mas as decisões de estrutura afetam coisas que contam: velocidade de carregamento, comportamento no celular, hierarquia de títulos e a permanência de quem chega. Um layout claro ajuda o buscador a entender a página e ajuda a pessoa a ficar nela.