Curso de Design de Interface de Usuário

Aula 1 • Princípios Básicos de Design Visual

Aborda contraste, alinhamento, repetição e proximidade como regras fundamentais de layout. Os alunos aplicam esses princípios para avaliar e melhorar layouts básicos de tela.

Aula 2 • O Que É Design de UI

Define design de UI, distingue-o de UX e design gráfico, e mapeia seu papel no desenvolvimento de produto. Fundamenta todos os capítulos subsequentes em definições compartilhadas.

Aula 3 • Modelos Mentais e Affordances

Explica como os usuários formam expectativas a partir da experiência prévia e como as affordances sinalizam interatividade. Conecta a psicologia cognitiva ao design prático de controles.

Aula 4 • Visão Geral do Processo de Design de UI

Descreve o fluxo de trabalho de design completo, da descoberta ao handoff. Estabelece expectativas de como cada capítulo se encaixa em um ciclo profissional de design.

Aula 1 • Escala Tipográfica e Hierarquia

Estabelece sistemas de escala modular e estruturas de cabeçalho que organizam o conteúdo visualmente. Os alunos criam escalas tipográficas que comunicam claramente a prioridade da informação.

Aula 2 • Construindo Paletas de Cores Acessíveis

Ensina os requisitos de taxa de contraste e considerações sobre daltonismo para design inclusivo. Os alunos auditam e corrigem paletas para atender aos padrões de acessibilidade.

Aula 3 • Fundamentos da Tipografia

Apresenta anatomia de tipos, classificação e fatores de legibilidade para uso em tela. Os alunos combinam tipos e definem texto corrido e de exibição legível.

Aula 4 • Teoria das Cores para Telas Digitais

Abre matiz, saturação, valor e modelos de cores relevantes para renderização em tela. Os alunos selecionam paletas que comunicam marca e função com precisão.

Aula 1 • Sistemas de Grade Explicados

Aborda grades colunares, modulares e de linha de base e seus papéis na organização do conteúdo da tela. Os alunos selecionam o tipo de grade apropriado para um dado contexto de interface.

Aula 2 • Tokens de Espaçamento e Escala

Apresenta escalas de espaçamento e sistemas de tokens que garantem padding e margens consistentes. Os alunos definem e aplicam uma escala de espaçamento em vários componentes de UI.

Aula 3 • Conceitos de Flexbox e Auto-Layout

Explica direção do flex, alinhamento e wrapping conforme se aplicam a ferramentas de layout de UI. Os alunos constroem frames de componentes dinâmicos que redimensionam sem ajuste manual.

Aula 4 • Layouts Responsivos e Adaptativos

Diferencia layouts fluidos responsivos de designs adaptativos baseados em breakpoints. Os alunos configuram layouts que se reorganizam corretamente em mobile, tablet e desktop.

Aula 1 • Anatomia dos Componentes de UI

Decompõe botões, campos de entrada, cards e modais em suas partes estruturais. Os alunos identificam estados de componentes e entendem como cada parte serve a uma função.

Aula 2 • Padrões de Navegação

Aborda barras de abas, gavetas laterais, breadcrumbs e mega-menus como soluções de navegação. Os alunos combinam padrões de navegação com a arquitetura da informação e o contexto do usuário.

Aula 3 • Melhores Práticas de Design de Formulários

Ensina posicionamento de rótulos, validação de entrada, mensagens de erro e fluxos de formulários de múltiplas etapas. Os alunos redesenham formulários mal estruturados para reduzir erros e atritos do usuário.

Aula 4 • Componentes de Exibição de Dados

Aborda tabelas, listas, gráficos e estados vazios como métodos de apresentar dados estruturados. Os alunos escolhem componentes de exibição que correspondem à densidade de dados e aos objetivos do usuário.

Aula 1 • O Que É um Design System

Define design systems, distinguindo-os de guias de estilo e bibliotecas de padrões. Os alunos mapeiam a relação entre tokens, componentes e documentação.

Aula 2 • Temas e Flexibilidade de Marca

Demonstra como a troca de tokens possibilita temas de múltiplas marcas ou modo escuro. Os alunos implementam um tema secundário sem reestruturar componentes existentes.

Aula 3 • Arquitetura de Design Tokens

Aborda tokens globais, de alias e de nível de componente e suas convenções de nomenclatura. Os alunos estruturam uma hierarquia de tokens que suporta temas e flexibilidade de marca.

Aula 4 • Construindo Componentes Reutilizáveis

Ensina a metodologia de design atômico e composição de componentes, de átomos a organismos. Os alunos constroem um conjunto de componentes base com props e variantes documentadas.

Aula 1 • Prototipando Movimento em Ferramentas de Design

Demonstra a construção de protótipos interativos com transições temporizadas e gatilhos de scroll. Os alunos entregam um protótipo clicável que comunica a intenção de movimento aos stakeholders.

Aula 2 • Considerações de Acessibilidade em Movimento

Aborda distúrbios vestibulares, preferências de movimento reduzido e limites seguros de animação. Os alunos auditam um protótipo e adicionam alternativas de movimento reduzido para todas as animações principais.

Aula 3 • Anatomia da Microinteração

Decompõe microinterações em gatilhos, regras, feedback e loops ou modos. Os alunos mapeiam cada elemento de uma microinteração antes de projetar seu comportamento visual.

Aula 4 • Princípios do Design de Movimento

Aborda easing, duração e coreografia como a gramática central do movimento em UI. Os alunos distinguem animação com propósito de movimento decorativo usando critérios definidos.

Aula 1 • Analisando e Sintetizando Descobertas

Ensina mapeamento de afinidade, classificação de severidade e identificação de padrões entre sessões. Os alunos transformam observações brutas em um relatório estruturado de descobertas.

Aula 2 • Fundamentos do Teste de Usabilidade

Define teste moderado vs. não moderado, avaliação baseada em tarefas e protocolo think-aloud. Os alunos escrevem um plano de teste alinhado a perguntas específicas de usabilidade.

Aula 3 • Conduzindo e Facilitando Sessões

Aborda configuração de sessão, facilitação neutra, tomada de notas e evitar perguntas direcionadoras. Os alunos praticam facilitação por meio de role-play antes de realizar sessões reais.

Aula 4 • Iterando com Base em Evidências

Demonstra como priorizar correções, redesenhar elementos direcionados e realizar retestes de forma eficiente. Os alunos aplicam as descobertas para revisar um protótipo e documentar decisões de design.

Aula 1 • Exportação e Otimização de Ativos

Aborda formatos de exportação de ícones, compressão de imagem e requisitos de resolução para múltiplas plataformas. Os alunos exportam um conjunto completo de ativos com nomenclatura e formatos corretos.

Aula 2 • Medindo a Fidelidade da Implementação

Apresenta conceitos de regressão visual e métodos de comparação lado a lado para QA. Os alunos identificam e registram lacunas de fidelidade entre os arquivos de design e as versões em produção.

Aula 3 • Preparando Arquivos para Handoff

Aborda nomenclatura de camadas, organização de componentes e convenções de estrutura de arquivos para revisão por desenvolvedores. Os alunos auditam e reestruturam um arquivo de design para atender aos padrões de handoff.

Aula 4 • Anotando Especificações de Design

Ensina como anotar espaçamento, estados, interações e casos de borda em arquivos de design. Os alunos adicionam uma camada completa de anotações a um conjunto de telas existente.