Módulo
08
·
Aula
13
·
Layout & Padrões de UI
Cards & Listas
Descubra como projetar cards e listas para organizar informações de forma clara, aplicando hierarquia visual, consistência e interatividade em interfaces.
Nesta aula, exploramos os componentes cards e listas, que organizam e apresentam informações de forma modular, clara e acessível. Esses elementos são amplamente usados em interfaces para facilitar a navegação e interação do usuário.
Pontos principais da aula:
O que são cards?
Contêineres visuais que agrupam conteúdo relacionado, como textos, imagens e ações.
Podem ser interativos ou apenas organizadores visuais.
Boas práticas para cards:
Consistência visual: Cards semelhantes devem ter tamanhos, cores e tipografias alinhadas.
Hierarquia tipográfica: Separar títulos, subtítulos e descrições com estilos e tamanhos variados.
Espaçamento: Manter padding interno e margens externas consistentes para evitar desordem.
Interatividade: Fornecer feedback visual claro (como hover ou mudança de cor) para ações interativas.
O que são listas?
Componentes usados para organizar itens sequenciais, como textos e ícones, horizontal ou verticalmente.
Oferecem agrupamento lógico e podem ser simples ou ricas em interatividade, como listas clicáveis.
Características essenciais de listas:
Cabeça de chave: O item mais importante deve ser destacado e posicionado à esquerda.
Separação visual: Uso de bordas, cores ou espaçamento para distinguir itens.
Estilos minimalistas: Interfaces mais simples podem usar apenas alinhamento e hierarquia para organização.
Construído com 🤍 pelo
©
2024
DesignCraft