Bonito
Cria percepção e diferenciação, mas sozinho não resolve a necessidade do usuário.
Referência aberta · independente de marca · edição 2026
Sites,
sem mistério.
Um espelho visual de referências universais para quem está começando: o que cada parte é, para que serve, quando utilizar e quais nichos se beneficiam dela.
00 / PRIMEIRO CONCEITO
Um site não é uma imagem.
É um sistema de decisões.
Design é a camada visível. Por baixo dela existem estratégia, arquitetura da informação, conteúdo, código, acessibilidade, desempenho, segurança e manutenção.
Útil
Ajuda alguém a encontrar, entender, decidir, comprar, aprender ou executar uma tarefa.
Usável
Funciona com clareza no celular, teclado, leitor de tela e conexões mais lentas.
Mensurável
Permite observar resultados e melhorar com evidências, não apenas gosto pessoal.
01 / MAPA DA CONSTRUÇÃO
Da ideia ao site vivo.
Estas etapas podem se sobrepor, mas pular uma delas costuma gerar retrabalho nas seguintes.
- DescobertaObjetivo, público, problema, concorrentes e métricas.
briefing - EstratégiaProposta, posicionamento, jornada e prioridade.
direção - ArquiteturaPáginas, menus, conteúdo e fluxos.
sitemap - WireframeEsqueleto sem decoração para validar lógica.
UX - InterfaceTipografia, cores, imagens e componentes.
UI - DesenvolvimentoHTML, CSS, JavaScript, CMS e integrações.
código - QualidadeMobile, acessibilidade, velocidade e segurança.
QA - PublicaçãoDomínio, hospedagem, SEO, analytics e evolução.
go live
02 / ANATOMIA DE UMA PÁGINA
O corpo do site,
parte por parte.
Passe pelos blocos: o desenho simula uma página e explica a função de cada região.
03 / ELEMENTOS UNIVERSAIS
O que é, o que faz
e quando usar.
H1A ideia principal.
Títulos H1–H6
Organizam o conteúdo em níveis. H1 define o assunto principal; H2 abre capítulos; H3–H6 criam subseções.
- Use em
- Todo conteúdo estruturado
- Nichos
- Todos
- Evite
- Escolher pelo tamanho visual
Parágrafo
Transporta explicações e argumentos. A legibilidade depende de fonte, contraste, entrelinha e largura de 50–75 caracteres.
- Base segura
- 16 px / 1rem
- Nichos
- Todos, especialmente editorial
- Evite
- Blocos longos sem respiro
Botão
Dispara uma ação: enviar, comprar, salvar, abrir, avançar. O texto deve começar com um verbo claro.
- Use em
- Ações importantes
- Nichos
- Loja, SaaS, serviços, apps
- Evite
- Usar botão como simples link
Link
Leva a outro lugar, página, arquivo ou seção. Deve parecer clicável e informar o destino.
- Use em
- Navegação e referências
- Nichos
- Todos
- Evite
- “Clique aqui” sem contexto
Imagem
Demonstra produto, contexto, emoção ou informação. Deve ter propósito, tamanho otimizado e texto alternativo.
- Use em
- Produtos, portfólios, histórias
- Nichos
- Moda, turismo, gastronomia, imóveis
- Evite
- Imagem genérica só para preencher
Vídeo
Explica movimento, demonstra produto ou cria atmosfera. Precisa de controles, legenda e alternativa estática.
- Use em
- Demos, aulas, cases, campanhas
- Nichos
- Educação, entretenimento, tech
- Evite
- Autoplay com som
Título do cardResumo curto
Card
Agrupa informações relacionadas em uma unidade visual repetível: produto, serviço, post, pessoa ou recurso.
- Use em
- Listas comparáveis
- Nichos
- E-commerce, portais, SaaS
- Evite
- Colocar todo conteúdo em cards
Formulário
Coleta dados para contato, cadastro, compra, busca ou diagnóstico. Cada campo aumenta o esforço do usuário.
- Use em
- Conversão e entrada de dados
- Nichos
- Serviços, lojas, SaaS, eventos
- Evite
- Pedir dados sem necessidade
Menu
Representa a arquitetura do site. Ajuda a localizar áreas sem precisar conhecer a estrutura interna.
- Use em
- Sites com múltiplas páginas
- Nichos
- Institucional, conteúdo, loja
- Evite
- Mais opções do que o público entende
Pergunta frequente+
Accordion / FAQ
Revela respostas sob demanda. Reduz comprimento visual, mas esconde conteúdo até haver interação.
- Use em
- Dúvidas secundárias
- Nichos
- Serviços, cursos, checkout
- Evite
- Esconder informação essencial
Tabela
Compara dados por linhas e colunas. É melhor que cards quando a comparação exata é a tarefa principal.
- Use em
- Planos, especificações, relatórios
- Nichos
- SaaS, finanças, pesquisa
- Evite
- Tabelas largas sem solução mobile
Janela modalUma decisão por vez
Modal
Abre uma camada sobre a página para uma tarefa curta e focada, sem abandonar o contexto atual.
- Use em
- Confirmação, login, detalhes rápidos
- Nichos
- Apps, lojas, dashboards
- Evite
- Interromper antes de gerar valor
04 / FUNDAMENTOS VISUAIS
A gramática da interface.
O elemento pode estar correto e ainda parecer errado quando proporção, contraste e espaçamento não formam um sistema.
Voz + hierarquia + leitura
Família, peso, tamanho, entrelinha e largura definem como a mensagem é percebida.
body ≥ 16px · linha 50–75chSignificado + contraste
Cores organizam estados e emoção. Nunca use somente cor para transmitir informação.
contraste WCAGRitmo + agrupamento
Itens próximos parecem relacionados; grandes espaços marcam mudança de assunto.
escala 4 · 8 · 12 · 16 · 24 · 32Adaptação, não miniatura
Mobile reorganiza prioridade, toque, texto e navegação — não apenas reduz tudo.
mobile first · container queries05 / ESCOLHA POR NICHO
Cada objetivo pede
uma combinação.
Escolha um cenário para receber uma recomendação inicial. Não é receita fixa: é um ponto de partida para pensar.
REFERÊNCIA RECOMENDADA
Institucional / B2B
Construir confiança, explicar valor e gerar contatos qualificados.
Estrutura prioritáriaHero claro · prova · serviços · cases · CTA
Componentes úteisCases, depoimentos, formulário, equipe
Tipografia16–18px · 60–70ch · hierarquia forte
EvitarJargão, menu excessivo e promessas vagas
TipoPrioridadePágina essencialConversão
Landing pageUma ofertaPágina únicaCadastro ou compra
LojaDescobrir e comprarProduto + checkoutPedido concluído
EditorialLer e retornarArtigo + categoriaAssinatura / tempo de leitura
PortfólioDemonstrar capacidadeProjeto / caseContato
SaaSEntender e testarProduto + preçoTrial / demo
06 / CAMADAS TÉCNICAS
O que trabalha por baixo.
Você não precisa dominar tudo no primeiro dia. Precisa saber que as camadas existem e como se conectam.
Estrutura e significado
Define títulos, parágrafos, links, botões, imagens, formulários e regiões.
<main> <h1> <button>Aparência e adaptação
Controla cores, fontes, espaço, layout, animação e responsividade.
grid · clamp() · @mediaComportamento
Responde a interações, muda estados, busca dados e conecta APIs.
events · fetch · stateGestão de conteúdo
Permite editar páginas, posts e produtos sem alterar o código.
WordPress · headlessProcessamento e dados
Autenticação, banco de dados, pagamentos, arquivos e regras de negócio.
PHP · Node · SQLEntrega e proteção
Domínio, DNS, hospedagem, CDN, SSL, cache, backups e monitoramento.
HTTPS · CDN · backup07 / WORDPRESS PARA INICIANTES
Quem faz o quê?
WordPress é o sistema que administra conteúdo. Tema, plugins e construtores assumem funções diferentes.
WordPress
O CMS: usuários, páginas, posts, mídia, permissões e banco de dados.
Tema
Define templates, estilos globais e como o conteúdo é apresentado.
Construtor
Interface visual para compor páginas: Gutenberg, Bricks, Elementor e outros.
Plugin
Adiciona uma função específica: formulário, SEO, loja, cache, segurança.
WooCommerce
Transforma o WordPress em comércio: produtos, carrinho, pedidos e checkout.
08 / QUALIDADE INVISÍVEL
O usuário sente
mesmo sem nomear.
- Contraste e foco visível
- Teclado e leitor de tela
- Legendas e texto alternativo
- Imagens nos tamanhos certos
- Fontes e scripts controlados
- Cache e carregamento progressivo
- Títulos e HTML semântico
- URLs, metadados e sitemap
- Conteúdo que responde intenções
- HTTPS e atualizações
- Menor privilégio e autenticação
- Backup testado e monitoramento
09 / PRIMEIRO EXEMPLO
Uma seção, três camadas.
Troque as abas para entender como estrutura, estilo e comportamento colaboram.
<section class="hero">
<p class="eyebrow">Curso para iniciantes</p>
<h1>Aprenda construindo.</h1>
<p>Uma promessa clara explica valor e público.</p>
<button type="button">Começar agora</button>
</section>10 / ANTES DE PUBLICAR
Checklist do primeiro lançamento.
Publicar não encerra o trabalho. É o momento em que dados reais começam a substituir hipóteses.
0 de 8 concluídos
O PRINCÍPIO MAIS IMPORTANTE