Curso de Web Design

Aula 1 • Visão Geral das Ferramentas Essenciais de Design

Inquérito às ferramentas standard da indústria para wireframing, prototipagem e criação de ativos. Os estudantes selecionam as ferramentas adequadas para cada fase do processo de design.

Aula 2 • Fluxo de Trabalho e Processo de Design

Apresenta as fases de descoberta, ideação, design e entrega. Estabelece um processo repetível que os estudantes aplicam ao longo do curso.

Aula 3 • Como a Web Funciona

Aborda navegadores, servidores, DNS e HTTP para explicar como as páginas são solicitadas e entregues. Fundamenta todas as decisões futuras de design na realidade técnica.

Aula 1 • Teoria da Cor para a Web

Ensina tonalidade, saturação, contraste e modelos de harmonia cromática. Os estudantes constroem paletas acessíveis que reforçam a identidade de marca e orientam a atenção do utilizador.

Aula 2 • Fundamentos de Tipografia

Aborda a classificação de tipos de letra, hierarquia e legibilidade em ecrãs. Os estudantes definem tipos que comunicam claramente em vários tamanhos de dispositivo.

Aula 3 • Layout e Composição

Aplica sistemas de grelha, alinhamento e espaço em branco para organizar o conteúdo da página. Os estudantes produzem layouts equilibrados e digitalizáveis usando regras de composição comprovadas.

Aula 4 • Imagens e Iconografia

Orienta a seleção, corte e estilo de fotografias, ilustrações e ícones. Os estudantes combinam os ativos visuais com o tom da marca e o contexto funcional.

Aula 1 • Texto, Links e Listas

Aborda parágrafos, elementos inline, tags de âncora e tipos de lista. Os estudantes marcam conteúdo de texto rico corretamente tanto para exibição como para tecnologia de assistência.

Aula 2 • Anatomia do Documento HTML

Explica os elementos doctype, head e body e as suas funções. Os estudantes escrevem documentos HTML válidos de raiz usando aninhamento e sintaxe corretos.

Aula 3 • Imagens, Media e Incorporações

Ensina os elementos img, figure, video, audio e iframe com os atributos adequados. Os estudantes incorporam media de forma acessível usando texto alternativo e legendas.

Aula 4 • Formulários e Elementos de Entrada

Constrói formulários acessíveis usando labels, fieldsets e tipos de entrada. Os estudantes criam formulários de contacto e de inserção de dados com a estrutura semântica correta.

Aula 1 • Sintaxe CSS e a Cascata

Explica seletores, propriedades, especificidade e herança. Os estudantes depuram conflitos de estilo compreendendo como a cascata resolve regras concorrentes.

Aula 2 • Modelo de Caixa e Espaçamento

Aborda margin, border, padding e dimensões do conteúdo. Os estudantes controlam o espaçamento com precisão e evitam bugs de layout comuns causados por mal-entendidos do modelo de caixa.

Aula 3 • CSS Grid para Layouts Bidimensionais

Apresenta faixas de grelha, áreas e posicionamento para layouts de página complexos. Os estudantes recriam designs de várias colunas usando Grid sem depender de floats.

Aula 4 • Flexbox para Layouts Unidimensionais

Ensina as propriedades do flex container e do flex item para disposições em linha e coluna. Os estudantes constroem barras de navegação, filas de cartões e layouts centralizados com Flexbox.

Aula 1 • Testar e Depurar a Responsividade

Usa ferramentas de programador do navegador e dispositivos reais para encontrar e corrigir problemas de layout. Os estudantes constroem uma lista de verificação de teste aplicada a cada projeto futuro.

Aula 2 • Grelhas Fluidas e Imagens Flexíveis

Converte layouts de pixéis fixos para unidades percentuais e fluidas. Os estudantes usam unidades relativas e max-width para evitar overflow em qualquer ecrã.

Aula 3 • Media Queries e Pontos de Quebra

Ensina queries de min-width e max-width e como escolher pontos de quebra. Os estudantes escrevem media queries que respondem às necessidades do conteúdo em vez de nomes de dispositivos.

Aula 4 • Estratégia de Design Mobile-First

Estabelece a filosofia mobile-first e os seus benefícios de desempenho. Os estudantes reestruturam designs existentes para começar a partir da viewport mais pequena e escalar para cima.

Aula 1 • Arquitetura de Informação

Aborda mapas do site, ordenação de cartões e etiquetagem de navegação para organizar o conteúdo de forma lógica. Os estudantes criam uma IA que reduz a carga cognitiva e apoia a localização.

Aula 2 • Wireframing e Prototipagem de Baixa Fidelidade

Produz esboços e wireframes digitais para explorar o layout antes do design visual. Os estudantes iteram rapidamente com base no feedback de colegas e partes interessadas.

Aula 3 • Personas do Utilizador e Mapas de Jornada

Constrói personas baseadas em evidências e mapeia as jornadas do utilizador para identificar pontos de dor. Os estudantes usam estes artefactos para justificar decisões de design ao longo de um projeto.

Aula 4 • Fundamentos de Teste de Usabilidade

Planifica e conduz testes de usabilidade moderados para validar decisões de design. Os estudantes analisam os resultados e priorizam correções usando classificações de gravidade.

Aula 1 • Manter e Escalar o Sistema

Aborda versionamento, fluxos de trabalho de contribuição e governação para sistemas de design em crescimento. Os estudantes estabelecem processos que mantêm o sistema consistente à medida que as equipas se expandem.

Aula 2 • Documentação e Entrega de Componentes

Escreve diretrizes de utilização, exemplos de «faça» e «não faça» e anotações de código para cada componente. Os estudantes preparam ficheiros de entrega que os programadores podem implementar sem ambiguidade.

Aula 3 • Padrões de Componentes Core de UI

Desenha botões, cartões, modais, alertas e controlos de formulário com padrões consistentes. Os estudantes documentam os estados dos componentes, incluindo predefinido, hover, foco e desativado.

Aula 4 • Design Tokens e Guias de Estilo

Cria tokens nomeados para cor, espaçamento e tipografia que orientam todo o sistema. Os estudantes produzem um guia de estilo que serve como a fonte única de verdade.

Aula 1 • Medição de Desempenho e Core Web Vitals

Usa ferramentas de auditoria de desempenho para medir carregamento, interatividade e estabilidade visual. Os estudantes interpretam as pontuações e priorizam correções que mais impactam a experiência do utilizador.

Aula 2 • Otimização de Imagens e Ativos

Comprime imagens, escolhe formatos modernos e carrega de forma preguiçosa ativos fora do ecrã. Os estudantes reduzem o peso da página sem perda visível de qualidade.

Aula 3 • Auditoria e Remediação de Acessibilidade

Executa auditorias automáticas e manuais em relação às diretrizes de acessibilidade de conteúdo web. Os estudantes corrigem problemas de contraste, navegação por teclado e ARIA encontrados nos seus projetos.

Aula 4 • Implantação e Lista de Verificação de Lançamento

Aborda opções de alojamento, configuração de domínio, SSL e verificações de qualidade pré-lançamento. Os estudantes completam uma lista de verificação de lançamento antes de publicar o seu projeto final.