Projecto · Wireframes completos para produto digital
Contexto
Cada formando (ou par) cria os wireframes completos de um produto digital à escolha. O projecto simula o trabalho de um UX designer que recebe um brief de produto e entrega um conjunto de wireframes prontos para aprovação e posterior desenvolvimento.
Opções de produto: 1. App mobile — para um caso de uso específico (receitas, fitness, agenda de serviços, marketplace local). 2. Website / web app — e-commerce, plataforma de conteúdo, ferramenta SaaS. 3. Dashboard — painel de gestão para um negócio fictício.
Requisitos do projecto
Entregáveis no Figma
-
Sitemap: hierarquia de todos os ecrãs/páginas do produto.
-
User flow principal: percurso completo da tarefa mais importante do produto (happy path + 2 edge cases).
-
Wireframes low-fi: mínimo 5 ecrãs — em papel ou ferramenta digital simples — dos 5 ecrãs chave.
-
Wireframes high-fi no Figma:
- Mínimo 5 ecrãs chave.
- Dimensões correctas (390×844px para mobile; 1440×900px para desktop).
- Componentes reutilizáveis (mínimo: botão primário/secundário, input, card).
- Auto Layout nos componentes principais.
- Grid de layout aplicado.
-
Anotações de comportamento nos ecrãs mais complexos.
-
Assets exportados:
- Mínimo 5 assets (ícones, logo, imagens placeholder).
- Formatos correctos (SVG para ícones, PNG @2x para imagens).
Entregáveis documentais
- Relatório de produto (1 página):
- Descrição do produto e público-alvo.
- Decisões de UX mais importantes (com justificação).
- O que farias diferente com mais tempo.
Fases do projecto
Fase 1 · 1.5h
Brief e arquitectura
- Escolher o produto e o público-alvo.
- Definir a acção principal e as 5 acções secundárias.
- Criar o sitemap.
- Criar o user flow principal com happy path e edge cases.
Sitemap + user flow (Figma ou papel digitalizado).
Fase 2 · 2h
Wireframes low-fi
- Identificar os 5 ecrãs chave.
- Esboçar 3 variações do ecrã mais complexo (Crazy 8s ou 3 opções).
- Seleccionar e detalhar os 5 ecrãs em esboço.
- Digitalizar.
Wireframes low-fi dos 5 ecrãs (foto ou digital).
Fase 3 · 4h
Wireframes high-fi em Figma
- Criar os componentes fundamentais.
- Criar os 5 ecrãs high-fi com componentes, grids, auto layout.
- Adicionar anotações nos ecrãs mais complexos.
Ficheiro Figma com 5 ecrãs high-fi + componentes.
Fase 4 · 1.5h
Assets e relatório
- Exportar os 5+ assets em formatos correctos.
- Redigir relatório de produto.
- Verificar que o Figma está organizado e partilhável.
Pasta de assets + relatório + link Figma partilhável.
Fase 5 · 1h
Apresentação
- Apresentar o produto: o problema que resolve, o público, o fluxo principal.
- Mostrar os wireframes low-fi e o processo de iteração.
- Mostrar os wireframes high-fi no Figma.
- Justificar as decisões de UX mais importantes.
Apresentação oral de 5-8 minutos + Q&A.
Critérios de avaliação
| Critério | Peso |
|---|---|
| Sitemap e user flow (completude, edge cases) | 15% |
| Wireframes low-fi (exploração, anotações) | 15% |
| Wireframes high-fi (qualidade Figma, componentes, auto layout) | 35% |
| UX correcta (touch targets, hierarquia, fluxo lógico) | 20% |
| Assets exportados e relatório | 10% |
| Apresentação oral | (bónus/penalização) |