Modelo de Entrega de Design
Estrutura com estados, espaçamentos, componentes e casos-limite, para o que desenhaste ser construído como pensaste.
Estrutura com estados, espaçamentos, componentes e casos-limite — para o que desenhaste ser construído exatamente como pensaste, sem interpretações erradas de quem implementa.
O que incluir na entrega
- Todos os estados de cada ecrã (normal, hover, foco, erro, vazio, carregamento)
- Espaçamentos e medidas exatas entre elementos, não só "parece bem assim"
- Componentes reutilizáveis identificados (botões, campos, cartões) com as suas variações
- Casos-limite — o que acontece com texto muito longo, listas vazias, ou muitos itens
Boas práticas
- Organiza os ficheiros de forma que quem implementa encontre facilmente cada ecrã
- Usa nomes consistentes entre o design e o que será implementado, para evitar confusão
- Está disponível para esclarecer dúvidas durante a implementação, não só na entrega
Erros comuns
- Entregar só o estado ideal, deixando para quem implementa decidir os outros estados
- Não especificar espaçamentos, assumindo que "vai dar para perceber pelo desenho"
- Desaparecer depois da entrega, sem estar disponível para dúvidas de implementação
Um design bem entregue é aquele que quem implementa consegue construir sem ter de adivinhar nada.
Continua a aprender
Guia Completo de UX/UI para Iniciantes
Da pesquisa ao protótipo testado — processo, wireframes, interface e validação com utilizadores reais.
AcederChecklist de Revisão de Interface
Hierarquia, contraste, espaçamento, estados, erros e acessibilidade — o que rever em qualquer ecrã.
AcederModelo de Guião de Entrevista
Perguntas abertas para perceberes comportamento real, em vez de recolheres opiniões sobre o teu design.
AcederPrompts para Planear Pesquisa com Utilizadores
Prompts para definires objetivos, perguntas e critérios de recrutamento antes de entrevistares alguém.
Aceder