Everygen
Uma imagem de interface ajuda a discutir espaço e hierarquia, sem criar aplicação interativa ou provar usabilidade. Defina uma tela e tarefa no gerador de imagens. O exemplo fictício de agendamento permite avaliar uma direção antes de construir componentes.
Escolha tarefa e estado
Para agendar, mostre serviço, data, horários disponíveis, preço e ação principal. Use um estado definido, como dia com horário selecionado. Misturar painel, cadastro e pagamento numa mesma imagem deixa as decisões pouco claras.
Planeje regiões de conteúdo
Exemplo: «Conceito estático de tela móvel de agendamento, título claro, resumo do serviço, seletor de data, pequena grade de horários, resumo da seleção e uma ação principal. Espaçamento amplo, contraste legível, destaque calmo, controles arredondados, rótulos curtos provisórios, vista frontal plana, sem aparelho». Adapte regiões à sua tarefa e priorize informação sobre decoração.
Registre um sistema visual pequeno
Guarde direção tipográfica, ritmo de espaços, contraste de superfícies, cantos e função da cor. Repita ao criar outra tela e compare controles selecionados e comuns. Substitua números e rótulos importantes. Semelhança visual com outro aplicativo não estabelece um sistema ou interação adequada.
Não infira comportamento dos pixels
Confira ordem de leitura e localização da ação. Pergunte como seria com nome longo ou nenhum horário. A imagem não prova esses estados. Foco de teclado, alvos de toque, leitores de tela, erros e responsividade exigem implementação e testes reais.
Construa componentes funcionais
Converta decisões em conteúdo, controles e regras responsivas. Implemente vazio, carregamento, validação e sucesso com dados reais. Texto deve ser texto e botão deve funcionar; não use a imagem inteira como interface. Compare no celular e desktop e guarde as razões da escolha.
Repasse do conceito de interface
Identifique a imagem como conceito estático. Indique tarefa, rótulos provisórios, decisões aprovadas e comportamento pendente. O revisor precisa saber quais controles ainda não funcionam.
Depois de implementar, demonstre a tarefa pelo guia de screencast. Para identidade visual, use o kit de marca. São entregas com critérios distintos.
