Curso de UI Designer

Aula 1 • Princípios da Gestalt em UI

Aplica a psicologia da Gestalt — figura-fundo, fecho, continuidade — a decisões de layout de interface. Os estudantes aprendem a prever como os utilizadores percecionam elementos agrupados.

Aula 2 • Fundamentos de Tipografia

Apresenta a classificação de tipos de letra, a escala tipográfica e as regras de legibilidade para ecrãs digitais. Os estudantes aplicam estas regras para criar layouts de texto legíveis e hierárquicos.

Aula 3 • Princípios Essenciais de Design Visual

Aborda contraste, alinhamento, repetição e proximidade como as regras estruturais da composição visual. Estes princípios sustentam todas as decisões de layout nos capítulos seguintes.

Aula 4 • Teoria da Cor para Interfaces

Ensina matiz, saturação, valor e relações cromáticas aplicadas ao design para ecrã. Os estudantes constroem paletas que comunicam significado e apoiam a usabilidade.

Aula 1 • Edição de Formas Vetoriais e Trajetos

Ensina curvas de Bézier, operações booleanas e utilização da ferramenta caneta para criar formas UI precisas. Estas competências permitem o trabalho personalizado com ícones e ilustrações em capítulos posteriores.

Aula 2 • Layout Automático e Restrições

Aborda regras de layout automático e restrições responsivas para criar elementos UI adaptáveis. Os estudantes produzem molduras que redimensionam corretamente em múltiplos tamanhos de ecrã.

Aula 3 • Noções Básicas de Exportação e Entrega

Explica formatos de exportação, definições de resolução e anotações de entrega para programadores. Uma entrega adequada reduz falhas de comunicação entre designers e engenheiros.

Aula 4 • Trabalhar com Componentes

Apresenta componentes reutilizáveis, instâncias e substituições para construir sistemas de design escaláveis. O domínio de componentes é pré-requisito para o trabalho com sistemas de design no Capítulo 5.

Aula 1 • Escalas de Espaçamento e Dimensionamento

Apresenta sistemas de espaçamento de 4pt e 8pt e escalas de dimensionamento proporcionais para uma densidade de UI consistente. O espaçamento sistemático reduz o ruído visual e acelera as decisões de design.

Aula 2 • Anatomia e Configuração da Grelha

Define colunas, calhas, margens e grelhas de base e mostra como configurá-los em ferramentas de design. Uma base de grelha sólida garante consistência visual em todos os ecrãs.

Aula 3 • Padrões de Layout para Ecrãs Comuns

Examina padrões de layout para dashboards, listas, cartões e formulários com exemplos de aplicação real. O reconhecimento de padrões acelera as decisões de design nos capítulos de projeto aplicado.

Aula 4 • Estratégias de Layout Responsivo

Aborda grelhas fluidas, pontos de interrupção fixos e padrões de layout adaptativo para telemóvel, tablet e computador. Os estudantes desenham uma única UI em três pontos de interrupção como exercício prático.

Aula 1 • Componentes de Navegação

Constrói barras de navegação superiores, gavetas laterais, separadores e breadcrumbs para orientação entre ecrãs. Os padrões de navegação são aplicados diretamente no projeto multi-ecrã do Capítulo 7.

Aula 2 • Elementos de Formulário e Entradas

Desenha campos de texto, dropdowns, caixas de verificação, botões de opção e interruptores com cobertura total de estados. A usabilidade do formulário impacta diretamente as taxas de conclusão de tarefas em produtos reais.

Aula 3 • Componentes de Apresentação de Dados

Aborda tabelas, badges, etiquetas, avatares e indicadores de progresso para apresentar informação estruturada. Os componentes de apresentação de dados são essenciais para o trabalho de UI em dashboards e analytics.

Aula 4 • Componentes de Feedback e Sobreposição

Desenha modais, toasts, tooltips e indicadores de carregamento que comunicam o estado do sistema. Os componentes de feedback fecham o ciclo entre a ação do utilizador e a resposta do sistema.

Aula 1 • Arquitetura do Sistema de Design

Explica o modelo de design atómico — átomos, moléculas, organismos — e como estrutura uma biblioteca de componentes. Compreender a arquitetura previne duplicação e inconsistência à escala.

Aula 2 • Governança do Sistema de Design

Estabelece modelos de contribuição, versionamento e fluxos de trabalho de descontinuação para manter um sistema vivo. A governança previne a deriva do design à medida que as equipas e produtos crescem ao longo do tempo.

Aula 3 • Documentar Componentes

Aborda diretrizes de utilização, exemplos de 'fazer' e 'não fazer', e documentação de props para cada componente. A documentação clara impulsiona a adoção consistente por designers e programadores.

Aula 4 • Aprofundamento em Tokens de Design

Define tokens de cor, tipografia, espaçamento e elevação e mostra como ligam o design ao código. Os tokens permitem atualizações de fonte única de verdade em todas as plataformas.

Aula 1 • Construir Protótipos de Clique

Liga molduras com hotspots, sobreposições e comportamentos de scroll para simular fluxos de navegação. Os protótipos de clique são o artefacto principal para testes de usabilidade no Capítulo 7.

Aula 2 • Técnicas Avançadas de Prototipagem

Utiliza variáveis, condicionais e interações de componentes para prototipar comportamentos dinâmicos e com estado. Os protótipos avançados reduzem a ambiguidade na entrega a programadores para funcionalidades complexas.

Aula 3 • Design de Micro-Interações

Desenha ciclos de acionamento-feedback para estados de hover, pressionamentos de botão, interruptores e validação de formulários. As micro-interações aumentam a qualidade percebida e orientam a atenção do utilizador eficazmente.

Aula 4 • Princípios de Movimento e Animação

Aplica curvas de easing, diretrizes de duração e coreografia a transições de UI e mudanças de ecrã. O movimento comunica hierarquia e continuidade entre estados da interface.

Aula 1 • Acessibilidade de Cor e Contraste

Aborda requisitos de rácio de contraste, paletas seguras para daltonismo e design de informação não dependente de cor. Os estudantes testam e corrigem falhas de contraste na sua biblioteca de componentes existente.

Aula 2 • Padrões de Componentes Acessíveis

Aplica funções ARIA, etiquetas e regiões ativas a modais, formulários e componentes de conteúdo dinâmico. Os estudantes atualizam a sua biblioteca de componentes com anotações de acessibilidade para programadores.

Aula 3 • Acesso por Foco, Teclado e Toque

Desenha indicadores de foco visíveis, ordem de tabulação lógica e tamanhos de alvo de toque adequados para todos os métodos de entrada. Estes elementos garantem a operacionalidade para utilizadores com deficiências motoras e de teclado.

Aula 4 • Tipografia e Legibilidade

Aplica regras de tamanho mínimo de fonte, espaçamento de linhas e redimensionamento de texto para garantir interfaces legíveis. A tipografia legível reduz a carga cognitiva para utilizadores com diferenças visuais ou cognitivas.

Aula 1 • Design de Ecrã de Alta Fidelidade

Aplica o sistema de design, tipografia, cor e componentes para produzir ecrãs polidos e prontos para produção. Os ecrãs de alta fidelidade são o principal entregável revisto pelas partes interessadas.

Aula 2 • Arquitetura de Informação e Fluxos

Cria mapas do site, fluxos do utilizador e fluxos de tarefas para definir a estrutura de navegação antes do design visual começar. Uma IA sólida previne revisões estruturais dispendiosas durante o design de alta fidelidade.

Aula 3 • Prototipar, Testar e Iterar

Constrói um protótipo navegável, conduz um teste de usabilidade moderado e itera com base nos resultados. Esta secção fecha o ciclo de design e demonstra tomada de decisão baseada em evidências.

Aula 4 • Briefing do Projeto e Descoberta

Analisa um briefing de produto realista, define o âmbito e identifica objetivos do utilizador e restrições do negócio. Os resultados da descoberta moldam diretamente a arquitetura de informação e o fluxo na secção seguinte.

Aula 5 • Entrega e Apresentação do Case Study

Prepara especificações prontas para programadores, um documento de redline e uma narrativa estruturada de case study para portfólio. Um case study convincente é a principal ferramenta para conseguir um cargo de design de UI.