Resultados de aprendizagem

1. Distinguir UX de UI.
2. Desenhar wireframes e mockups.
3. Aplicar design responsivo e sistemas de design.
4. Prototipar e testar (Figma).

UX e UI

Boa UI sobre má UX = aplicação bonita que ninguém percebe.

Processo (Design Thinking)

Empatizar → Definir → Idear → Prototipar → Testar

Iterativo: testar cedo, falhar barato, melhorar.

Conhecer o utilizador

• Personas — utilizador-tipo (objetivos, contexto).
• User journey — passos para cumprir uma tarefa.
• User stories — "como [X] quero [Y] para [Z]".
• Análise de concorrência e referências.

Arquitetura de informação

• Sitemap — mapa das páginas.
• Card sorting — organizar conteúdo como o utilizador pensa.
• Navegação — clara, consistente, ≤ 3 cliques para o essencial.
• Hierarquia de conteúdo por página.

Níveis de fidelidade

Baixa → alta fidelidade. Não pular para o visual cedo demais.

Wireframe

• Foco em layout e conteúdo, não estética.
• Caixas, placeholders, hierarquia.
• Rápido de mudar → testar estrutura cedo.
• Mobile-first (desenhar primeiro o pequeno).

Design responsivo

• Mobile-first — começar pelo ecrã pequeno.
• Breakpoints — mobile / tablet / desktop.
• Grelha fluida, imagens flexíveis.
• Toque — alvos ≥ 44-48 px; sem hover essencial.
• Conteúdo prioritário primeiro.

Sistema de design

• Tokens — cores, espaçamentos, tipografia (reutilizáveis).
• Componentes — botões, cards, inputs (estados: normal/hover/foco/erro/desativado).
• Padrões — navegação, formulários, feedback.
• Consistência + rapidez + manutenção.

Figma (essencial)

• Frames (ecrãs), componentes + variantes.
• Auto Layout — layouts flexíveis/responsivos.
• Estilos partilhados (cor/texto).
• Prototype — ligar ecrãs, transições.
• Partilha/comentários (handoff para dev).

Teste de usabilidade

• Dar tarefas reais a 3-5 utilizadores.
• Observar (não ajudar); onde hesitam/erram?
• Métricas: sucesso, tempo, erros, satisfação.
• Iterar. "Testar com 5 pessoas encontra ~85% dos problemas."

Acessibilidade (UI)

• Contraste ≥ 4.5:1; foco visível.
• Navegável por teclado; alvos grandes.
• Texto redimensionável; não só cor.
• Labels claras; mensagens de erro úteis.