Projecto · Redesenho mobile-first de interface
Contexto
Cada formando selecciona uma interface existente (app, website mobile) ou cria uma fictícia, e realiza um redesenho mobile-first completo. O projecto simula o trabalho de um designer/developer que recebe uma interface desktop e precisa de a adaptar ou redesenhar para mobile.
Opções: 1. Redesenho de interface real: escolher um website público com má experiência mobile (ex: website de câmara municipal, escola, restaurante local) e redesenhá-lo. 2. Interface fictícia: criar do zero uma app simples (máx 5 ecrãs) para um caso de uso à escolha.
Requisitos do projecto
Entregáveis
- Análise da interface original (se redesenho):
- Screenshot da versão actual em mobile.
- Lista de 5+ problemas de UX mobile identificados.
-
Justificação de cada problema com referência a boas práticas.
-
Wireframes low-fi (esboços):
- Mínimo 3 ecrãs principais.
- Desenhados à mão ou com ferramenta digital.
-
Anotações de comportamento (scroll, tap, gestos).
-
Wireframes high-fi (digitais):
- Mínimo 3 ecrãs em Figma ou Canva.
- Dimensões correctas (375×812px base).
- Touch targets de 44-48px.
-
Thumb zone considerada (elementos críticos na zona verde).
-
Assets exportados:
- Ícones/assets em SVG ou PNG @2x.
-
Pelo menos 5 assets exportados correctamente.
-
Relatório técnico (1-2 páginas):
- Análise de thumb zone (screenshot do wireframe com overlay das zonas).
- Decisões de design justificadas (porquê cada elemento está onde está).
- Especificações de performance (tamanho de imagens, lazy loading, etc.).
Fases do projecto
Fase 1 · 1.5h
Análise e problema
- Escolher a interface (real ou fictícia).
- Se real: capturar screenshots em mobile, listar problemas.
- Definir os 3 ecrãs principais a redesenhar.
- Identificar a acção principal de cada ecrã.
Análise com screenshots + lista de problemas + definição dos 3 ecrãs.
Fase 2 · 2h
Wireframes low-fi
- Esboçar os 3 ecrãs em papel ou ferramenta digital simples.
- Marcar a thumb zone e verificar que acções críticas estão na zona verde.
- Anotar comportamentos (scroll, tap, gestos).
Wireframes low-fi dos 3 ecrãs (foto ou digital).
Fase 3 · 3h
Wireframes high-fi
- Criar wireframes digitais em Figma (ou Canva).
- Dimensões: 375×812px (ou equivalente).
- Aplicar touch targets correctos, hierarquia visual, thumb zone.
Wireframes high-fi em Figma/Canva (link partilhável ou export PDF).
Fase 4 · 2h
Assets e relatório
- Exportar 5+ assets (ícones, imagens) em formatos correctos.
- Redigir relatório com análise de thumb zone e decisões de design.
Pasta de assets exportados + relatório técnico.
Fase 5 · 1.5h
Apresentação
- Apresentar a comparação antes/depois (se redesenho) ou o fluxo da nova interface.
- Justificar as principais decisões de design.
Apresentação oral de 5-8 minutos.
Critérios de avaliação
| Critério | Peso |
|---|---|
| Qualidade da análise (problemas identificados, fundamentação) | 15% |
| Wireframes low-fi (completude, anotações de comportamento) | 15% |
| Wireframes high-fi (qualidade visual, specs correctas) | 30% |
| Aplicação de thumb zone e touch targets | 20% |
| Assets exportados correctamente | 10% |
| Relatório e apresentação oral | 10% |