Conceber projectos em wireframe para produtos digitais

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.