O que é layout de site
Layout é a distribuição dos elementos numa página. Num site, é ele que define o que o visitante vê primeiro, em que ordem lê e onde encontra a ação principal. O layout de site trabalha com grade de colunas, espaçamentos, tamanhos de título e posição dos botões, e cada página tem o seu. A página inicial apresenta a empresa, a página de serviço explica e leva ao contato, e a landing page concentra uma única ação.
Entre as partes do projeto do site, o layout costuma ser a mais visível na hora de aprovar. Por isso, quem vai contratar tende a avaliar a empresa de criação de sites pelo visual do portfólio, e vale pedir também que o fornecedor explique por que cada bloco está onde está.
Como o layout funciona em telas diferentes
Um layout responsivo reorganiza os blocos conforme a largura da tela: colunas lado a lado no computador viram uma coluna só no celular, o menu vira um ícone e as imagens mudam de proporção. O desenho costuma partir da tela menor, já que é ali que a falta de espaço obriga a decidir o que vem primeiro.
A montagem acontece no CMS ou na plataforma escolhida, e cada um organiza isso de um jeito. No WordPress, o tema define o layout, e o arquivo theme.json concentra configurações globais de cores, tipografia, espaçamento e layout, segundo a documentação oficial[1] atualizada em 24/06/2026. Em plataformas como Wix[2] e Webflow[3], o layout é montado no editor da plataforma, que também responde pela hospedagem (no Webflow, nos planos pagos).
Critérios técnicos que todo layout precisa atender
| Critério | Regra | Fonte |
|---|---|---|
| Estabilidade visual | CLS abaixo de 0,1 | Core Web Vitals do Google[4], página atualizada em 10/12/2025 |
| Carregamento do maior elemento | LCP em até 2,5 segundos | Core Web Vitals do Google, idem |
| Leitura no celular | Conteúdo funciona a 320 pixels CSS de largura sem rolagem em duas direções (critério 1.4.10, nível AA) | WCAG 2.2[5], W3C, 12/12/2024 |
| Contraste de texto | Pelo menos 4,5:1 entre texto e fundo; 3:1 para texto grande (critério 1.4.3, nível AA) | WCAG 2.2, idem |
| Área de clique | Alvo de pelo menos 24 por 24 pixels CSS (critério 2.5.8, nível AA) | Página de entendimento do critério 2.5.8[6], W3C |
O CLS mede quanto o conteúdo se desloca enquanto a página carrega. Entre as causas frequentes estão imagem sem dimensão definida, banner de cookies que empurra o texto e anúncio inserido depois do carregamento, e todas se resolvem no layout, com espaço reservado para cada elemento.
Por que o layout importa para o negócio
É o layout que determina se o visitante encontra a ação que interessa à empresa. Exemplo ilustrativo: uma empresa de serviços tem o botão de orçamento no rodapé da página de serviço, abaixo de seis blocos de texto. No celular, o visitante precisa rolar várias telas até chegar a ele. Se o botão aparece também logo após a descrição do serviço e fica fixo no topo durante a rolagem, o caminho até o contato encurta, e o efeito pode ser medido nos cliques do botão.
Dicas para planejar o layout de site
- Comece pelo objetivo da página. Defina a ação principal e posicione o botão dela na primeira tela e depois de cada bloco de explicação.
- Organize a hierarquia. Um título principal por página, subtítulos que resumam cada bloco e parágrafos curtos.
- Planeje o conteúdo junto com o layout. O espaço de cada bloco depende do tamanho do texto; o guia de texto para site ajuda a escrever no tamanho certo.
- Liste os elementos obrigatórios antes de desenhar. A relação de páginas e itens está no guia sobre o que deve ter um site.
- Desenhe a partir do celular. Confira cada página a 320 pixels CSS de largura.
- Siga um padrão. Mesmas cores, fontes, botões e espaçamentos em todas as páginas.
- Reserve espaço para imagens e banners. Dimensões definidas evitam deslocamento no carregamento.
- Deixe o formulário curto e claro. Rótulos visíveis, mensagens de erro próximas do campo e aviso de privacidade com link para a política, cuidado relevante para formulários que coletam dado pessoal sob a LGPD.
Layout por tipo de site
A hierarquia da página muda conforme o segmento. Um site para médicos coloca especialidades, convênios, endereço e agendamento no topo, e segue as regras de publicidade do conselho de medicina. Um site para contabilidade prioriza a lista de serviços, o perfil de cliente atendido e o contato. Uma landing page reduz o menu e concentra a página numa só ação.
Erros comuns
- Aprovar o layout só no computador.
- Usar texto dentro de imagem, que o leitor de tela e o buscador não leem como texto.
- Colocar a ação principal apenas no fim da página.
- Abrir a página com carrossel de banners que esconde a informação principal e desloca o conteúdo.
- Misturar estilos de botão e tamanhos de fonte entre páginas.
- Escolher cores sem conferir o contraste do texto.
Quanto custa e quanto esforço exige
O custo do layout depende do número de modelos de página, do grau de personalização e de quem produz conteúdo e imagens. Um modelo pronto de tema ou de plataforma reduz o trabalho de desenho, enquanto um layout sob medida inclui protótipo, revisão e testes em telas diferentes. Do lado da empresa, o esforço vai para definir o objetivo de cada página, fornecer os textos e aprovar o protótipo. A hospedagem também pesa no resultado, porque servidor lento atrasa o carregamento mesmo com layout leve.
Como medir se o layout funciona
- Ação principal: cliques no botão principal de cada página e contatos ou pedidos gerados, por mês.
- Estabilidade e velocidade: CLS e LCP das páginas principais, comparados aos limites do Google.
- Uso no celular: proporção de contatos vindos do celular em relação às visitas do celular.
- Acessibilidade: combinações de texto e fundo reprovadas no critério 1.4.3 e botões abaixo de 24 por 24 pixels CSS.
Próximo passo
Definidos o objetivo de cada página e a lista de elementos, o planejamento já pode virar protótipo. A Studio Visual atua desde 2001, e para conversar sobre o layout do seu site vale conhecer o trabalho de criação de sites da Studio Visual.
