A língua do layout
Buraco #1 da sua trilha. Você reage a telas do BStech toda semana ("tá poluída", "não gostei") sem as palavras pra apontar o incômodo. Cinco termos resolvem 80% disso.
Layout não é decoração, é o caminho do olho. Toda tela boa responde estas quatro perguntas, nesta ordem:
O que vejo primeiro?hierarquia
→
O que pertence junto?espaçamento + alinhamento
→
Quanto cabe sem sufocar?densidade
→
Onde devo agir?contraste
visual hierarchyhierarquia visual
A ordem em que o olho encontra as coisas. Tamanho, peso e posição dizem o que é primário, secundário, terciário. Se tudo grita, nada fala.
"o total a receber é o dado primário e tá do mesmo tamanho dos filtros; sobe ele, rebaixa os filtros"
Erro comum: pedir "aumenta tudo" quando o problema é que nada tem ordem.
cravouainda confuso
spacing / whitespaceespaçamento / respiro
O vazio é informação: perto = pertence junto, longe = assunto novo. "Tela poluída" quase sempre é espaçamento inconsistente, não excesso de coisas.
"os cards tão colados; dobra o spacing entre as seções pra separar o que é de cada obra"
Erro comum: remover elementos quando bastava dar respiro.
cravouainda confuso
alignment / gridalinhamento / grade
Toda borda invisível em que os elementos se encostam. Quando algo "parece torto" e você não sabe por quê, é quase sempre um elemento fora da grade.
"o botão tá fora do grid dos cards; alinha a borda esquerda dele com a coluna"
Erro comum: centralizar tudo, que é o jeito mais rápido de não ter grade nenhuma.
cravouainda confuso
densitydensidade
Quanta informação por tela. Não existe certo universal: dashboard de operação pede denso (tudo à vista), página de decisão pede arejado (uma coisa por vez). A escolha é por USO.
"essa tela é de operação, o laboratorista consulta 50 CPs; pode ser density alta, tipo tabela"
Erro comum: chamar denso de "poluído" e arejado de "vazio" sem perguntar quem usa e pra quê.
cravouainda confuso
contrastcontraste
Diferença que chama ação: cor, peso, tamanho. A tela inteira pode ser calma DESDE QUE a ação principal salte. Um botão primário por tela.
"tem três botões com o mesmo peso; deixa 'gerar laudo' como primário e rebaixa os outros pra outline"
Erro comum: pedir "dá um destaque" em vários elementos; destaque em tudo = destaque em nada.
cravouainda confuso
antes, sem a língua
"não gostei, dá uma organizada nessa tela, tá poluída"
depois, com a língua
"a hierarquia tá invertida: o total a receber é o dado primário e tá do mesmo tamanho dos filtros. Sobe ele, rebaixa os filtros. Dobra o spacing entre os cards, alinha o botão na grid das colunas, e deixa só 'gerar laudo' com contraste de primário"
mesma insatisfação. o segundo pedido não precisa de mim adivinhando: cada incômodo tem nome e endereço.