Engenharia de Frontend • Design Thinking, Heurísticas, Figma, Design Systems, WCAG 2.2 e Métricas de UX

🏛️ Estrutura Curricular Canônica (20 Capítulos • 5 Blocos)

flowchart TD
    MOD03["Módulo 03: Design de Interfaces, UI/UX e Acessibilidade"]

    MOD03 --> B1["Bloco 1: Fundamentos de UX & Metodologias (Caps 01 a 04)"]
    MOD03 --> B2["Bloco 2: Arquitetura de Informação & Wireframes (Caps 05 a 08)"]
    MOD03 --> B3["Bloco 3: Design Visual, Cores, Tipografia & Grids (Caps 09 a 12)"]
    MOD03 --> B4["Bloco 4: Prototipagem Figma & Design Systems (Caps 13 a 16)"]
    MOD03 --> B5["Bloco 5: Acessibilidade, Testes & Métricas UX (Caps 17 a 20)"]

    style MOD03 fill:#263238,stroke:#eceff1,stroke-width:2px,color:#fff
    style B1 fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style B2 fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style B3 fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style B4 fill:#fce4ec,stroke:#e91e63,stroke-width:1.5px
    style B5 fill:#ede7f6,stroke:#673ab7,stroke-width:1.5px

🧱 Bloco 1: Fundamentos de UX & Metodologias Centradas no Usuário (Caps 01 a 04)

Cap Tópico Teórico Exercícios Exemplos Slides Quiz
01 📖 Fundamentos de UI/UX e Design Thinking 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
02 📖 Heurísticas de Nielsen e Leis de UX 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
03 📖 Pesquisa com Usuários e Personas 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
04 📖 Jornada do Usuário e Service Blueprint 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz

📐 Bloco 2: Arquitetura de Informação & Estruturação de Telas (Caps 05 a 08)

Cap Tópico Teórico Exercícios Exemplos Slides Quiz
05 📖 Arquitetura de Informação e Card Sorting 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
06 📖 User Flows, Sitemaps e Navegação 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
07 📖 Sketching e Wireframes de Baixa Fidelidade 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
08 📖 Wireframes de Média e Alta Fidelidade 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz

🎨 Bloco 3: Design Visual, Cores, Tipografia e Grids (Caps 09 a 12)

Cap Tópico Teórico Exercícios Exemplos Slides Quiz
09 📖 Teoria das Cores e Paletas Acessíveis 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
10 📖 Tipografia, Font Pairing e Escalas Modulares 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
11 📖 Grid Systems, 8pt Grid e Espaçamento Responsivo 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
12 📖 Iconografia, Microcópia e UX Writing 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz

⚡ Bloco 4: Prototipagem Avançada no Figma & Design Systems (Caps 13 a 16)

Cap Tópico Teórico Exercícios Exemplos Slides Quiz
13 📖 Prototipagem com Figma, Componentes e Variants 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
14 📖 Auto Layout e Design Responsivo no Figma 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
15 📖 Design Tokens e Sistemas de Estilos 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
16 📖 Design Systems Escaláveis e Atomic Design 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz

♿ Bloco 5: Acessibilidade Digital, Testes & Métricas de UX (Caps 17 a 20)

Cap Tópico Teórico Exercícios Exemplos Slides Quiz
17 📖 Acessibilidade Digital, Diretrizes WCAG 2.2 e ARIA 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
18 📖 Microinterações, Motion Design e Smart Animate 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
19 📖 Testes de Usabilidade e Pesquisa Avaliativa 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz
20 📖 Métricas de UX, Analytics de Produto e HEART Framework 🧩 Exercícios 💻 Exemplos 📊 Slides 🧠 Quiz

🚀 Próxima Etapa da Formação: Concluído este módulo, prossiga na sua jornada de formação avançando para o Módulo 04: HTML5 e CSS3 Moderno.

🏠 Voltar ao Início do Portal 📚 Ver Índice Geral Próximo Módulo ➡️