25 Exemplos de Layout de Site (Com Wireframes Anotados)
25 exemplos de layout de site da biblioteca de templates da We.Inc, cada um com wireframe da estrutura da página, prévia do design, por que o layout funciona e para quais negócios ele se adequa. Inclui um guia para escolher um layout.
Um layout de site é a ordem e a disposição das seções em uma página: o que vem primeiro, o que fica lado a lado e onde fica o botão principal. Abaixo estão 25 layouts, cada um mostrado como um wireframe simples e uma prévia do design completo. Todos os 25 são designs de templates da We.Inc, não sites de clientes, agrupados pelo tipo de negócio ao qual se adequam. A caixa azul em cada wireframe é o call to action principal.
Como ler os wireframes
Cada fileira de caixas representa uma faixa da página, de cima para baixo conforme você rola. Caixas lado a lado ficam juntas em tela de desktop; no celular, elas se empilham na mesma ordem, então a caixa da esquerda aparece primeiro. Esta página trata da disposição geral da página. Para a parte superior especificamente, veja exemplos de seção hero; para menus, veja exemplos de navegação.
Cinco padrões de layout em uma tabela
| Padrão | Ordem das seções | Melhor quando | Exemplos abaixo |
|---|---|---|---|
| Funil de serviços | Hero, serviços, prova, formulário | Visitaantes precisam de orçamento ou agendamento | 1-8 |
| Visita | Hero, menu, história, horários e mapa | Pessoas vêm até você pessoalmente | 9-14 |
| Agendar ou entrar | Hero, preços ou agenda, agendamento | Consultas, aulas, planos | 15-19 |
| Grade | Hero, grade de itens, detalhe, contato | Listagens, produtos, portfólio | 20-24 |
| Leitor | Hero, trabalho, sobre, cadastro | O objetivo é um público recorrente | 25 |
Layouts para negócios de serviços
1. Serviço emergencial: faixa urgente sob o hero
Template: Ironpeak Roofing (um design de template da We.Inc, não um site de cliente).
Por que funciona: Uma faixa colorida de largura total logo abaixo do hero capta pessoas com um problema urgente (dano por tempestade) antes que elas rolem a página. Use para: Telhadistas, restauração, chaveiros, reboque.
2. Múltiplos serviços com bloco de área de atuação
Template: Summit Trades (um design de template da We.Inc, não um site de cliente).
Por que funciona: Três cards de serviços iguais, depois uma lista nomeada de áreas atendidas; responde "vocês fazem isso, aqui?" em dois scrolls. Use para: Qualquer negócio com área de atuação definida.
3. Lista de serviços com especialidade em destaque
Template: Voltline Electric (um design de template da We.Inc, não um site de cliente).
Por que funciona: Um serviço de alto valor ganha sua própria seção, assim a página vende o trabalho que você mais quer sem esconder o restante. Use para: Ofícios com uma especialidade lucrativa.
4. Checklist e orçamento instantâneo
Template: Brightwell Cleaning (um design de template da We.Inc, não um site de cliente).
Por que funciona: Um checklist visível do que cada visita inclui responde a principal dúvida (o que exatamente vou receber?) antes do formulário de preço. Use para: Limpeza, jardinagem, serviço de piscina.
5. História do artesão local
Template: Halden Woodworks (um design de template da We.Inc, não um site de cliente).
Por que funciona: Nomear a cidade no título e mostrar "como funciona um trabalho" gera confiança para grandes trabalhos únicos. Use para: Carpinteiros, construtores, reformadores.
6. Empresa profissional: áreas de atuação e equipe
Template: Sterling & Vance LLP (um design de template da We.Inc, não um site de cliente).
Por que funciona: Pessoas escolhem um escritório pela área do direito e depois pelo profissional; o layout segue essa ordem. Use para: Direito, contabilidade, consultoria financeira.
7. Consultoria: prova primeiro
Template: Linden Consult (um design de template da We.Inc, não um site de cliente).
Por que funciona: A prova fica logo após o hero; depois a página apresenta os serviços como problemas que o comprador reconhece. Use para: Consultores, coaches, serviços B2B.
8. Página curta para contador
Template: Ledgerline CPA (um design de template da We.Inc, não um site de cliente).
Por que funciona: Quatro seções. Para um comprador que já sabe que precisa de contador, menos é mais rápido. Use para: Qualquer serviço onde o comprador chega decidido.
Layouts para alimentação e hospitalidade
9. Café: menu, história, visita
Template: Ember & Roast (um design de template da We.Inc, não um site de cliente).
Por que funciona: Menu primeiro, visita por último: as pessoas verificam o que você serve, depois onde e quando. Use para: Cafés, padarias, bares.
10. Padaria com pedido antecipado
Template: Flour & Fern (um design de template da We.Inc, não um site de cliente).
Por que funciona: Uma seção de pedidos dedicada transforma a navegação em pré-pedidos. Use para: Padarias, açougues, preparo de refeições.
11. Restaurante com scroll longo
Template: Azafran (um design de template da We.Inc, não um site de cliente).
Por que funciona: Para um restaurante de destino, a atmosfera vende a reserva, então a página conta uma história antes de pedir. Use para: Alta gastronomia, menus degustação, espaços para eventos.
12. Restaurante com três seções
Template: Crust (um design de template da We.Inc, não um site de cliente).
Por que funciona: Hero, menu, visita. O mínimo de seções que um restaurante pode ter e ainda responder a todas as perguntas. Use para: Restaurantes casuais, delivery.
13. Agenda em primeiro lugar
Template: ROAM (um design de template da We.Inc, não um site de cliente).
Por que funciona: Quando a localização muda diariamente, "onde vocês estão hoje" é a principal pergunta, então ela fica logo abaixo do hero. Use para: Food trucks, feiras, pop-ups.
14. Serviço para eventos com formulário de contato
Template: Harvest & Vine (um design de template da We.Inc, não um site de cliente).
Por que funciona: Tipos de evento logo de cara permitem que o visitante se identifique; um menu de amostra torna o preço mais concreto. Use para: Buffets, organizadores de eventos, espaços.
Layouts para agendamento e planos
15. Salão orientado por agendamento
Template: Lumé Salon & Beauty Spa (um design de template da We.Inc, não um site de cliente).
Por que funciona: Uma lista de preços e um bloco de agendamento são tudo o que a maioria dos visitantes de salão precisa. Use para: Salões, barbearias, estúdios de unhas e cílios.
16. Grade de aulas e preços
Template: Tidewater Yoga (um design de template da We.Inc, não um site de cliente).
Por que funciona: Grade, preços e oferta para a primeira visita seguem a decisão que um novo aluno toma. Use para: Yoga, pilates, dança, artes marciais.
17. Academia com programas e planos
Template: Iron (um design de template da We.Inc, não um site de cliente).
Por que funciona: Planoos de adesão lado a lado facilitam a comparação; uma primeira sessão grátis reduz a barreira. Use para: Academias, clubes, planos.
18. Clínica: cuidados, equipe, localização
Template: Verdant Family Health (um design de template da We.Inc, não um site de cliente).
Por que funciona: Os pacientes querem saber o que você trata, quem eles verão e como chegar. Use para: Clínicas, dentistas, fisioterapeutas.
19. Veterinária com aviso urgente
Template: Meadowpaw Veterinary (um design de template da We.Inc, não um site de cliente).
Por que funciona: A seção de visita orienta casos urgentes a telefonar, para que o formulário de agendamento não seja usado para emergências. Use para: Veterinárias, pronto-socorro, qualquer serviço com emergências.
Layouts em grade: listagens, lojas e portfólios
20. Grade de listagens
Template: Keystone Realty (um design de template da We.Inc, não um site de cliente).
Por que funciona: Compradores têm a grade; vendedores têm sua própria seção e um call to action separado. Use para: Imobiliárias, aluguel, concessionárias.
21. Página de produto único
Template: Verre Halo (um design de template da We.Inc, não um site de cliente).
Por que funciona: O preço fica na barra de menu e no final; tudo entre eles responde "vale a pena?" Use para: Marcas de produto único, lançamentos, produtos de crowdfunding.
22. Loja de pequenos lotes
Template: Cellar & Rowan (um design de template da We.Inc, não um site de cliente).
Por que funciona: Produtos primeiro, depois a história que justifica o preço, depois um cadastro para o próximo lote. Use para: Artesãos, velas, cerâmica, alimentação.
23. Lançamento de produto
Template: Loop (um design de template da We.Inc, não um site de cliente).
Por que funciona: O próximo lançamento lidera; a grade da loja atende quem quer algo agora. Use para: Tiragens limitadas, vestuário, colecionáveis.
24. Grade de portfólio em primeiro lugar
Template: Drafthouse (um design de template da We.Inc, não um site de cliente).
Por que funciona: Seis projetos logo após o título; o trabalho faz a venda. Use para: Arquitetos, designers, fotógrafos.
Layouts pessoais e para criadores
25. Escritor com newsletter
Template: Plume (um design de template da We.Inc, não um site de cliente).
Por que funciona: Trabalho, depois cadastro na newsletter: o objetivo são leitores que voltam, não um único contato. Use para: Escritores, criadores, palestrantes.
Como escolher um layout
- Defina a única ação que você quer que a maioria dos visitantes tome (ligar, agendar, comprar, contatar, se cadastrar). Essa se torna a caixa azul.
- Liste as três perguntas que um visitante faz antes de agir (por exemplo: vocês atendem minha região, quanto custa, posso confiar). Cada uma ganha uma seção, nessa ordem.
- Escolha o padrão da tabela acima que se encaixa.
- Corte seções que você não consegue preencher com conteúdo real. Uma seção "Resultados" vazia ou avaliações de placeholder fazem mais mal do que uma página mais curta.
- Verifique no celular. Caixas lado a lado se empilham; certifique-se de que o botão principal ainda apareça cedo (veja design mobile-first).
Quando uma única página fica muito longa, divida-a em várias. Estrutura do site mostra como as seções acima se transformam em um mapa do site.
Erros comuns de layout
- Colocar o formulário de contato apenas no final de uma página longa, sem botão no cabeçalho.
- Três colunas de texto para um público mobile; use cards que se empilham de forma limpa.
- Manter números, avaliações ou selos de template que você não pode comprovar.
- Uma galeria antes de o visitante saber o que você faz.
Use um desses layouts
Cada layout aqui é um template na biblioteca de templates da We.Inc. No plano gratuito você pode usar até 3 sites de template em um endereço we.inc (sem créditos de IA, sem domínio personalizado). O Starter por $20/mês adiciona criação com IA, para que você possa pedir mudanças como "mover avaliações acima dos serviços", e domínios personalizados; veja preços. Faça um protótipo da sua versão primeiro com o gerador de mockup de site, depois verifique o resultado com o avaliador de sites.
Perguntas frequentes
O que é um layout de site?
A ordem e a disposição das seções em uma página: o que aparece primeiro, o que fica lado a lado e onde fica o principal call to action.
Qual é o melhor layout para um site de pequena empresa?
Para a maioria dos negócios de serviços: um hero com um botão claro, serviços, prova como avaliações e um formulário de contato ou orçamento, com o botão repetido no cabeçalho.
Quantas seções uma homepage deve ter?
Quantas forem necessárias para responder às principais perguntas do visitante, e não mais. Os exemplos aqui variam de quatro a oito seções.
Esses são sites reais de empresas?
Não. Todos os 25 são designs de templates da We.Inc, usados para mostrar padrões de layout.
Como os layouts mudam no celular?
Caixas lado a lado se empilham verticalmente na mesma ordem, então coloque o item mais importante à esquerda e mantenha o botão principal próximo ao topo.
Qual é a diferença entre layout e estrutura?
Layout é a disposição de uma página. Estrutura é como as páginas se conectam no site: a hierarquia, as URLs e os links internos.
Comece grátis · Sem cartão de crédito
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App