aulify · Mini-Projecto
UC UC02286 · T. Multimédia
Versão · Aluno
Mini-Projecto · UI de app mobile
5 ecrãs + design system básico em Figma
Contexto
Cada aluno (ou par) concebe, no Figma, a UI completa de 5 ecrãs de uma app mobile, sustentada por um design system básico. O objectivo é demonstrar domínio de princípios de UI mobile, componentes, layout, tipografia/cor e handoff.
Tema
Escolher uma app com sentido (ex: hábitos, finanças pessoais, transportes, receitas, eventos locais, treino). Definir plataforma alvo (iOS ou Android) e respeitar as respectivas guidelines.
Requisitos
Funcionais
- 5 ecrãs coerentes que formem um fluxo (ex: onboarding/login → home → lista → detalhe → criar/perfil).
- Navegação correcta (tab bar ou drawer + transições lógicas).
- Design system básico: tokens de cor (light + dark), escala tipográfica, e pelo menos 3 componentes com variantes/estados.
- Layout alinhado à grelha de 8pt com safe areas respeitadas.
- Estados desenhados: pelo menos um empty state, um loading e um error/validação.
Não-funcionais
- Acessibilidade: contraste WCAG AA, alvos de toque ≥ 44 pt.
- Handoff: ficheiro organizado, camadas nomeadas, componentes em biblioteca.
Fases
| Fase | Tempo | Entregável |
|---|---|---|
| 1. Conceito + fluxo | 1.5h | Tema, user, mapa dos 5 ecrãs |
| 2. Fundações (tokens + tipografia) | 1.5h | Paleta light/dark + escala |
| 3. Componentes | 2h | 3+ componentes com variantes/estados |
| 4. Ecrãs (5) | 3h | 5 ecrãs montados na grelha |
| 5. Estados + dark mode | 1h | Empty/loading/error + variante escura |
| 6. Handoff + apresentação | 1h | Ficheiro organizado + demo |
Critérios
| Item | Peso |
|---|---|
| Conceito e coerência do fluxo | 10% |
| Design system (tokens + tipografia) | 20% |
| Componentes com variantes/estados | 20% |
| Layout, grelha 8pt e safe areas | 15% |
| Tipografia, cor e dark mode | 15% |
| Acessibilidade (contraste, toque) | 10% |
| Organização e handoff | 10% |
Reflexão
Em meia página: que decisão de design foi mais difícil? Onde tiveste de cortar campos/elementos para simplificar? Como o design system acelerou (ou não) a montagem dos ecrãs?