Fundamentos
Glossário essencial: do hover ao breakpoint
As palavras que aparecem nas conversas de design e desenvolvimento, explicadas sem complicação.
| Termo | Em português claro |
|---|---|
| UI | Interface do usuário: o que permite perceber e operar um produto. |
| UX | Experiência da pessoa ao tentar alcançar um objetivo com o produto. |
| Hover | Estado de um elemento quando o ponteiro está sobre ele. |
| Focus | Elemento que recebe a próxima interação do teclado. |
| Viewport | Área da página que está visível na janela do navegador. |
| Breakpoint | Condição de tamanho em que o layout ou comportamento muda. |
| Design token | Nome associado a uma decisão reutilizável, como cor ou espaçamento. |
| Padding | Espaço interno entre o conteúdo e a borda de um elemento. |
| Margin | Espaço externo que separa o elemento de outros. |
| Gap | Distância entre itens em um layout de grade ou flexível. |
| Z-index | Parte das regras que organizam camadas em um contexto de empilhamento. |
| Affordance | Possibilidade de ação percebida na relação entre pessoa e objeto. |
| Feedback | Resposta que permite entender o resultado de uma ação. |
| Loading | Estado em que uma informação ou operação ainda está sendo preparada. |
| Disabled | Estado em que um controle não está disponível para ativação. |
| ARIA | Atributos e papéis que descrevem semântica e estado para tecnologias assistivas. |
O nome é o começo da conversa
Ao usar um termo, conecte-o ao comportamento que você espera. “O botão deve ter foco visível” é mais preciso que pedir apenas uma borda. “O menu fecha com Esc e devolve o foco ao botão” descreve uma interação verificável.
ARIA não adiciona comportamento automaticamente. Um role de botão em uma div não implementa sozinho ativação por teclado, foco ou estados. Sempre que possível, comece pelo elemento HTML nativo.
Para aprofundar: referência oficial ↗. Os exemplos e as explicações desta página são conteúdo editorial da Biblioteca UI.
Encontrar um componente →