Mini-Projecto · Layout multimédia interativo (Figma → Handoff)
Contexto
Cada par/trio desenha em Figma um app interativo de 1 produto (ex.: app de transportes, app de pedidos num café, app de visita a museu, app de eventos da escola, app de portfolio interativo). Foco em sistema de design, estados, fluxo e handoff — não em código. Entrega: ficheiro Figma navegável + dossier de handoff. Liga à UC02634 (implementação web) e a unidades de programação noutros cursos.
Requisitos
Funcionais
- Briefing + persona + 1 user journey principal.
- Sistema de design: tokens (cor, espaço, tipo, raio), 4+ componentes (botão, input, card, navbar/tab bar), com variantes e estados.
- 5+ ecrãs desenhados (mín.: home, lista, detalhe, formulário, confirmação).
- 5 estados de ecrã num dos ecrãs-lista: vazio, loading, erro, sucesso, dados.
- Protótipo navegável — fluxo principal clicável + 1 microinteração (toast, transição, badge).
- Light/dark mode (via Figma Variables com modes).
- Responsivo — versão mobile (mín.) + uma adaptação (tablet/desktop).
Não-funcionais
- Acessibilidade: contraste ≥ 4.5:1, focus visível, alvos ≥ 44 px.
- Modo Dev ativo para handoff (tokens + medidas extraíveis).
- Dossier de handoff (1-2 páginas) descrevendo a arquitectura do ficheiro e decisões.
Fases
Fase 1 · 1h
Briefing + persona + journey
- Definir produto, público, problema; persona; user journey principal.
Briefing + persona + journey (1 página).
Fase 2 · 1.5h
Sistema de design
- Tokens (Variables); tipografia; grelha; 4 componentes base com variantes.
Página "Design system" no Figma.
Fase 3 · 2.5h
Ecrãs principais
- 5+ ecrãs em mobile com componentes do sistema; conteúdo real.
Ecrãs estáticos.
Fase 4 · 1.5h
Estados + light/dark
- 5 estados num ecrã-lista; variants de modo light/dark.
Estados desenhados + modo escuro.
Fase 5 · 1.5h
Protótipo + microinteração
- Ligar fluxo principal; 1 microinteração (toast/smart animate).
Protótipo navegável.
Fase 6 · 1h
Responsivo + a11y
- Adaptação tablet/desktop de 1-2 ecrãs; auditoria de contraste/foco.
Versão responsiva + checklist a11y.
Fase 7 · 1h
Handoff + defesa
- Modo Dev; dossier; apresentação 5 min.
Dossier de handoff + demo do protótipo.
Critérios de avaliação
| Item | Peso |
|---|---|
| Briefing + persona + journey | 10% |
| Sistema de design (tokens + componentes/variantes) | 25% |
| Ecrãs + conteúdo real | 15% |
| 5 estados de ecrã | 10% |
| Protótipo navegável + microinteração | 15% |
| Light/dark + responsivo | 10% |
| Acessibilidade | 5% |
| Handoff (Modo Dev + dossier) | 10% |
Reflexão
Em meia página: que decisão do sistema de design poupou mais trabalho ao implementar variantes? Qual foi o estado de ecrã mais esquecido na 1ª iteração? Que decisão tomarias diferente para um app de TV ou kiosk em vez de mobile?