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:
Low-fi: esboços rápidos e esquemáticos, sem tipografia real nem cores. Usados para explorar e iterar na estrutura. Rápidos (5-20 min por ecrã). Placeholders de texto e imagem.
High-fi: wireframes detalhados com tipografia definida, espaçamento preciso e componentes reais. Mais próximos do produto final. Usados após validação da estrutura, para aprovação e handoff.
b) User flow vs Task flow:
User flow: percurso completo de um utilizador desde a entrada no produto até ao objectivo. Inclui todos os pontos de decisão, ramificações e edge cases.
Task flow: percurso de uma tarefa específica e bem definida. Mais focado, geralmente linear. Não inclui como o utilizador chegou ao início da tarefa.
c) Componente vs Instância no Figma:
Componente (master): o elemento original, criado com Ctrl+Alt+K. Alterações nele propagam-se para todas as instâncias. Identificado com um ícone de quadrado sólido na layer.
Instância: cópia do componente usada no design. Herda as propriedades do master mas pode ter overrides locais (texto diferente, ícone diferente). Identificado com ícone de losango na layer.
d) Handoff vs Entrega de ficheiro design:
Entrega de ficheiro design: simplesmente dar ao developer acesso ao ficheiro Figma.
Handoff (entrega técnica completa): processo estruturado que inclui: ficheiro Figma organizado, anotações de comportamento, assets exportados, documentação de estados interactivos, e especificações de todos os elementos via Figma Inspect. O handoff garante que o developer tem tudo o que precisa sem precisar de perguntar ao designer.
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 |
| Elemento | Low-fi | High-fi |
|---|---|---|
| Caixa com X diagonal | ✓ | |
| Botão com padding 12px 24px, border-radius 8px | ✓ | |
| Linhas paralelas para texto | ✓ | |
| Fonte Inter 16px, weight 400 | ✓ | |
| Rectângulo com label "BOTÃO" | ✓ | |
| Componente com variante disabled | ✓ | |
| Grid 12 colunas | ✓ (embora grids possam aparecer em ambos) | |
| Anotação de comportamento | ✓ | ✓ (em ambos) |
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.
Estrutura da landing page EcoPack:
-
Hero (Abertura) — capturar atenção e comunicar a proposta de valor em 5 segundos. Contém: headline principal, sub-headline com proposta de valor clara, imagem de produto impactante, CTA primário ("Pedir orçamento grátis").
-
Social proof imediato (números/logos) — reduzir o ceticismo inicial com credibilidade rápida. Contém: "Já confiaram em nós: X negócios em Portugal" + logos de 3-5 clientes conhecidos (ou depoimento breve se não houver logos).
-
O problema + solução — criar identificação com o problema que o produto resolve. Contém: "As embalagens de plástico custam-te clientes" → "A EcoPack resolve isso" + lista de 3 benefícios chave.
-
Galeria de produtos — mostrar o que se pode comprar (reduzir abstracção). Contém: grid de 3-4 tipos de embalagem com nome, material e preço indicativo. Tap/click abre detalhe.
-
Como funciona — eliminar a fricção do processo (o target não sabe como encomendar). Contém: processo em 3 passos (1. Pede orçamento → 2. Escolhe embalagens → 3. Recebe em 5 dias).
-
Depoimentos de clientes — prova social de pares (outros donos de pequenos negócios). Contém: 3 depoimentos com foto, nome, nome do negócio, e citação sobre o benefício principal.
-
FAQ — eliminar objecções comuns (preço, mínimo de encomenda, personalização, prazo). Contém: 4-5 perguntas mais frequentes em formato accordion.
-
CTA final — capturar quem chegou ao fim da página sem converter. Contém: headline de urgência/escassez ou reforço do benefício + CTA "Pedir orçamento grátis" + nota de confiança ("Resposta em 24h · Sem compromisso").
-
Footer — navegação e informação legal. Contém: logo, links de navegação, redes sociais, contacto, política de privacidade.
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)
Wireframe EcoPack Landing Page — Desktop 1440px Grid: 12 colunas, margin 80px, gutter 24px
SECÇÃO 1 — HERO (height: 600px)
Layout: 2 colunas (cols 1-6 / cols 7-12)
Coluna esquerda (cols 1-6): - Badge: "🌿 Entrega em 5 dias úteis" — pill, 14px - H1: "Embalagens sustentáveis para o teu negócio" — 52px bold, max-width 520px - Body: "Personalizadas com o teu logo. Compostáveis. Entregues em 5 dias úteis em Portugal." — 18px, 2 linhas - Botão CTA primário: "Pedir orçamento grátis →" — 52px height, full width da coluna - Note: "✓ Sem compromisso · ✓ Resposta em 24h" — 14px, abaixo do botão
Coluna direita (cols 7-12): - [imagem de produto: embalagens empilhadas com logo de café impresso] — aspect-ratio 1.1, border-radius 12px
SECÇÃO 2 — SOCIAL PROOF (height: 100px, fundo cinza claro)
Layout: 1 linha centrada - "Mais de 500 negócios já escolheram a EcoPack" — 16px, centrado - Row de logos: [Logo 1] [Logo 2] [Logo 3] [Logo 4] [Logo 5] — escala de cinza, espaçados igualmente
SECÇÃO 3 — PROBLEMA + SOLUÇÃO (height: 400px)
Layout: 2 colunas iguais - Col esquerda: "O problema com embalagens de plástico" — H2 + 3 bullets de dores (custo, imagem, legislação) - Col direita: "A EcoPack resolve isso" — H2 verde + 3 bullets de benefícios com ícone ✓
SECÇÃO 4 — GALERIA DE PRODUTOS (height: 500px)
Layout: grid 4 colunas, 2 filas - Cada card: [Imagem produto — aspect 1:1] / Nome produto / Material / Preço a partir de X€ - "Ver catálogo completo →" — link centrado no fundo
Anotação: "hover no card: sombra + escala 1.02 / tap: abre modal com detalhe"
SECÇÃO 5 — COMO FUNCIONA (height: 300px, fundo suave)
Layout: 3 colunas iguais, centrado - Cada coluna: [Número grande decorativo] + [Título passo] + [Descrição breve, 2 linhas] - Passo 1: "Pede orçamento" / Passo 2: "Confirma a encomenda" / Passo 3: "Recebe em 5 dias" - Setas separando cada passo
SECÇÃO 6 — DEPOIMENTOS (height: 350px)
Layout: 3 colunas iguais - Cada card: [foto cliente 56×56px, círculo] + Nome + "Dono de [nome negócio]" + citação entre aspas (3-4 linhas) + Rating ★★★★★
SECÇÃO 7 — FAQ (height: variável)
Layout: 1 coluna, max-width 760px, centrado - H2 centrado: "Perguntas frequentes" - 5 accordions: título + chevron ↓ / ao expandir mostra resposta - Anotação: "tap no accordion: expande/colapsa com animação smooth (300ms ease)"
SECÇÃO 8 — CTA FINAL (height: 280px, fundo verde marca)
Layout: centrado - H2 branco: "Começa hoje. Primeira amostra grátis." - Corpo branco: "Sem mínimos de encomenda. Entrega em todo o Portugal Continental." - Botão grande branco com texto verde: "Pedir orçamento grátis" - Nota pequena: "Resposta garantida em 24h úteis"
SECÇÃO 9 — FOOTER (height: 180px)
Layout: 4 colunas - Col 1: Logo + tagline + redes sociais - Col 2: Produtos (links de navegação) - Col 3: Empresa (Sobre, Blog, Contacto) - Col 4: Newsletter (email input + botão subscrever) - Bottom bar: © 2026 EcoPack · Política de Privacidade · Termos
Critérios de avaliação das 60 pts: - Secções completas com layout descrito (30 pts) - Hierarquia visual correcta em cada secção (15 pts) - Anotações de comportamento presentes (10 pts) - CTA principal visível e proeminente (5 pts)