Construção de interface Silicon
Leve a intenção de design para um comportamento funcional. Inspecione o DESIGN.md do produto, o framework, a UI atual, componentes, assets e conteúdo antes de editar. Mantenha as alterações dentro do escopo solicitado. Para uma pequena correção, siga a direção existente; se faltar direção para uma construção maior, estabeleça uma direção provisória concisa a partir do briefing.
Construa uma fatia representativa
Identifique a pessoa, a tarefa, a informação primária e a próxima ação. Use conteúdo representativo do produto; rotule fixtures fictícias e ações de protótipo. Não fabrique depoimentos, logotipos de clientes, métricas ou integrações bem-sucedidas.
Escolha a estrutura de acordo com o conteúdo: prosa para leitura, linhas ou tabelas para comparação, cartões para objetos independentes. Um site deve tornar sua promessa e evidências compreensíveis; um aplicativo deve expor o trabalho e o estado que suportam uma ação. Preserve a semântica confiável dos componentes ao adaptar o sistema visual.
Implemente um fluxo completo com um estado adverso antes de espalhar a estilização por todo o produto. Inclua feedback relevante de carregamento, vazio, erro, indisponível e sucesso. Preserve entrada útil em erros recuperáveis e explique ações indisponíveis. Use controles semânticos e rótulos persistentes.
Estabeleça papéis coerentes de tipo, cor e espaçamento. Use assets para uma finalidade específica de informação ou identidade, com direitos adequados e alternativas textuais. Mantenha conteúdo crítico independente de movimento decorativo e áudio.
Leve a direção escolhida além da primeira tela para a tarefa, um estado adverso e um resultado onde estiver no escopo. Inclua um detalhe específico do produto na redação, nas relações visuais ou no comportamento. Preserve o contexto, explique por que uma coleção está vazia e mantenha ações repetidas eficientes. Finalize os ajustes de quebra, alinhamento óptico, cortes, peso do ícone, unidades e feedback como uma passagem de artesanato distinta. Não adicione recursos fora do escopo apenas para criar um momento memorável.
Inspecione o resultado
Abra a implementação real em um navegador quando disponível. Inspecione layouts estreitos, intermediários e largos, extremos de conteúdo e temas/idiomas suportados. Corrija transbordamento, hierarquia fraca, quebras estranhas e estados incompletos antes do micro-polimento.
Exercite navegação por teclado, foco e um caminho completo de tarefa/recuperação. Verifique pares de contraste relevantes, ampliação de texto e comportamento reduzido de movimento. Diferencie redimensionamento da janela de visualização do zoom real do navegador e capturas de tela do teste de entrada. Execute verificações de projeto apropriadas à mudança; não adicione testes que apenas repitam escolhas de estilo.
Se um navegador/ambiente de execução não estiver disponível, realize verificações úteis de código-fonte e relate explicitamente que o comportamento renderizado permanece não verificado. Não substitua evidências pela afirmação de que a UI parece correta.
Avalie operação e caráter separadamente. Aponte o que torna o resultado específico e coerente, inspecione o interior bem como a introdução e percorra o uso repetido para interrupções recorrentes. Uma construção ou verificação de contraste aprovada não responde a essas questões de design. Trate efeitos emocionais e memorabilidade como hipóteses, a menos que observações reais do público as suportem.
Entregue o fluxo implementado, superfícies alteradas, evidências renderizadas quando disponíveis, verificações realizadas e limitações restantes. Continue corrigindo problemas observados dentro do escopo até que o fluxo atinja seus critérios.
Profundidade opcional: Lista de verificação de revisão de design Silicon.