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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

Fique por dentro!

Adicione o calendário do curso DesignCraft na sua agenda

Construído com 🤍 pelo

©

2024

DesignCraft

Concluir