O que Design de Frontend Astrale faz?
Construa o Domínio como uma interface de produto focada, não uma landing page. Os Domínios vivem dentro da GUI Astrale e herdam sua estrutura envolvente. Não adicione hero, área de apresentação grande, cabeçalho de página redundante ou espaço vazio antes de conteúdo útil.
Aplique esta skill em conjunto com as orientações de Visualização astrale-domain. Reutilize a linguagem
visual do aplicativo host e os primitivos existentes do projeto, a menos que a tarefa estabeleça uma direção diferente.
Planeje a Arquitetura da Informação
Antes de escrever código de UI, esboce mentalmente ou em uma nota temporária um wireframe de alto nível. Identifique:
- a tarefa principal do usuário;
- as seções e subseções principais;
- os links lógicos entre elas;
- sua importância relativa;
- quais informações pertencem ao mesmo grupo;
- o pai correto para cada subseção.
Faça de cada seção uma unidade lógica coerente. Deixe que a arquitetura da informação e a prioridade da tarefa orientem o layout, a ordem, o espaço e o peso visual. Coloque estado e controles próximos ao conteúdo que afetam.
Mantenha a Interface Contida
Evite estética genérica de IA. Não transforme cada elemento em um cartão, aninhe contêineres sem uma necessidade real de agrupamento, ou faça cartões levantarem no hover. Use hover apenas para esclarecer interação, e forneça a mesma clareza para usuários de teclado e toque.
Prefira um pequeno número de regiões fortes, hierarquia clara, espaçamento compacto e controles consistentes. Não adicione gradientes decorativos, pills, métricas muito grandes, animação ou texto ornamental por padrão. Cada dispositivo visual deve comunicar estrutura, estado, prioridade ou affordance.
Torne os Estados de Interação Precisos
Modele os estados relevantes de inicial, carregamento, vazio, pronto, enviando, sucesso, falha, não autorizado e desabilitado antes de considerar um fluxo completo.
- Mostre carregamento no escopo que está realmente esperando: dentro de um botão submetido para uma ação local, ou com um esqueleto de página para conteúdo inicial da página. Nunca mostre múltiplos loaders para uma única ação.
- Evite submissões duplicadas. Preserve a entrada do usuário em caso de falha e coloque feedback acionável próximo ao controle ou conteúdo afetado.
- Lide com criação claramente: mostre que a ação foi bem-sucedida, insira o resultado onde o usuário espera e mova o foco apenas quando isso ajudar na próxima tarefa.
- Lide com exclusão claramente: distinga remoção reversível de exclusão destrutiva e confirme apenas quando a consequência justificar interrupção.
- Use atualizações otimistas de lista quando o resultado for previsível. Reverta em caso de falha, mostre a falha e reconcilie a interface com o estado confirmado do Kernel.
- Feche um dropdown aberto quando o usuário clicar fora dele ou pressionar Escape. Suporte navegação por teclado, exponha o item selecionado e retorne o foco ao gatilho quando apropriado.
- Torne rótulos e valores longos parte do teste de layout. Quebre linhas quando a leitura for importante; trunque apenas em espaço verdadeiramente fixo e forneça acesso ao valor completo. Nunca deixe texto cobrir ações adjacentes.
- Mantenha diálogos, menus, formulários e ações inline utilizáveis por teclado. Use foco visível, controles semânticos, rótulos corretamente associados e anúncios acessíveis de status ou erro.
- Torne os estados de hover, desabilitado, pendente, sucesso e erro visualmente distintos sem depender apenas de cor.
Reduza Texto Deliberadamente
Mantenha apenas texto que ajude o usuário a entender o estado, decidir ou agir. Preserve rótulos necessários, feedback e texto de acessibilidade. Remova introduções, repetições, ajuda óbvia, texto decorativo e descrições que apenas reafirmam um título ou controle.
Após a implementação, realize uma passagem dedicada de redução de texto. Leia cada string visível em contexto e remova-a a menos que a interface se torne mais difícil de entender, decidir ou agir.
Verifique o Resultado
Execute os fluxos de tarefa reais com dados representativos, vazios, longos, de carregamento e com falha. Verifique criação, exclusão, reversão, comportamento de clique fora e Escape, ordem do teclado, layouts estreitos e feedback visível. Em seguida, revise a tela inteira mais uma vez e remova cartões, efeitos, cópia e espaço redundantes antes de conteúdo útil.