Ficha 02 · Wireframe de landing page
- Criar wireframe de landing page
- Aplicar hierarquia visual
- Estruturar conteúdo
- Documentar comportamentos
Grupo I · Conceitos de wireframe (20 pontos)
1.1 Explica a diferença entre cada par de conceitos. (10 pts — 2.5 pts cada)
a) Low-fidelity vs High-fidelity wireframe:
b) User flow vs Task flow:
c) Componente vs Instância no Figma:
d) Handoff vs Entrega de ficheiro design:
1.2 Para cada elemento abaixo, indica se pertence a um wireframe low-fi ou high-fi. (10 pts)
| Elemento | Low-fi | High-fi |
|---|---|---|
| Caixa com X diagonal representando uma imagem | ||
| Botão com padding 12px 24px, border-radius 8px | ||
| Linhas paralelas representando texto | ||
| Fonte Inter 16px, weight 400, line-height 1.5 | ||
| Rectângulo com label "BOTÃO" em caps | ||
| Componente reutilizável com variante disabled | ||
| Grid de 12 colunas com gutter 24px | ||
| Anotação "tap abre modal" com linha a apontar |
Grupo II · Criar wireframe de landing page (80 pontos)
Contexto
A EcoPack é uma startup portuguesa que vende embalagens sustentáveis para pequenos negócios (pastelarias, coffee shops, mercearias bio). O produto é um pack de embalagens compostáveis personalizadas com o logo do negócio.
Dados para o wireframe: - Público-alvo: donos de pequenos negócios, 30-50 anos. - Proposta de valor: embalagens compostáveis personalizadas com entrega em 5 dias úteis. - Acção principal: pedir orçamento gratuito. - Acções secundárias: ver exemplos de embalagens, ver depoimentos de clientes. - Preocupação principal do target: preço e prazo de entrega.
2.1 Antes de criar o wireframe, define a estrutura de secções da landing page com justificação. (20 pts)
Lista as secções de cima para baixo, indicando o objectivo de cada uma e o que deve conter. Mínimo de 6 secções.
2.2 Cria o wireframe completo da landing page para desktop (1440px largura). Para cada secção identificada na alínea anterior, descreve detalhadamente o layout: número de colunas, posicionamento de elementos, tipo de conteúdo, tamanhos relativos e anotações de comportamento. (60 pts)