Botões que Funcionam: Estados e Hierarquia
Como desenhar botões que indicam claramente o que vai acontecer. Incluí hover, active, disabled…
Ler artigo
Componentes de UI
Cards: Padrões que Funcionam
Os cards são versáteis. Mostramos como usá-los para produtos, artigos, perfis e muito mais — mantendo consistência e clareza.
Por que os Cards Importam
Um card bem feito desaparece. As pessoas conseguem entender o que é, do que se trata, e o que fazer a seguir — tudo em segundos. Não é magia. É estrutura.
Neste guia, exploramos os padrões que realmente funcionam. Desde cards de produto até perfis de utilizadores, layouts de artigos e muito mais. Cada padrão tem um propósito claro. E você aprenderá a reconhecê-los.
Os Cinco Padrões Essenciais
Cada tipo de card resolve um problema diferente. Reconheça os padrões, adapte-os ao seu projeto.
Card de Produto
Imagem em destaque, nome, preço, rating e botão de ação. É simples mas exigente — cada elemento compete pela atenção.
Card de Artigo
Imagem, título, resumo de uma ou duas linhas, data e categoria. Convida à leitura sem sobrecarregar com informação.
Card de Perfil
Avatar, nome, cargo ou descrição breve, e talvez um botão de ação. Humaniza a interface sem ruído visual.
Card de Testemunho
Citação, nome da pessoa, foto pequena. Constrói confiança porque é direto — sem floridos.
Card de Feature
Ícone, título, descrição. Explica um conceito ou capacidade. Funciona bem em grelhas porque é uniforme.
Anatomia de um Card Efetivo
Dentro de um card, a hierarquia é tudo. O que você vê primeiro? Depois? E por fim? Essa ordem não é acidental — é desenhada.
1
Elemento Visual (Imagem ou Ícone)
Vem primeiro. Atrai o olhar. Deve ser clara e relevante.
2
Informação Primária (Título)
O que é isto? Uma linha, máximo duas. Sem resumos longos aqui.
3
Informação Secundária (Descrição)
Contexto adicional. Preço, data, categoria. Suportivo, não competidor do título.
4
Ação (Botão ou Link)
Claro e evidente. O que acontece se clico? Sem ambiguidade.
Espaço Respira a Interface
O padding dentro de um card não é decoração. É respiro. Cards compactados parecem baratos. Cards com espaço respeitam o utilizador.
Use 16px ou 24px de padding em cards pequenos. Em cards maiores, vá para 32px ou mais. O gap entre elementos dentro do card? Consistente — 8px entre linhas de texto, 16px entre seções.
“Um card respeitoso respeita o espaço. Não comprime tudo só porque pode.”
— Princípio de Design
Cards em Ecrãs Pequenos
No telemóvel, o card é tudo. Não há contexto ao redor — o card é o contexto. Isto muda as prioridades.
Imagem grande e clara — sem detalhes que desaparecem em 375px
Título legível — use font-size de pelo menos 16px em mobile
Botão tátil — mínimo 44px de altura, fácil de pressionar
Sem informação oculta — tudo visível sem scroll horizontal
Quando Cada Padrão Funciona Melhor
Nem todos os cards são iguais. Escolha o padrão certo para o contexto.
Catálogos de Produtos
Usa o padrão de produto — imagem em destaque, nome, preço, rating. As pessoas já conhecem este padrão. Não surpreenda.
Feeds ou Blogs
Card de artigo — imagem, título, resumo, data. Convida à exploração. Funciona bem em listas infinitas.
Equipas ou Diretórios
Card de perfil — simples, focado. Avatar grande, nome, cargo. Humaniza rapidamente.
Landing Pages
Card de feature — ícone, título, descrição. Explica capacidades sem ruído. Perfeito para grelhas de 3 colunas.
Cards Consistentes, Resultados Melhores
Os cards funcionam porque são previsíveis. Escolha um padrão. Mantenha-o. Não misture 5 estilos diferentes na mesma página — isto cria confusão.
A consistência não é entediante. É confiança. As pessoas sabem o que esperar. E isto torna a navegação natural.
Nota Importante
Este artigo é informativo e educacional. Os padrões aqui mostrados são recomendações baseadas em boas práticas de design. Cada projeto tem necessidades únicas — adapte estes princípios ao seu contexto específico. Teste sempre com utilizadores reais antes de lançar.
Leia Mais Sobre Design de UI
