Curso de Design de Sites

Aula 1 • Visão Geral das Tecnologias Web Centrais

Apresenta HTML, CSS e JavaScript como os três pilares da saída web. Esclarece o papel de cada tecnologia para que os designers entendam o que estão moldando.

Aula 2 • Configurando um Ambiente de Trabalho de Design

Orienta os alunos na seleção de ferramentas, organização de arquivos e configuração de navegadores para o trabalho de design. Garante um ambiente produtivo antes do início de qualquer projeto.

Aula 3 • Como a Web Funciona

Aborda a arquitetura cliente-servidor, requisições HTTP e pipelines de renderização do navegador. Estabelece o contexto técnico dentro do qual cada decisão de design opera.

Aula 1 • Imagens e Iconografia

Aborda a seleção, otimização e estilização de imagens e ícones para contextos web. Os alunos integram ativos visuais que reforçam, em vez de distrair, o conteúdo.

Aula 2 • Tipografia em Tela

Aborda seleção de fontes, escala, comprimento de linha e espaçamento para legibilidade digital. Os alunos estabelecem sistemas tipográficos que funcionam em diferentes tamanhos de dispositivo.

Aula 3 • Layout, Grade e Espaçamento

Apresenta sistemas de grade, espaços em branco e alinhamento como ferramentas para ordem visual. Os alunos projetam layouts estruturados que guiam o olhar de forma previsível.

Aula 4 • Hierarquia Visual e Ênfase

Ensina tamanho, peso, cor e posição como sinais de hierarquia. Os alunos direcionam a atenção do usuário para o conteúdo prioritário por meio de escolhas visuais deliberadas.

Aula 1 • Personas de Usuário e Mapas de Jornada

Ensina a construção de personas a partir de dados de pesquisa e o mapeamento de jornadas do usuário do início ao fim. Os alunos usam esses artefatos para alinhar as equipes em torno dos objetivos do usuário.

Aula 2 • Arquitetura da Informação

Aborda estrutura do site, modelos de navegação e estratégias de categorização de conteúdo. Os alunos organizam a informação para que os usuários encontrem o que precisam com o mínimo esforço.

Aula 3 • Fundamentos de Acessibilidade

Apresenta critérios de design perceptível, operável, compreensível e robusto. Os alunos auditam designs em relação às diretrizes de acessibilidade e corrigem falhas comuns.

Aula 4 • Métodos de Pesquisa em UX

Apresenta entrevistas, pesquisas e observação como ferramentas primárias de pesquisa. Os alunos coletam dados qualitativos e quantitativos para orientar a direção do design.

Aula 1 • Prototipagem de Alta Fidelidade

Aplica design visual a wireframes e vincula telas em protótipos clicáveis. Os alunos produzem artefatos próximos o suficiente do produto final para testes de usabilidade significativos.

Aula 2 • Wireframing de Baixa Fidelidade

Constrói wireframes em escala de cinza que definem a estrutura sem estilo visual. Os alunos focam na lógica do layout e no posicionamento do conteúdo antes da estética.

Aula 3 • Testando Protótipos com Usuários

Aborda planejamento, moderação e análise de testes de usabilidade em protótipos. Os alunos iteram designs com base no comportamento observado do usuário, e não em suposições.

Aula 4 • Fundamentos de Design de Interação

Apresenta estados, transições e microinterações como ferramentas de comunicação. Os alunos projetam loops de feedback que fazem as interfaces parecerem responsivas e intuitivas.

Aula 1 • Grades Fluidas e Layouts Flexíveis

Ensina grades baseadas em porcentagem e contêineres flexíveis que se adaptam a diferentes larguras. Os alunos constroem layouts que se ajustam sem quebrar em tamanhos intermediários.

Aula 2 • Breakpoints e Media Queries

Aborda a seleção de breakpoints com base nas necessidades de conteúdo, e não em nomes de dispositivos. Os alunos escrevem media queries que acionam alterações de layout em limites significativos.

Aula 3 • Tipografia e Espaçamento Responsivos

Escala a tipografia e o espaçamento proporcionalmente entre os breakpoints para garantir legibilidade consistente. Os alunos usam técnicas de tipografia fluida para eliminar saltos bruscos de tamanho.

Aula 4 • Componentes e Padrões Adaptativos

Projeta componentes que mudam de estrutura, não apenas de tamanho, em diferentes breakpoints. Os alunos constroem navegação, cards e tabelas que se adaptam de forma inteligente.

Aula 1 • Design Tokens e Fundamentos de Estilo

Define design tokens como a camada atômica de um design system para cor, tipografia e espaçamento. Os alunos estruturam tokens para que propaguem alterações em todo o sistema de forma eficiente.

Aula 2 • Construindo uma Biblioteca de Componentes

Aborda a construção de botões, formulários, cards e componentes de navegação em uma ferramenta de design. Os alunos produzem uma biblioteca que as equipes podem consumir sem recriar elementos.

Aula 3 • Documentação do Design System

Ensina a redação de diretrizes de uso, exemplos de certo/errado e a justificativa para cada componente. Os alunos produzem documentação que permite a adoção consistente entre equipes.

Aula 4 • Arquitetura de Componentes

Ensina a metodologia de design atômico para construir componentes de átomos a organismos. Os alunos estruturam componentes para máximo reúso e mínima redundância.

Aula 1 • Princípios do Motion Design

Aplica princípios de animação como easing, antecipação e follow-through em contextos de UI. Os alunos distinguem movimento decorativo de movimento funcional que auxilia na compreensão.

Aula 2 • Interações Acionadas por Scroll e Paralaxe

Aborda animações acionadas por scroll e efeitos de paralaxe como ferramentas narrativas e de engajamento. Os alunos aplicam essas técnicas sem prejudicar performance ou acessibilidade.

Aula 3 • Design de Interação por Gestos e Toque

Projeta interações de swipe, pinça, arrastar e pressão longa para interfaces touch-first. Os alunos mapeiam gestos para a intenção do usuário e fornecem feedback visual claro.

Aula 4 • Design de Transições e Mudanças de Estado

Projeta transições entre páginas, painéis e estados de componentes para manter o contexto espacial. Os alunos coreografam mudanças de estado que parecem lógicas e contínuas.

Aula 1 • Métricas de Performance para Designers

Apresenta Core Web Vitals e performance percebida como métricas relevantes para o design. Os alunos conectam escolhas de design específicas a resultados mensuráveis de carregamento e interação.

Aula 2 • Performance de Animação e Interação

Ensina a projetar animações que rodam na thread do compositor para evitar travamentos. Os alunos escolhem propriedades CSS e temporização que mantêm 60 fps nos dispositivos alvo.

Aula 3 • Auditoria e Iteração de Performance

Usa ferramentas do navegador e serviços de auditoria online para medir e diagnosticar performance. Os alunos estabelecem um ciclo repetível de auditoria-correção-verificação para otimização contínua.

Aula 4 • Otimização de Imagens e Ativos

Aborda seleção de formato, compressão, carregamento preguiçoso e imagens responsivas para performance. Os alunos reduzem o peso dos ativos sem degradação visível da qualidade.