Mockups

O mockup é a imagem da tela como ela vai ficar. A área de negócio valida o mockup, e o dev constrói a partir dele. A equipe de UX/UI propõe os fluxos e os mockups depois do entendimento com o líder técnico e a equipe, a partir do PRD inicial.

Quanto detalhe

O detalhe acompanha o tamanho da mudança:

• Tela ou fluxo novo, ou que importa para o trabalho da área: detalhe suficiente para a área validar, incluindo os estados relevantes à tarefa e aos riscos.
• Ajuste simples, como um campo a mais ou um texto que muda: reaproveite os componentes e as decisões já validados. O mockup mostra só o que muda, e a issue da validação aponta para a validação anterior.

Como fazer

• Alta fidelidade, quando a mudança pede. Cores, fonte, rótulos, textos e dados de exemplo são os da tela pronta. Rascunho em papel ou em caixas cinzas ajuda a pensar, mas não vai para validação.
• Só com o design system. Use os componentes Base* e os Padrões de tela. Se a tela precisa de algo que o design system não tem, peça o componente como está em Comece aqui e marque no mockup o que é provisório.
• Texto final. Botões, mensagens e avisos seguem Como escrever as mensagens. O texto do mockup é o que vai para a tela.
• Só dados fictícios. Nenhum nome de pessoa, número de processo ou documento real.

Estados relevantes

Selecione os estados necessários para compreender e validar o fluxo, considerando riscos e reaproveitamento. Os estados pertinentes também ficam no PRD:

Estado	Padrão de tela
Com dados, o caso comum	Listas e tabelas, Formulários ou Detalhe de registro
Carregando	Carregando
Sem dados	Vazio
Erro	Erro
Sem permissão	Sem permissão
Confirmação	Confirmar ação destrutiva e Sucesso e retorno

Num formulário, mostre também o campo com erro e a mensagem de como acertar.

Nome e versão

Cada imagem se chama <conjunto>-<tela>-<estado>-v<versão>.png, em inglês, minúsculas e sem acento, como os arquivos de código. Exemplo: measurement-list-empty-v2.png é a lista de medições sem dados, na versão 2.

• A primeira versão, mostrada na validação interna, é a v1.
• A tela que muda numa rodada de ajustes ganha a versão seguinte. A que não muda continua com o mesmo número.
• Uma versão já mostrada nunca é sobrescrita. Assim, o link de uma validação antiga continua mostrando o que foi validado.

Onde ficam as imagens

As imagens ficam no repositório do projeto, na pasta docs/mockups/<conjunto>/, e entram por PR (pull request, o pedido para incorporar uma mudança ao projeto), como o PRD. Exemplo: docs/mockups/measurement/measurement-list-empty-v2.png.

• A issue "Validação de telas" traz o link de cada imagem apresentada, com a versão.
• O PRD traz, na seção Telas, o link de cada imagem validada e da issue da validação.
• Imagem colada só num comentário ou mandada por mensagem não vale como registro: ela fica sem versão e se perde.

Protótipo navegável

Quando o fluxo tem vários passos, as imagens podem virar depois um protótipo navegável, com dados simulados, no próprio projeto. Ele segue as mesmas regras: só componentes do design system, os estados relevantes e só dados fictícios. A validação continua registrada na issue.