Dia 8: Cards, o canivete suíço do design

De um simples blog a um e-commerce complexo, aprenda a projetar cards para diferentes contextos e necessidades.

Por que os cards funcionam tão bem?

Cards são um dos componentes mais usados em UI por um motivo simples: nosso cérebro adora! Eles agrupam informações relacionadas em um container claro e independente. Isso torna a interface fácil de "escanear" com os olhos, permitindo que o usuário processe muita informação rapidamente.

Dissecando as variações de cards

A estrutura de um card muda drasticamente dependendo do seu objetivo. Vamos ver três exemplos clássicos:

Card de artigo/notícia: O foco é no título e na imagem para atrair o clique. A informação é mais editorial.
Card de produto (e-commerce): O foco é na imagem do produto, preço e em uma ação clara (comprar). A informação é comercial.
Card de perfil: O foco é na pessoa. Avatar, nome e uma ação de conexão são os elementos principais. A informação é social.

Vídeo para inspirar seus componentes

Veja na prática como construir cards flexíveis e reutilizáveis no Figma, uma habilidade essencial para qualquer UI Designer.

Auto Layout Figma - Como Usar, Atalho, Wrap, Como Desfazer e Muito Mais! (Canal Doug Lazarini)

Seu desafio de hoje: o trio de cards

Sua missão é mostrar sua versatilidade como designer projetando os três tipos de cards que vimos hoje.

Checklist do desafio:

Desenhe um Card de Artigo (com imagem, categoria, título e autor).
Desenhe um Card de Produto (com imagem, nome, preço, avaliação por estrelas e um botão "Adicionar ao carrinho").
Desenhe um Card de Perfil de Usuário (com avatar, nome, @usuário e um botão "Seguir").
Tente manter um estilo visual (cores, bordas, fontes) consistente entre os três.