Curso de UX e Web Design Responsivo

Aula 1 • Processo de Design Thinking

Apresenta o framework de design thinking de cinco etapas como um método de resolução de problemas. Fornece a mentalidade iterativa aplicada em todos os capítulos subsequentes.

Aula 2 • O Que o Design de UX Realmente Significa

Define UX além da estética, abrangendo usabilidade, utilidade e desejabilidade. Estabelece o vocabulário usado ao longo do curso.

Aula 3 • Acessibilidade e Design Inclusivo

Estabelece a acessibilidade como um requisito central de design, não uma reflexão tardia. Apresenta as diretrizes globais de acessibilidade para conteúdo e os princípios de design inclusivo.

Aula 1 • Pesquisas e Métodos Quantitativos

Apresenta o design de pesquisas, o benchmarking de usabilidade e a interpretação de análises. Complementa os achados qualitativos com dados comportamentais mensuráveis.

Aula 2 • Entrevistas e Investigação Contextual

Ensina técnicas de entrevista estruturada e semiestruturada juntamente com a observação em contexto. Constrói habilidades para capturar o comportamento e as motivações autênticas do usuário.

Aula 3 • Planejamento de um Estudo de Pesquisa

Aborda metas de pesquisa, escopo e seleção de métodos antes do início do trabalho de campo. Garante que as perguntas da pesquisa estejam alinhadas com as decisões de design a serem tomadas.

Aula 1 • Mapas do Site e Hierarquias de Conteúdo

Produz documentos formais de mapa do site que comunicam a estrutura às partes interessadas e aos desenvolvedores. Alinha a hierarquia de conteúdo com os modelos mentais do usuário oriundos da pesquisa.

Aula 2 • Card Sorting e Tree Testing

Ensina o card sorting aberto e fechado para validar estruturas de categorias com os usuários. O tree testing verifica os rótulos de navegação antes da aplicação do design visual.

Aula 3 • Projetando Sistemas de Navegação

Aborda padrões de navegação global, local e contextual para web e dispositivos móveis. Conecta o design de navegação aos fluxos de tarefas do usuário estabelecidos na pesquisa.

Aula 1 • Ferramentas Digitais de Wireframing

Aborda ferramentas de wireframing padrão da indústria para criar layouts de tela de média fidelidade. Constrói fluência em ferramentas aplicada nas etapas de prototipação e handoff.

Aula 2 • Esboços e Wireframes de Baixa Fidelidade

Apresenta o esboço rápido e o wireframing em papel como ferramentas rápidas de ideação. Artefatos de baixa fidelidade comunicam o layout sem distrair as partes interessadas com polimento visual.

Aula 3 • Construção de Protótipos Interativos

Conecta wireframes em fluxos clicáveis que simulam o comportamento real do produto. Os protótipos são dimensionados para testar tarefas de usuário específicas identificadas na pesquisa.

Aula 4 • Testes de Usabilidade com Protótipos

Aplica protótipos em testes de usabilidade moderados e não moderados para validar decisões de design. Fecha o ciclo de pesquisa-design antes do investimento em design visual.

Aula 1 • Layout, Espaçamento e Hierarquia Visual

Aplica sistemas de grade, escalas de espaçamento e peso visual para direcionar a atenção do usuário. O espaçamento e a hierarquia consistentes reduzem a carga cognitiva e melhoram a escaneabilidade.

Aula 2 • Tipografia para Interfaces Digitais

Aborda seleção de família tipográfica, escala, altura da linha e contraste para legibilidade em tela. As decisões tipográficas afetam diretamente a acessibilidade e a percepção da marca.

Aula 3 • Teoria das Cores e Sistemas de Cores para IU

Ensina psicologia das cores, requisitos de contraste e construção sistemática de paletas. Um sistema de cores estruturado garante consistência em todos os estados da interface.

Aula 4 • Iconografia e Imagens

Aborda princípios de design de ícones, seleção de imagens e estilo de ilustração para contextos de IU. Os ativos visuais devem reforçar o significado sem criar ambiguidade.

Aula 1 • Media Queries e Breakpoints

Aplica consultas de min-width e max-width para adaptar layouts em breakpoints definidos. Aborda a sintaxe de intervalo moderna e as container queries para responsividade em nível de componente.

Aula 2 • CSS Flexbox para Layouts Responsivos

Ensina eixos, alinhamento e quebra do Flexbox para construir componentes responsivos unidimensionais. O Flexbox é aplicado a barras de navegação, linhas de cartões e layouts de formulário.

Aula 3 • Imagens e Mídia Responsivas

Ensina os atributos srcset, sizes e o elemento picture para servir imagens com tamanho adequado. A entrega otimizada de mídia melhora o desempenho em todos os tipos de dispositivo.

Aula 4 • CSS Grid para Layouts Complexos

Aborda áreas de template do Grid, posicionamento automático e linhas nomeadas para layouts bidimensionais. O Grid permite uma estrutura em nível de página que o Flexbox sozinho não consegue alcançar.

Aula 1 • Seletores Avançados e Especificidade

Ensina pseudo-classes, pseudo-elementos e gerenciamento de especificidade para um CSS sustentável. Reduz conflitos de estilo comuns em bases de código responsivas grandes.

Aula 2 • Arquitetura e Escalabilidade CSS

Apresenta BEM, utility-first e CSS Modules como metodologias para folhas de estilo escaláveis. A arquitetura escalável previne conflitos de especificidade em grandes projetos responsivos.

Aula 3 • Transições CSS e Microanimações

Aplica propriedades de transição para criar mudanças de estado suaves que reforçam o feedback de interação. As microanimações melhoram o desempenho percebido e guiam a atenção do usuário.

Aula 4 • Animações CSS com Keyframes

Constrói animações complexas de várias etapas usando @keyframes para estados de carregamento e fluxos de onboarding. Aborda propriedades seguras para desempenho e orquestração de animações.

Aula 1 • Melhores Práticas de Handoff de Design

Aborda fluxos de trabalho de anotação, especificações de redline e exportação de ativos que reduzem a ambiguidade do desenvolvedor. Documentos de handoff precisos previnem erros de implementação custosos.

Aula 2 • Garantia de Qualidade e Testes de Design Responsivo

Aplica testes entre navegadores e dispositivos para verificar se o comportamento responsivo corresponde à intenção do design. A GQ fecha a lacuna entre as especificações de design e a implementação ativa.

Aula 3 • Métricas de UX e Medição de Sucesso

Define métricas quantitativas e qualitativas que conectam decisões de UX a resultados de negócios. As métricas estabelecidas aqui orientam a avaliação pós-lançamento no projeto final.

Aula 4 • Projeto Capstone e Apresentação de Portfólio

Sintetiza todas as habilidades do curso em um estudo de caso completo de UX e design responsivo para web. A apresentação do portfólio prepara os alunos para entrevistas profissionais de design.