Curso de Web Design

Aula 1 • Visão Geral das Tecnologias Web Centrais

Apresenta o HTML, CSS e JavaScript como os três pilares da produção web. Clarifica o papel de cada tecnologia para que os designers compreendam o que estão a moldar.

Aula 2 • Configuração de um Espaço de Trabalho de Design

Orienta os alunos na seleção de ferramentas, organização de ficheiros e configuração de navegadores para trabalho de design. Garante um ambiente produtivo antes de qualquer projeto começar.

Aula 3 • Como a Web Funciona

Aborda a arquitetura cliente-servidor, os pedidos HTTP e os pipelines de renderização do navegador. Estabelece o contexto técnico no 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 no Ecrã

Aborda a seleção de tipos de letra, escala, comprimento de linha e espaçamento para legibilidade digital. Os alunos estabelecem sistemas tipográficos que funcionam em vários tamanhos de dispositivos.

Aula 3 • Layout, Grelha e Espaçamento

Introduz sistemas de grelha, espaço em branco e alinhamento como ferramentas para ordem visual. Os alunos concebem layouts estruturados que guiam o olhar de forma previsível.

Aula 4 • Hierarquia Visual e Ênfase

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

Aula 1 • Personas do Utilizador e Mapas de Jornada

Ensina a construção de personas a partir de dados de pesquisa e a mapear jornadas do utilizador do início ao fim. Os alunos usam estes artefactos para alinhar as equipas em torno dos objetivos do utilizador.

Aula 2 • Arquitetura de Informação

Aborda a 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 utilizadores encontrem o que precisam com o mínimo esforço.

Aula 3 • Fundamentos de Acessibilidade

Introduz critérios de design percetível, operável, compreensível e robusto. Os alunos auditam designs com base nas diretrizes de acessibilidade e corrigem falhas comuns.

Aula 4 • Métodos de Pesquisa em UX

Introduz entrevistas, inquéritos e observação como ferramentas de pesquisa primárias. Os alunos recolhem dados qualitativos e quantitativos para informar a direção do design.

Aula 1 • Prototipagem de Alta Fidelidade

Aplica design visual a wireframes e liga ecrãs em protótipos clicáveis. Os alunos produzem artefactos suficientemente próximos do produto final para testes de usabilidade significativos.

Aula 2 • Wireframing de Baixa Fidelidade

Constrói wireframes a preto e branco que definem a estrutura sem estilização visual. Os alunos focam-se na lógica do layout e na colocação do conteúdo antes da estética.

Aula 3 • Testes de Usabilidade em Protótipos

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

Aula 4 • Noções Básicas de Design de Interação

Introduz estados, transições e micro-interações como ferramentas de comunicação. Os alunos concebem ciclos de feedback que tornam as interfaces responsivas e intuitivas.

Aula 1 • Grelhas Fluidas e Layouts Flexíveis

Ensina grelhas baseadas em percentagens e contentores flexíveis que se reajustam em diferentes larguras. Os alunos constroem layouts que se adaptam sem quebrar em tamanhos intermédios.

Aula 2 • Breakpoints e Media Queries

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

Aula 3 • Tipografia e Espaçamento Responsivos

Escala o tipo de letra e o espaçamento proporcionalmente entre breakpoints para uma legibilidade consistente. Os alunos usam técnicas de tipo fluido para eliminar saltos de tamanho bruscos.

Aula 4 • Componentes e Padrões Adaptativos

Concebe componentes que mudam de estrutura, e não apenas de tamanho, em diferentes breakpoints. Os alunos constroem navegação, cartões 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 sistema de design para cor, tipo e espaçamento. Os alunos estruturam tokens para que propaguem alterações a todo o sistema de forma eficiente.

Aula 2 • Construir uma Biblioteca de Componentes

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

Aula 3 • Documentação do Sistema de Design

Ensina a redigir diretrizes de utilização, exemplos de sim/não e a fundamentação para cada componente. Os alunos produzem documentação que permite uma adoção consistente entre equipas.

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áxima reutilização e redundância mínima.

Aula 1 • Princípios do Design de Movimento

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

Aula 2 • Interações de Scroll e Parallax

Aborda animações acionadas por scroll e efeitos de parallax como ferramentas narrativas e de envolvimento. Os alunos aplicam estas técnicas sem prejudicar o desempenho ou a acessibilidade.

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

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

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

Concebe 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 Desempenho para Designers

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

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

Ensina a conceber animações que são executadas no thread do compositor para evitar jank. Os alunos escolhem propriedades CSS e temporizações que mantêm 60 fps nos dispositivos alvo.

Aula 3 • Auditoria e Iteração de Desempenho

Usa ferramentas do navegador e serviços de auditoria em linha para medir e diagnosticar o desempenho. Os alunos estabelecem um ciclo repetível de auditar-corrigir-verificar para otimização contínua.

Aula 4 • Otimização de Imagens e Ativos

Aborda a seleção de formato, compressão, lazy loading e imagens responsivas para desempenho. Os alunos reduzem a carga útil de ativos sem degradação visível da qualidade.