Mantenha um tema por cartão
Determine o que os usuários precisam saber antes de decidir abrir um cartão.
Cartão Sistema de projeto
Colete informações e ações em uma unidade fácil de digitalizar.
Conteúdo do checklist
Progresso da revisão
01
Estrutura e significado
Compare as informações e a apresentação no contexto de uso.
02
Interação e usabilidade
Experimente a operação, altere o status e continue trabalhando.
O progresso é salvo automaticamente neste navegador.
ORIENTAÇÕES
Como revisar
EXEMPLOS
Exemplos de uso
Mantenha um tema por cartão
O cartão do curso indica o nome, nível e duração antes do botão “Ver curso”.
Variantes e casos de uso
Separação dos cartões
Distinguir o cartão da página com borda ou fundo, mantendo a mesma regra para o mesmo tipo de conteúdo.
Testar cartões em fundos claros e escuros: os limites devem ser visíveis sem depender de sombras.
Exemplo O cartão de documento tem uma borda clara e um título com link.
Espaçamento no cartão
Agrupar imagem, título, descrição e ações com espaçamentos que reflitam sua relação.
Testar títulos de duas linhas e imagens ausentes: o espaçamento não deve criar vazios sem sentido.
Exemplo A imagem fica a 12 px do título; a descrição fica mais perto do título do que do botão final.
Cantos arredondados e recorte
Manter os raios na mesma escala de design e recortar as imagens conforme os cantos do contorno.
Colocar a imagem na borda e ativar o foco: a imagem não deve ultrapassar os cantos nem cortar o contorno de foco.
Exemplo A imagem superior arredonda apenas os dois cantos de cima; o rodapé mantém o fundo contínuo com o cartão.