Índice

1. UX e wireframes
2. Ferramentas — Figma
3. Wireframes low-fi
4. Wireframes high-fi
5. Fluxos de utilizador
6. Entrega e handoff

O que é UX Design?

UX (User Experience) é a qualidade da experiência de uma pessoa ao usar um produto digital — não apenas como parece, mas como funciona.

UX não é UI. UI (User Interface) é a aparência visual. UX é o processo de descobrir o que os utilizadores precisam e criar soluções que funcionem.

Processo de UX:

1. Research: perceber os utilizadores, os seus objectivos e os seus problemas.
2. Ideação: gerar soluções (wireframes, sketches).
3. Prototipagem: criar versões testáveis.
4. Teste: validar com utilizadores reais.
5. Iteração: melhorar com base no feedback.

O papel dos wireframes

Os wireframes são esquemas de baixa complexidade visual que mostram a estrutura e o layout de um ecrã sem o ruído visual do design final.

Para que servem:

• Explorar rapidamente diferentes abordagens de layout.
• Comunicar intenções à equipa antes de investir em design.
• Obter feedback de stakeholders sobre estrutura (não sobre cor ou tipografia).
• Documentar a arquitectura de informação.

O que um wireframe NÃO é:

• Um design final.
• Um protótipo funcional.
• Uma representação visual da marca.

Low-fi vs High-fi

Low-fidelity (low-fi):

• Esboços em papel ou traços simples.
• Muito rápidos de criar (5-10 min por ecrã).
• Ideais para explorar e iterar.
• Sem tipografia real, sem cores.
• Usam placeholder: "Lorem ipsum", caixas com X para imagens.

High-fidelity (high-fi):

• Componentes reais, tipografia definida, espaçamento preciso.
• Mais próximo do produto final.
• Mais demorados de criar.
• Usados para aprovação de cliente, testes com utilizadores.

Regra: começar sempre em low-fi. Avançar para high-fi apenas quando a estrutura está validada.

Figma — a ferramenta standard

Figma é o software standard da indústria para UI/UX design. Baseado no browser, colaborativo em tempo real, multiplataforma.

Versão gratuita: ilimitada para utilizadores individuais. Projectos partilhados limitados.

Alternativas: Adobe XD (descontinuado activamente), Sketch (Mac only), Balsamiq (low-fi), Penpot (open source).

Conceitos fundamentais:

• Frames: equivalente a artboards — o "ecrã" de cada wireframe.
• Componentes: elementos reutilizáveis (botão, card, ícone). Editar o componente actualiza todas as instâncias.
• Auto Layout: sistema de layout flexível que responde ao conteúdo (como CSS flexbox).
• Styles: define paletas de cor e estilos de texto reutilizáveis.

Frames e grids em Figma

Criar frames:

• Atalho F → desenhar o frame, ou seleccionar um preset (iPhone 14, Desktop, etc.).
• Mobile: 390×844px (iPhone 14 base).
• Desktop: 1440×900px (standard).

Grids de layout:

• Frame seleccionado → "+" em Layout Grid → configurar tipo (Column, Row, Grid).
• Column grid para mobile: 4 colunas, margin 16px, gutter 8px.
• Column grid para desktop: 12 colunas, margin 80px, gutter 24px.

Benefício: o grid garante alinhamento consistente e facilita a comunicação de espaçamento ao developer.

Auto Layout

Auto Layout é uma das funcionalidades mais poderosas do Figma para wireframes.

[Botão sem auto layout]  → tamanho fixo, texto não se ajusta

[Botão com auto layout]  → padding consistente, cresce com o texto
                           padding: 12px 24px

Como activar: seleccionar um frame ou grupo → Shift+A → configurar direcção (horizontal/vertical) + padding + gap entre itens.

Uso em wireframes:

• Cards de lista com altura variável.
• Navegação horizontal que ajusta ao número de itens.
• Formulários com campos de tamanho variável.

O valor do sketching em papel

O papel é mais rápido do que qualquer software. Um esboço de 2 minutos comunica a mesma ideia estrutural que um Figma de 30 minutos.

Workflow recomendado:

1. Crazy 8s: dobrar papel em 8. Desenhar 8 variações do mesmo ecrã em 8 minutos. Forçar variedade.
2. Seleccionar a abordagem mais promissora.
3. Detalhar o esboço seleccionado numa folha limpa.
4. Digitalizar com telemóvel (app de scan, Figma Camera, ou foto).

Quando ir directamente para o digital: quando há um time constraint, quando já tens uma ideia clara, quando o cliente precisa de ver algo "mais apresentável".

Elementos de um wireframe low-fi

Caixas com X: para imagens. Universal e imediatamente reconhecível.

Linhas paralelas: para texto placeholder.

Caixas simples: para botões (com label de texto simples).

Wireframe content: "Lorem ipsum" ou texto real simplificado.

Anotações: notas textuais sobre comportamento ("tap abre modal", "scroll horizontal", "carrega dados da API").

Regra: não usar cor (excepto uma cor de destaque para o elemento de acção principal). Não usar tipografia real. Não usar imagens reais.

De low-fi para high-fi

A transição de low-fi para high-fi acontece quando:

• A estrutura foi aprovada pelo stakeholder/cliente.
• O fluxo de utilizador está validado.
• A equipa decidiu qual das variantes avançar.

Elementos adicionados no high-fi:

• Tipografia real (família, tamanho, peso).
• Espaçamento preciso (padding, margin, gap).
• Componentes reutilizáveis (botões, inputs, cards).
• Cores básicas (sem necessarily o design visual completo — wireframe high-fi não é UI design).
• Ícones reais (Feather, Material Icons, Heroicons — todos gratuitos).

Componentes no Figma

Criar um componente: seleccionar um grupo → Ctrl+Alt+K (Windows) ou ⌘+⌥+K (Mac).

Instanciar: copiar o componente principal (ou arrastar da Asset panel).

Modificar a instância: override de propriedades sem alterar o componente original.

Variantes de componentes: criar múltiplos estados de um componente (default, hover, active, disabled) dentro de um único componente com variantes.

Benefício para wireframes: criar uma vez (botão primário, botão secundário, input, card) e usar em todos os ecrãs. Mudança num componente propaga para todo o projecto.

User flow vs task flow

User flow: o percurso completo de um utilizador desde a entrada na app/site até atingir o seu objectivo. Inclui todos os pontos de decisão e caminhos possíveis.

Task flow: o percurso de uma tarefa específica. Mais narrow — foca num único fluxo sem ramificações de decisão maiores.

Exemplo:

• User flow "Fazer uma compra" inclui: chegada à homepage → pesquisar produto → ver resultados → entrar no produto → adicionar ao carrinho → checkout → pagamento → confirmação. E também: produto em falta, pagamento falhado, utilizador não registado.
• Task flow "Checkout" começa no carrinho e termina na confirmação. Não inclui como o utilizador chegou lá.

Sitemap e arquitectura de informação

Sitemap: mapa visual da hierarquia de páginas/ecrãs de um produto. Mostra a estrutura, não o design.

Exemplo:

Homepage
├── Produtos
│   ├── Categoria A
│   │   ├── Produto 1
│   │   └── Produto 2
│   └── Categoria B
├── Sobre
├── Blog
│   └── Artigo
└── Contacto

Happy path vs edge cases:

• Happy path: o fluxo ideal, sem erros, onde tudo corre bem.
• Edge cases: o que acontece se o utilizador erra a password? Se a rede cai? Se o produto está esgotado? Se o formulário é submetido incompleto?

O que é o handoff?

O handoff é a entrega do design ao desenvolvimento. O designer assegura que os developers têm toda a informação necessária para implementar o design com fidelidade.

Elementos do handoff:

• Wireframes/mockups finais anotados.
• Especificações: tamanhos, espaçamentos, cores, tipografia.
• Assets exportados (ícones, imagens).
• Notas de comportamento (animações, estados, micro-interacções).
• Acesso ao ficheiro Figma (via Figma Inspect).

Figma Inspect

Figma Inspect permite que os developers vejam as especificações de qualquer elemento sem precisar de ter o Figma aberto.

Como usar:

1. Partilhar o ficheiro em modo "view" ou "inspect".
2. O developer clica em qualquer elemento.
3. Vê automaticamente: dimensões, padding, cor, tipografia, espaçamentos.
4. Pode copiar código CSS, iOS ou Android directamente.

Alternativa: Zeplin (pago), MarkDoc, ou simplesmente a aba "Inspect" do Figma.

Anotações e redlines

Anotações: notas textuais no wireframe que explicam comportamentos que não são evidentes visualmente.

Exemplos de anotações:

• "Carousel: swipe horizontal entre 5 itens, auto-advance a cada 5s."
• "Campo de password: mostrar/esconder com ícone de olho."
• "Lista infinita: carregar mais 20 itens quando scroll chega ao fundo."

Redlines (especificações visuais): no design profissional, incluir medidas precisas de margens, paddings e tamanhos como "guidelines" sobrepostas ao design.

No Figma modern workflow: Figma Inspect substitui redlines manuais. Mas para clientes ou documentação, redlines continuam a ser úteis.