? Módulo 1 - Acessibilidade em produtos digitais
Princípios do Design Universal;
Diretrizes de acessibilidade WCAG;
Tecnologias assistivas para acessibilidade;
Conhecendo as limitações dos usuários;
Análise de casos de sucesso em acessibilidade de produtos digitais;
Adaptação de interfaces para diferentes tipos de deficiência;
Práticas de design e desenvolvimento acessíveis;
Ferramentas de validação de acessibilidade;
? Módulo 2 - Design de interfaces
O que é interface gráfica;
Tipos de interfaces gráficas;
Princípios da transformação de tarefas difíceis em tarefas simples;
Interfaces gráficas complexas e intuitivas;
Design centrado no usuário;
Ciclo iterativo no design de interfaces;
Usabilidade em interfaces digitais (Metas; Princípios; Avaliação Heurística); Arquitetura da informação (Navegação; Rotulação; Card sorting)
Teoria da cor no design de interfaces: Círculo cromático (análogas, complementares);
Temperatura da cor (quente e fria);
Contraste;
Psicodinâmica das cores;
Tipografia e hierarquia no design de interfaces Grid;
Design responsivo;
Componentes interativos no design de interfaces;
? Módulo 3 - Design System
Definição e importância;
UI Design; Propósito e Valores;
Princípios de Design;
Identidade da Marca;
Componentes, padrões e elementos;
Diretrizes e regras de uso;
Manutenção da identidade da marca;
Consistência visual;
Qualidade;
Otimização do trabalho;
Foco em UX;
Redução de custos;
Style Guide;
Atualização;
Colaboração;
Simplicidade;
Comunicação e Engajamento;
Centralização;
Objetivos e valores;
Diretrizes e instruções de uso;
Governança;
Documentação;
Criação de guias e tutoriais;
Ferramentas utilizadas;
Design Tokens e Atomic Design;
Planejamento e organização;
Pesquisa;
Integração de sistemas com Design System;
? Módulo 4 - FIGMA: Criação de componentes interativos
O que é Interação
Componentes
Criação de variantes
Auto layout
Variáveis
Opções de interação: hover, pressionar, click, arrastar, tocar, Tecla do teclado Smart animate
? Módulo 5 - FIGMA: Grid e Wireframe
Prototipação;
Grid;
Wireframe;
Design responsivo;
FIGMA;
? Módulo 6 - FIGMA: Principais ferramentas
Interface do figma:
Área de trabalho
Menu
Navegação
Frames
Camadas
Recursos
Páginas
Vetor e Bitmap
Ferramentas do figma:
Caneta
Formas
Texto
Imagem
Máscara
Mesclagem
Alinhamento
Componentes
Constraints
Ferramentas de interação
Plugins
Ferramentas de Gerenciamento:
Compartilhamento de projetos
Exportação de projetos
FIGJAM
? Módulo 7 - FIGMA: Prototipação de aplicativo
Projeto
Grid
Wireframe
Prototipação de telas para construção de um aplicativo completo.
Ferramentas do software de design (Figma): Frames, Camadas, Recursos , Páginas, Caneta, Formas , Texto, Imagem, Máscara, Mesclagem, Alinhamento, Componentes, Constraints, Ferramentas de interação, Exportação de projetos
? Módulo 8 - FIGMA: Prototipação de páginas web
Tipos de sites
Evolução da web (Web 1.0 , 2.0 , 3.0 e 4.0)
Design responsivo
Etapas e linguagens para desenvolvimento de sites
Grid e Wireframe
Prototipação de site
Ferramentas do software de design (Figma): Frames, Camadas, Recursos, Páginas, Caneta, Formas, Texto, Imagem, Máscara, Mesclagem, Alinhamento, Componentes, Constraints, Ferramentas de interação, Exportação de projetos
? Módulo 9 - Figma – Style Guide
Criar elementos básicos e alguns compontes no Figma que integram o Style Guide, como: Paleta de Cores, Tipografia, botões, switch, dropdown, entre outros.
Utilizar as funcionalidades básicas do Figma para criar e editar guias de estilo.
