Seus bookmarks
Sinais do que já chama sua atenção: design engineering, skills para agentes, motion, ícones, QA visual e acessibilidade.
Fonte pessoal · XPesquisa aplicada · 18 jul 2026
UI/UX não é uma camada.
É um sistema de decisões.
O craft visível é só a superfície. Produtos bons combinam 12 campos: entender pessoas, escrever, modelar estados, mover, incluir, medir e transformar intenção em software confiável.
- 12
- campos conectados
- 4
- lentes de evidência
- 90
- dias de prática
problema
humano researchcopy motionsystems metricsa11y front-endstrategy
humano researchcopy motionsystems metricsa11y front-endstrategy
Mova o cursor: o sistema responde.
Use o botão ∿: o sistema respeita.
A tese
A competência rara é orquestrar o todo.
“Beleza” sem estado, linguagem, evidência e implementação é apenas uma imagem do produto.
O profissional forte alterna altitude: investiga o contexto, dá forma ao fluxo, escreve o significado, define o comportamento, codifica critérios e mede se a promessa virou resultado.
Isso muda a pergunta de “qual ferramenta eu domino?” para “qual risco humano e de negócio eu consigo reduzir?”
Método
Quatro lentes, uma síntese.
Padrões públicos
WCAG 2.2, Human Interface Guidelines, Material Design e design systems governamentais.
Fonte normativaPrática profissional
Heurísticas, pesquisa, métricas, content design, sistemas, colaboração e níveis de maturidade.
Fonte aplicadaFronteira
Interfaces para IA, design como código, agentes que prototipam e revisão visual como skill executável.
Sinal emergenteAtlas de competências
Doze campos.
Nenhum vive sozinho.
Filtre por tipo de risco. Cada campo inclui o que observar, o que praticar e a evidência de domínio.
12 competências exibidas.
Pesquisa & descoberta
Entrevistar, observar, sintetizar padrões e separar pedido, comportamento e necessidade.
- Prática: entrevista + mapa de evidências
- Prova: decisão mudada por insight
Arquitetura & fluxos
Modelar informação, tarefas, dependências, caminhos felizes e recuperação.
- Prática: task flow + edge cases
- Prova: menos passos e menos retorno
UX writing & conteúdo
Dar nome às ações, organizar significado e escrever erro, ajuda, onboarding e voz.
- Prática: antes/depois testável
- Prova: ação compreendida sem ajuda
Design visual
Usar hierarquia, tipografia, cor, espaço, densidade, iconografia e composição.
- Prática: reproduzir e explicar
- Prova: atenção vai ao que importa
Motion & microinteração
Conectar causa e efeito, preservar continuidade e comunicar status sem distrair.
- Prática: trigger → regra → feedback
- Prova: movimento tem função
Acessibilidade & inclusão
Projetar para diferentes corpos, sentidos, cognições, idiomas e tecnologias assistivas.
- Prática: teclado + leitor + zoom
- Prova: WCAG e teste com pessoas
Design systems
Codificar decisões em tokens, componentes, padrões, governança e documentação.
- Prática: componente com estados
- Prova: consistência em escala
Design engineering
Entender HTML, CSS, eventos, performance e restrições para prototipar com fidelidade.
- Prática: protótipo real responsivo
- Prova: intenção sobrevive ao código
Produto & estratégia
Conectar valor humano, modelo de negócio, posicionamento, priorização e trade-offs.
- Prática: hipótese + aposta + custo
- Prova: decisão com consequência
Métricas & experimentos
Definir comportamento esperado, instrumentar eventos e ler qualidade além de conversão.
- Prática: sinal + baseline + guarda
- Prova: aprendizado pós-lançamento
Facilitação & influência
Construir entendimento comum, explicar raciocínio e conduzir conflito sem diluir a decisão.
- Prática: crítica com critérios
- Prova: time decide melhor junto
IA, ética & novos agentes
Desenhar confiança, supervisão, incerteza, reversibilidade, privacidade e uso por humanos e agentes.
- Prática: falhas + controles + logs
- Prova: autonomia sem perda de agência
Conexões não óbvias
O valor mora entre as skills.
copy＋arquitetura＝navegação
Rótulo é arquitetura comprimida. Um substantivo vago muda o mapa mental e aumenta a busca.
motion＋estado＝causalidade
A animação não “decora”: mostra de onde algo veio, para onde foi e o que a ação causou.
a11y＋IA＝interfaces legíveis
Semântica, foco e nomes claros ajudam pessoas, leitores de tela e agentes de computador.
sistema＋copy＝voz em escala
Componentes precisam de padrões de conteúdo, não apenas variantes visuais.
métrica＋ética＝qualidade
O que não vira guarda de qualidade pode ser otimizado para conversão às custas da pessoa.
Sinais de 2026
O campo está ficando mais sistêmico.
HCD virou autoavaliação organizacional
A ISO 9241-222:2026 trata a capacidade de human-centred design como algo que a organização consegue examinar — não apenas uma virtude individual do designer.
ISO 9241-222:2026 ↗Tokens viraram contrato
A especificação estável DTCG 2025.10 formaliza tokens vendor-neutral, aliases, temas e formatos de cor. Governança passa a importar tanto quanto a biblioteca.
Design Tokens Community Group ↗Conformidade não encerra a conversa
WCAG 2.2 reforça foco, alvo, drag, ajuda e autenticação; ferramentas automáticas assistem, mas o julgamento e o teste humano continuam indispensáveis.
W3C sobre ferramentas ↗Design de IA é design de supervisão
A unidade de craft inclui intenção legível, escopo, permissão proporcional, progresso, confirmação, resultado auditável e recuperação.
Microsoft HAX Guidelines ↗Laboratório aplicado
O report pratica o que recomenda.
Experimente três microcasos. Observe como palavras, estados e movimento carregam decisões de produto.
Experimento 01UX writing
Erro não é um tom vermelho.
Use o formato DD/MM/AAAA.
Algo deu errado.
Boa copy diz o que aconteceu e como resolver, sem culpar.
Experimento 02Estados
Um botão contém uma pequena máquina.
Pronto para salvar.
idleloadingsuccessundo
A microinteração define gatilho, regras, feedback, loops e modos.
Experimento 03Motion + a11y
Movimento com propósito e saída.
Pronto para demonstrar a continuidade.
A transição preserva contexto; com movimento reduzido, usa mudança instantânea de estado.
Sinais dos seus bookmarks
Seu acervo aponta para design executável.
Os posts não são tratados como padrão normativo, mas como pistas sobre o repertório que você quer cultivar.
MotionExpandir sem animar
Expandir sem animar height: auto
Usar grid rows para uma transição estável e controlável.
@gabriell_lab ↗ LifecycleEsperar a animação real, não um timer
getAnimations() transforma CSS na fonte de verdade.
Animação respeitando movimento reduzido
O modo alternativo faz parte do componente, não é remendo.
@JohnPhamous ↗ QA visualRevisão de UI como skill repetível
Spacing, alinhamento, tipografia, responsividade e a11y codificados como critérios.
@DylanFeltus ↗ IconografiaÍcones são voz, não commodity
Phosphor, Iconoir, Tabler, Solar e Hugeicons ampliam o vocabulário visual.
@jonvolio ↗ AgentesDesign como arquivo e trabalho paralelo
O sinal emergente: critérios e artefatos versionáveis no mesmo fluxo do código.
@nett0eth ↗ ProcessoDesenhar a árvore antes da alta fidelidade
Estruturar decisões antes de polir reduz iteração desperdiçada.
@mattpocockuk ↗ EscritaCortar ruído também é design
Palavras curtas, voz ativa e edição impiedosa melhoram interfaces e prompts.
@austeane ↗Proficiência
Senioridade é aumentar o raio da decisão.
NívelEscopoEvidênciaPergunta central
1 · ExecutaElementoAplica um padrão com qualidade“Como faço?”
2 · ConectaFluxoPrevê estados e dependências“O que acontece antes/depois?”
3 · DecideProblemaEscolhe com evidência e trade-offs“Por que isto?”
4 · MultiplicaSistemaCria critérios reutilizáveis“Como o time decide melhor?”
5 · OrientaOrganizaçãoMuda estratégia e capacidade“Que futuro vale construir?”
Roadmap de prática
Noventa dias para transformar repertório em evidência.
Ver e nomear
Faça auditorias semanais de um fluxo real. Nomeie hierarquia, estados, copy, movimento e falhas de inclusão.
- 4 desmontagens de produto
- 1 teste com teclado/leitor
- 1 inventário de estados
Construir e comparar
Prototipe um fluxo em código. Crie duas versões de copy e motion; teste compreensão e preferência.
- 1 protótipo responsivo
- 3 microinterações com fallback
- 5 testes rápidos
Sistematizar e medir
Extraia padrões, defina métricas e documente como outra pessoa ou agente deve repetir o resultado.
- 1 mini design system
- 1 plano de eventos + guardrails
- 1 case com trade-offs
Checklist de crítica
Antes de chamar de pronto.
0 de 8 verificados
Fontes & trilhas
Continue pelas referências primárias.
Padrões e fundamentos
W3C · WCAG 2.2 ↗W3C · Animation from Interactions ↗NN/g · 10 Usability Heuristics ↗Microsoft · Inclusive Design ↗ISO 9241-210 · Human-centred design ↗Craft de interface
Apple HIG · Writing ↗Apple HIG · Motion ↗Apple HIG · Haptics ↗Material 3 · Motion ↗W3C · Internationalization ↗Pesquisa realizada em 18 de julho de 2026. Links do X refletem bookmarks visíveis na conta do usuário no momento da coleta. O report sintetiza — não reproduz — as fontes.