Conceber projectos em wireframe para produtos digitais

Há um pacote premium desta unidade: um PowerPoint editável de 100 ou mais diapositivos, um manual em PDF e dois testes com correção. Esta sebenta continua gratuita.

Apresentação

UC02284 (25h) capacita os formandos para conceber wireframes profissionais de produtos digitais, desde a exploração low-fi em papel até à entrega high-fi com handoff para desenvolvimento. O wireframe é a língua franca entre UX designers, developers e stakeholders.

1. UX e wireframes

1.1 O que é UX Design

UX (User Experience) é a disciplina de design que se foca na qualidade da experiência de um utilizador ao interagir com um produto ou serviço. Vai muito além da aparência visual.

UX vs UI:

• UI (User Interface): como o produto parece — cores, tipografia, ícones, espaçamento. É o "acabamento visual".
• UX (User Experience): como o produto funciona e como o utilizador se sente ao usá-lo. Inclui investigação, arquitectura de informação, fluxos, usabilidade, acessibilidade.

Um produto pode ter uma UI belíssima mas uma UX horrível (difícil de navegar, tarefas confusas, feedback ausente). E vice-versa — um produto visualmente simples pode ter uma UX excelente.

As cinco camadas da UX (Jesse James Garrett):

1. Estratégia (objectivos do negócio + necessidades do utilizador).
2. Âmbito (funcionalidades e conteúdo).
3. Estrutura (arquitectura de informação + design de interacção).
4. Esqueleto (wireframes — o foco desta UC).
5. Superfície (UI design final).

1.2 O papel dos wireframes no processo

Os wireframes pertencem à camada de esqueleto (skeleton) — definem o layout e a estrutura de cada ecrã antes de qualquer decisão visual.

Porque criar wireframes antes do design:

• Explorar diferentes layouts é muito mais rápido em wireframe do que em design completo.
• Permite testar usabilidade sem o ruído visual do design final.
• Facilita discussão de estrutura sem debates sobre cor ou tipografia.
• Serve de documentação para a equipa de desenvolvimento.

Quando os wireframes não são suficientes:

• Quando é necessário testar fluxos complexos com utilizadores reais (usar protótipos interactivos em Figma).
• Quando é necessário comunicar animações e micro-interacções (usar Motion/Framer).

1.3 Low-fidelity vs High-fidelity

Low-fidelity (Fidelidade Baixa):

Wireframes rápidos e esquemáticos. Podem ser em papel, quadro branco, ou ferramenta digital simples.

Características:

• Blocos rectangulares para conteúdo.
• Texto placeholder (Lorem ipsum ou linhas simples).
• Imagens representadas por caixas com X diagonal.
• Sem cores (máximo uma cor de destaque para o elemento principal).
• Sem tipografia real.
• Muito rápidos de criar (5-20 minutos por ecrã).
• Fáceis de modificar.

High-fidelity (Fidelidade Alta):

Wireframes detalhados, próximos do produto final, normalmente criados em Figma ou ferramenta similar.

Características:

• Tipografia real (família, tamanho, peso, line-height definidos).
• Espaçamento preciso (padding, margin, gap em px).
• Componentes reutilizáveis (botões, inputs, cards).
• Cores básicas (paleta definida, mesmo que simplificada).
• Ícones reais.
• Mais demorados (30-120 minutos por ecrã complexo).

Regra fundamental: nunca avançar para high-fi sem ter a estrutura validada em low-fi. O custo de mudar a estrutura duplica em high-fi.

2. Ferramentas

2.1 Figma

Figma é o software de design de interface padrão da indústria desde 2019. Funciona no browser, em desktop (Windows/Mac), tem colaboração em tempo real e é gratuito para uso individual.

Vantagens que o tornaram standard:

• Colaboração em tempo real (múltiplos designers no mesmo ficheiro simultaneamente).
• Funciona em qualquer sistema operativo.
• Componentes, estilos e bibliotecas partilhadas.
• Figma Inspect para handoff de desenvolvimento.
• Prototipagem interactiva integrada.
• Versão gratuita generosa para aprendizagem.

Interface básica:

• Canvas: área de trabalho infinita.
• Layers panel (esquerda): hierarquia de todos os elementos.
• Properties panel (direita): propriedades do elemento seleccionado.
• Toolbar (topo): ferramentas de desenho, frame, texto, componentes.
• Asset panel: componentes e estilos do projecto.

2.2 Atalhos de Figma essenciais

2.3 Auto Layout

Auto Layout é o sistema de layout do Figma equivalente ao CSS Flexbox. Permite criar componentes e layouts que se adaptam automaticamente ao conteúdo.

Activar: seleccionar um frame ou grupo → Shift+A.

Direcção: Horizontal (items lado a lado) ou Vertical (items empilhados).

Propriedades:

• Padding: espaço interior (Top, Right, Bottom, Left ou uniform).
• Gap: espaço entre items.
• Alignment: alinhamento dos items no eixo principal e cruzado.
• Hugging vs Fill: o frame pode "abraçar" o conteúdo (Hug) ou preencher o espaço disponível (Fill).

Exemplo prático — botão:

Frame com Auto Layout horizontal
  padding: 12px 24px
  gap: 8px
  items: [Ícone + Label]

O botão cresce ou encolhe automaticamente conforme o texto do label.

2.4 Outras ferramentas

Balsamiq: ferramenta de wireframe low-fi com visual "sketch". Deliberadamente imperfeito para comunicar que é um esboço. Gratuito por 30 dias. Bom para apresentar wireframes a clientes não-técnicos.

Adobe XD: foi o principal concorrente do Figma, descontinuado em 2023 para novos utilizadores. Ainda funciona para projectos existentes.

Penpot: alternativa open source ao Figma. Em crescimento, boa para quem prefere ferramentas sem vendor lock-in.

3. Wireframes low-fi

3.1 O valor do papel

Papel + caneta é a ferramenta mais rápida de exploração de design. Um esboço de 5 minutos em papel comunica a mesma ideia estrutural que 45 minutos de Figma.

Exercício Crazy 8s (Google Design Sprint):

1. Dobrar uma folha A4 em 8 partes iguais.
2. Definir um timer de 8 minutos.
3. Desenhar 8 variações diferentes do mesmo ecrã — uma por célula.
4. Sem julgamento durante o processo.
5. Seleccionar a abordagem mais promissora para desenvolver.

Este exercício força a geração rápida de alternativas e evita ficar preso à primeira ideia.

3.2 Elementos standard de wireframe

Imagem placeholder: rectângulo com duas diagonais cruzadas (X). Universal, imediatamente reconhecível como "imagem vai aqui".

Texto placeholder: linhas paralelas horizontais de comprimento variável. Comunicam texto sem o distrair com conteúdo real.

Botão: rectângulo com texto simples no centro. Label curta e descritiva (não "Lorem ipsum").

Input: rectângulo com label acima e texto de placeholder dentro.

Navigation bar: barra com ícones e labels de tab.

Card: rectângulo com placeholder de imagem, título e texto.

Cores em wireframe low-fi:

• Preto/cinza para a maioria dos elementos.
• Uma cor (geralmente azul) para o elemento de acção principal (CTA).
• Vermelho ou laranja para estados de erro.
• Nada mais.

3.3 Anotações de comportamento

As anotações explicam comportamentos que não são visíveis no wireframe estático.

Exemplos:

• "Swipe esquerdo para eliminar item da lista."
• "Tap na imagem abre lightbox fullscreen."
• "Formulário valida em tempo real — feedback inline."
• "Infinite scroll — carrega 20 mais ao chegar ao fundo."
• "Estado vazio: mostrar ilustração + CTA de onboarding."

Formato: numeração de nota + linha a apontar para o elemento + texto de anotação.

4. Wireframes high-fi

4.1 Processo de transição

A transição de low-fi para high-fi acontece após:

• Aprovação da estrutura pelo stakeholder.
• Validação do fluxo (pelo menos informalmente com alguém representativo do target).
• Decisão sobre qual das variantes low-fi avançar.

Processo:

1. Criar a Design System básica: cores, tipografia, espaçamento.
2. Criar componentes fundamentais: botões (primário, secundário, ghost), inputs, cards, navegação.
3. Implementar cada ecrã usando os componentes.
4. Verificar consistência entre ecrãs.

4.2 Tipografia em wireframes high-fi

Não é necessária uma Design System completa para wireframes — mas a tipografia básica deve estar definida.

Escala tipográfica mínima para mobile:

H1 — 28-32px, bold (700)
H2 — 22-24px, semibold (600)
H3 — 18-20px, medium (500)
Body — 16px, regular (400) ← nunca abaixo de 16px em mobile
Caption — 13-14px, regular

Famílias de fonte para wireframes: Inter, Roboto, SF Pro (Apple system), ou qualquer sans-serif neutra. Evitar fontes decorativas — distraem da estrutura.

4.3 Espaçamento em wireframes high-fi

Usar um sistema de espaçamento baseado em múltiplos de 4 ou 8.

Sistema de 8pt:

• 4px — micro (separar elementos relacionados)
• 8px — pequeno (padding interno de componentes pequenos)
• 16px — base (padding de ecrã, gap standard)
• 24px — médio (separação entre secções relacionadas)
• 32px — grande (separação entre secções)
• 48px+ — muito grande (espaçamento de hero, separação major)

Este sistema cria consistência visual automática e é directamente traduzível para CSS.

5. Fluxos de utilizador

5.1 User flow

O user flow é um diagrama que mostra o percurso de um utilizador desde a entrada num produto até atingir o seu objectivo. Inclui todos os pontos de decisão.

Elementos de um user flow:

• Oval/Elipse: início e fim do fluxo.
• Rectângulo: ecrã ou estado.
• Losango: ponto de decisão (sim/não, autorizado/não autorizado).
• Setas: direcção do fluxo.
• Anotações: notas sobre contexto ou condições.

Ferramentas: Figma (FigJam ou com shapes), Miro, Lucidchart, draw.io (gratuito).

5.2 Happy path vs edge cases

Happy path: o caminho ideal onde tudo corre como esperado. O utilizador tem dados válidos, está autenticado, não há erros de rede.

Edge cases: cenários que podem ocorrer mas são menos comuns ou representam estados de erro/excepção.

Edge cases obrigatórios a documentar:

• Estado vazio: o utilizador abre uma lista que ainda não tem itens. O que mostra?
• Estado de erro: a request falha (timeout, 500). O que mostra?
• Estado de loading: enquanto os dados carregam. Há skeleton screens?
• Utilizador não autenticado: tenta aceder a área protegida.
• Input inválido: formulário submetido com dados incorrectos.
• Permissão negada: utilizador recusou acesso à câmara, localização, notificações.

5.3 Sitemap

O sitemap é um mapa hierárquico das páginas/ecrãs de um produto. Mostra a estrutura de navegação, não o design.

Útil para:

• Entender a arquitectura de informação de um produto existente.
• Planear a estrutura antes de começar a wireframing.
• Comunicar a estrutura a stakeholders não-técnicos.

Quando criar o sitemap: antes de começar os wireframes, especialmente para produtos com múltiplas secções ou navegação complexa.

6. Entrega e handoff

6.1 O que é o handoff

O handoff é o processo de transferência do design para a equipa de desenvolvimento. Um handoff mal feito resulta em:

• Inconsistências entre o design e a implementação.
• Conversas repetidas sobre espaçamentos, cores e tamanhos.
• Tempo perdido em "vai e vem" de questões.

Um bom handoff inclui:

• Wireframes/mockups finais em Figma (partilhados em modo "view").
• Todas as states dos componentes documentadas (default, hover, active, disabled, error).
• Comportamentos anotados.
• Assets exportados em formatos correctos.
• Design tokens (variáveis de cor, espaçamento, tipografia).

6.2 Figma Inspect

Figma Inspect é a funcionalidade que permite aos developers ver as especificações de qualquer elemento sem precisar de abrir o ficheiro em modo de edição.

Como aceder:

1. Partilhar o ficheiro em modo "Anyone with the link can view".
2. O developer abre o link no browser.
3. Clica em qualquer elemento.
4. O painel da direita mostra: dimensões, padding, cores, tipografia, efeitos.
5. Botão "Copy CSS" copia o código CSS correspondente.

Limitação: o CSS gerado pelo Figma raramente é directamente utilizável — precisa de adaptação. É uma referência, não código production-ready.

6.3 Anotações para desenvolvimento

Mesmo com o Figma Inspect, as anotações de comportamento são necessárias para comunicar o que o Figma não consegue mostrar:

• Estados interactivos: hover, focus, active.
• Animações: tipo, duração, easing.
• Lógica condicional: quando este componente aparece/desaparece.
• Regras de negócio: este campo só aparece se o utilizador for premium.
• Dados dinâmicos: este texto vem da API user.name.

Formato recomendado: notas numeradas no Figma, referenciadas numa secção de anotações separada por ecrã.

Glossário

Arquitectura de informação: estrutura e organização do conteúdo de um produto digital.

Auto Layout: sistema de layout flexível do Figma (equivalente a CSS Flexbox).

Componente: elemento reutilizável no Figma. Alteração no componente propaga para todas as instâncias.

CTA: Call to Action — elemento que incita o utilizador a uma acção.

Design System: colecção documentada de componentes, estilos e padrões de design de um produto.

Design tokens: variáveis nomeadas que armazenam valores de design (cores, espaçamentos, tipografia).

Edge case: cenário de uso pouco comum ou estado de erro/excepção.

Figma Inspect: funcionalidade do Figma que mostra especificações técnicas para developers.

Frame: no Figma, equivalente ao artboard — o "ecrã" do wireframe.

Handoff: entrega do design ao desenvolvimento com todas as especificações necessárias.

Happy path: o fluxo ideal de utilização, sem erros ou excepções.

High-fidelity: wireframe detalhado com componentes reais, tipografia e espaçamento preciso.

Low-fidelity: wireframe esquemático rápido, com placeholders e sem design visual.

Sitemap: mapa hierárquico das páginas/ecrãs de um produto.

Skeleton screen: placeholder de loading que mostra a forma do conteúdo antes de carregar.

Task flow: percurso de uma tarefa específica no produto.

UI: User Interface — a aparência visual de um produto.

User flow: percurso completo de um utilizador desde a entrada até ao objectivo.

UX: User Experience — a qualidade da experiência de usar um produto.

Wireframe: esquema de layout de um ecrã, sem design visual final.