UXD104 · Design visual e sistemas de interface
Sobre o curso
Transforme wireframes em interfaces bem acabadas e acessíveis usando hierarquia visual, tipografia e cor, e construa no Figma um sistema de interface reutilizável baseado em componentes.
Para quem é
Alunos que já criam wireframes e querem produzir telas consistentes e com aparência profissional, além de um pequeno design system.
Pré-requisitos
UXD103, ou conhecimento prático de wireframes no Figma.
O que você será capaz de fazer
- Aplicar princípios da Gestalt, alinhamento e espaçamento para criar hierarquia visual clara
- Definir uma escala tipográfica e uma paleta de cores acessível que atenda ao contraste AA da WCAG
- Construir tokens de design e componentes reutilizáveis no Figma com variantes e auto layout
- Aplicar o kit de interface para converter wireframes em telas consistentes de alta fidelidade
Aulas
- Aula 1 · Hierarquia visual, layout e tipografia
- Aula 2 · Cor, imagens e acessibilidade
- Aula 3 · Tokens de design e sistemas de componentes
- Aula 4 · Laboratório e atividade
Laboratório: Mini kit de interface e telas de alta fidelidade
Você cria um pequeno kit de interface para o app de um negócio local, como o app de pedidos e fidelidade de uma cafeteria. Define estilos de cor, tipografia e espaçamento, constrói botões, campos, cards e barra de navegação como componentes com variantes e os usa para transformar quatro dos seus wireframes em telas mobile de alta fidelidade.
Ferramentas gratuitas: Figma no plano gratuito, Google Fonts e um verificador de contraste gratuito
Atividade avaliada
Entregue o link do arquivo no Figma (acesso de visualização) ou exportações em PDF com a página de guia de estilo, a página de componentes e quatro telas de alta fidelidade. O guia de estilo deve documentar os tokens de cor com as taxas de contraste, uma escala tipográfica com regras de uso e uma escala de espaçamento. Os componentes devem incluir pelo menos três variantes de botão com estados padrão, pressionado e desativado, um campo de texto com estado de erro e um card. Acrescente uma justificativa de uma página explicando suas escolhas visuais e como elas apoiam a marca e a acessibilidade.
| Critério | Peso | Como é um trabalho excelente |
|---|---|---|
| Hierarquia visual e layout | 25% | As telas têm ponto focal claro, alinhamento e espaçamento consistentes, e elementos relacionados estão agrupados com lógica. |
| Tipografia e cor | 25% | A escala tipográfica é consistente e legível, a paleta tem propósito e todo texto atende ao contraste AA da WCAG. |
| Sistema de componentes | 30% | Os componentes usam auto layout e variantes, cobrem os estados exigidos, têm nomes consistentes e são reutilizados em todas as telas. |
| Justificativa e documentação | 20% | O guia de estilo é claro o bastante para outra pessoa usar, e a justificativa liga as escolhas à marca e à acessibilidade. |
Peça de portfólio
Um mini kit de interface documentado e quatro telas de alta fidelidade que demonstram suas habilidades de design visual e de sistemas.
Próximo passo
Continue com UXD105 · Prototipagem e testes de usabilidade · 8 horas · R$ 80,00
Conteúdo do curso
UXD104 · Design visual e sistemas de interface (6 h)
-
Aula 1 · Hierarquia visual, layout e tipografia
-
Aula 2 · Cor, imagens e acessibilidade
-
Aula 3 · Tokens de design e sistemas de componentes
-
Aula 4 · Laboratório e atividade
-
UXD104 Avaliação · Design visual e sistemas de interface