UI/UX Checklist
Apostila interativa · Design System Saúde

Checklist Completo de UI/UX para Desenvolvimento Web

Material didático independente com explicações, boas práticas, exemplos visuais e demos funcionais — alinhado aos tokens do Design System (turquesa, tipografia, elevação e acessibilidade).

Tipografia

A tipografia organiza a hierarquia, melhora a legibilidade e reduz a carga cognitiva. Use escala consistente e tamanho mínimo de 16px no corpo.

Quando utilizarConteúdo longo, dashboards, formulários e documentação.
Quando evitarMuitos pesos/famílias na mesma tela; texto abaixo de 16px no corpo.
Boas práticas Limite a 2 famílias. Mantenha line-height ≥ 1.5 em parágrafos. Reserve pesos bold para ênfase real.
Exemplo visual — hierarquia

Heading 1 · 48px / ExtraBold

Heading 2 · 32px / Bold

Heading 3 · 24px / SemiBold

Heading 4 · 18px / SemiBold

Corpo legível a 16px com line-height 1.8. O espaçamento entre linhas facilita a leitura contínua e evita fadiga visual em textos longos.

Regular 400Medium 500Bold 700
HTML + CSS
<p style="font-size:var(--font-size-sm);line-height:var(--line-height-lg)">
  Texto mínimo de 16px com boa respiração.
</p>
Dica profissional Prefira tokens (--font-size-*, --line-height-*) em vez de valores soltos — isso garante consistência no Design System.

Cores

Paleta consistente comunica status sem ambiguidade. Nunca dependa apenas da cor: combine ícone, texto e contraste adequado (WCAG AA).

Primária--primary-color
Sucesso--success-color
Erro--danger-color
Aviso--warning-color
Informação--info-color
Secundária--secondary-color
Texto--text-color
Borda--border-color
Não depender apenas da cor
Salvo Falhou Atenção Info
Importante Contraste texto/fundo ≥ 4.5:1 (corpo) e ≥ 3:1 (texto grande). Teste com daltonismo simulado.

Espaçamento

Grids de 4px e 8px criam ritmo visual. Use tokens de spacing para margens, paddings e separação entre seções.

Grid 4px / 8px
4
8
12
16
24
32
48

Padding vs Margem

Conteúdo interno (padding) · espaço externo entre blocos (margin)
Dica Separe seções com --spacing-xxl (48px) e agrupe itens relacionados com --spacing-sm/md.

Bordas

Bordas discretas delimitam regiões sem competir com o conteúdo. Radius comunica personalidade do produto.

Border radius & espessuras
none · 1px
sm · 4px
md · 8px
lg · 16px
full
Quando utilizarCards, inputs, modais, chips.
Quando evitarBordas grossas em tudo; radius inconsistente entre componentes irmãos.

Sombras

Elevação comunica profundidade e prioridade. Use poucas camadas bem definidas.

Níveis de elevação
Pequena
listas, inputs
Média
cards, dropdowns
Grande
modais, menus
Boas práticas Sombras suaves + fundo claro. Evite múltiplas sombras coloridas/glow sem necessidade — geram ruído visual.

Estados · Botão

Todo botão precisa comunicar default, hover, focus, active, disabled e estados de processo (loading/success/error).

Estados interativos
HTML
<button class="btn btn-primary" type="button">Salvar</button>
<button class="btn btn-primary" disabled>Disabled</button>

Estados · Input

Inputs devem deixar claro o estado atual: normal, hover, focus, erro, sucesso e disabled.

Campo obrigatório ou formato inválido.
E-mail válido.

Feedback Visual

Feedback imediato reduz ansiedade e confirma ações. Combine skeleton, spinner, progresso, alerts e overlays.

Skeleton Loading

Spinner & Progresso

Alertas

Sucesso
Registro salvo corretamente.
Erro
Não foi possível concluir a operação.
Aviso
Revise os dados antes de continuar.
Informação
A sincronização ocorre a cada 5 minutos.

Focus State

O foco indica onde o teclado está. Nunca remova o outline sem oferecer um substituto visível e com contraste.

Use Tab para navegar
Importante outline: none sem alternativa quebra acessibilidade por teclado e falha em auditorias WCAG.

Hover

Hover antecipa interatividade. Em touch devices, não dependa apenas do hover — ofereça estados focus/active.

Passe o mouse
Cor
Scale
Shadow
Cursor
Micro

Responsividade

Projete mobile-first. Conteúdo e ações principais devem funcionar em todas as larguras sem scroll horizontal.

Grid fluido (auto-fit)
A
B
C
D
Boas práticasUnidades relativas, imagens fluidas, alvos ≥ 44px, testar em dispositivos reais.
EvitarLarguras fixas em px, menus inacessíveis no mobile, texto cortado.

Microinterações

Animações curtas (150–300ms) dão vida à interface sem distrair. Prefira easing suave e propósito claro.

Fade · Scale · Slide
Fade
Scale
Slide

Accordion + rotação de ícone

É uma resposta animada a uma ação do usuário: clique, hover, carregamento ou mudança de estado.
Para revelar detalhes sob demanda, FAQs e filtros avançados sem sobrecarregar a tela.
Entre 150ms e 300ms para feedback de UI. Acima de 400ms parece lento.
Expand / Collapse nativo

Útil para conteúdo opcional. Combine com ARIA quando customizar o comportamento.

Modais

Modais pedem atenção total. Implemente fechar por X, clique fora, ESC, bloqueio de scroll e retorno de foco.

Boas práticas Trap de foco dentro do modal; título associado via aria-labelledby; botão de ação destrutiva separado.

Formulários

Formulários claros reduzem erros. Labels visíveis, validação em tempo real, máscaras e navegação por TAB.

Informe pelo menos 3 caracteres. Campo obrigatório
Digite um e-mail válido.
Máscara automática

Notificações

Escolha o padrão certo: Toast (efêmero), Snackbar (ação), Alert (inline) ou Dialog (decisão).

Tabelas

Tabelas modernas precisam de busca, ordenação, filtros, paginação, cabeçalho fixo e ações agrupadas — com fallback responsivo.

Nome Papel Status Ações

Pesquisa

Busca instantânea com debounce, sugestões, histórico e estado vazio melhora descoberta sem sobrecarregar a API.

Histórico: —

Upload

Drag and drop, preview, validação de tipo/tamanho, progresso e remoção fazem o upload parecer confiável.

Arraste arquivos aqui ou clique

PNG, JPG ou PDF · máx. 2MB

Estados Vazios

Empty states orientam o próximo passo: explicar, ilustrar e oferecer CTA.

Sem resultados

Nenhum item corresponde à busca. Tente outros termos.

Nenhum registro

Ainda não há dados nesta lista.

Primeiros passos

Configure seu perfil para começar a usar o painel.

Ilustração + CTA

Use ilustrações simples alinhadas à marca, não stock genérico.

Estados de Carregamento

Skeleton para layout conhecido, spinner para ações curtas, barra para progresso determinístico, lazy e infinite scroll para listas.

Lazy Loading de imagem

Paisagem carregada sob demanda

Infinite Scroll (simulado)

    Acessibilidade

    Acessibilidade não é extra: é requisito. Teclado, ARIA, labels, contraste e área de toque mínima.

    Área de toque 44×44 vs inadequada
    Checklist Navegação Tab completa · focus visível · aria-* em componentes custom · labels associados · contraste AA · leitores de tela (NVDA/VoiceOver).
    ARIA exemplo
    <button aria-expanded="false" aria-controls="painel">
  Detalhes
</button>
<div id="painel" role="region" hidden>…</div>

    Performance Percebida

    Usuários julgam velocidade pela percepção: skeleton, lazy load, imagens otimizadas, prefetch, cache e transições 150–300ms.

    Prefetch / streaming visual

    Indica atividade enquanto o conteúdo chega.

    Cache simulado

    Clique para simular fetch + cache em memória.

    Dica Use loading="lazy", formatos modernos (WebP/AVIF) e width/height para evitar CLS.

    Consistência Visual

    Padronize botões, inputs, cards, modais, ícones, fontes, espaçamento, sombras, bordas e animações.

    Token
    Card
    Regra Se dois componentes fazem o mesmo trabalho, devem parecer e se comportar iguais.

    Padrões Modernos

    Design System, tokens, dark/light mode, feedback imediato e interface minimalista reduzem carga cognitiva.

    Design Tokens (do CSS externo)

    --primary-color
    --spacing-md
    --shadow-md
    --border-radius-md
    Dark / Light ModeUse o botão de tema no header — preferência salva em LocalStorage.
    Componentes reutilizáveisClasses como .btn, .input, .card, .alert.
    Feedback imediatoToasts, validação live e loading states.
    Hierarquia & minimalismoUma ideia por seção; menos chrome, mais conteúdo.
    Ação concluída