Blog: design de UI, UX e IA
Artigos práticos sobre design de UI, UX, IA no design, movimento e design systems, com fontes e respostas rápidas.
Artigos recentes
Todos os guias
Testando estados de UI e animações com Playwright
Como escrever testes estáveis para UI animada com Playwright: controlando o tempo com page.clock, emulando movimento reduzido e modo escuro e capturas de tela com animações desativadas.
A API View Transitions: mudanças suaves de página e estado no navegador
O que a API View Transitions faz, como funcionam as transições entre documentos e entre documentos, como estilizá-las com CSS e como usá-las com responsabilidade.
Dicas que explicam sem atrapalhar
Como criar dicas de ferramentas que ajudam: informações complementares breves, passar o mouse e acessar o teclado, alternativas de toque e por que instruções essenciais nunca pertencem a uma dica de ferramenta.
Reduzindo o check-out e o abandono de formulários: o que diz a pesquisa
Por que as pessoas abandonam carrinhos e formulários, a partir da pesquisa de Baymard, e as correções de design que ajudam: menos campos, check-out de convidado, limpeza de custos, tratamento de erros e feedback.
Botões de ação flutuantes: quando usar um FAB e como animá-lo
Quando um botão de ação flutuante ajuda, quando dói, um FAB por tela, FABs estendidos e menus FAB, comportamento de rolagem e movimento.
Barras de guias e navegação inferior: regras de design que se sustentam
Como projetar barras de guias e navegação inferior em iOS e Android: 3 a 5 destinos, navegação e não ações, rótulos, emblemas, visibilidade e estados ativos animados.
Feedback tátil na interface móvel: quando e como usá-lo
Quando a sensação ao toque ajuda e quando incomoda: padrões do sistema, consistência, emparelhamento com feedback visual, sensação ao toque clara versus vibrante e permitir que as pessoas os desliguem.
Transições suaves de modo claro e escuro: tokens, CSS e movimento
Como construir uma opção de tema claro/escuro que respeite a configuração do sistema, evite flash durante o carregamento, estilize controles nativos e anime sem prejudicar a acessibilidade.
Projetando para dobráveis: posturas, tamanhos de janelas e gestos
Como projetar aplicativos para telefones dobráveis: layouts dobrados e desdobrados, posturas de mesa e livro, classes de tamanho de janela, continuidade e gestos próximos à dobra.
Layout automático Figma vs Flexbox e grade CSS: fechando a lacuna entre design e código
Como o layout automático Figma é mapeado para o flexbox e grade CSS (direção, lacuna, preenchimento, abraço, preenchimento, quebra) e onde eles diferem, para que os designs sobrevivam à transferência.
Como apresentar UX e design de limpeza de dívidas para líderes de engenharia e produtos
O que é dívida de UX, como inventariar e priorizá-la e como propor limpeza e projeto de refatoradores de sistema em termos de financiamento dos líderes: risco, custo e receita.
Medindo o ROI de UX: conectando o trabalho de design aos resultados de negócios
Uma maneira prática de estimar o retorno do trabalho de UX: compare uma métrica de UX, escolha um KPI de negócios, converta a mudança e relate-a de forma responsável com suposições.
Estudos de caso de portfólio UX que se destacam (além do modelo Bootcamp)
Como escrever estudos de caso de UX que os gerentes de contratação desejam: o problema, sua função e restrições, o meio confuso, compensações e resultados, em vez de um modelo de telas finais.
Micro-frontends e desvio do sistema de design: mantendo a interface do usuário consistente entre as equipes
Como as equipes que usam microfrontends mantêm uma UI consistente: tokens e componentes compartilhados como pacotes versionados, isolamento CSS, políticas de atualização e verificações de regressão visual.
Sobrecarga de notificação: criando alertas que as pessoas não desligam
Como criar notificações que as pessoas valorizam: pedir permissão no momento certo, níveis de interrupção, lotes, centros de notificação no aplicativo e controles fáceis.
UX Swipe-to-Action: Tornando os gestos ocultos detectáveis e seguros
Como projetar ações de deslizar em listas: significantes, limites, confirmações de deslizamento completo, desfazer, acessibilidade e por que deslizar nunca deve ser a única maneira.
Melhores ferramentas de animação para equipes React Native e Flutter em 2026
Reanimated, APIs de animação de Flutter, Lottie, Rive e ExodeUI comparados para React Native e Flutter: o que cada um faz, quem escreve o movimento e quando usá-lo.
Renderização nítida de tela em telas de alto DPI e Retina
Por que os gráficos da tela ficam borrados em telas Retina e de alto DPI e como corrigir isso com devicePixelRatio, incluindo manipulação de redimensionamento e limites de desempenho.
Como a animação afeta os principais sinais vitais da Web (LCP, INP e CLS)
Como as animações e os tempos de execução das animações afetam LCP, INP e CLS, e maneiras práticas de manter o movimento rico sem prejudicar o Core Web Vitals.
Medidores de força de senha que realmente ajudam: orientação UX e NIST
Como projetar campos de senha e medidores de força que sigam as orientações atuais do NIST: comprimento sobre símbolos, listas de bloqueio, gerenciadores de colagem e senha e feedback claro.
Estados de foco acessíveis: projetando o foco visível do teclado
Como projetar o foco visível do teclado que atenda ao WCAG 2.2: o que 2.4.7 e 2.4.13 exigem, como :focus-visible funciona e dicas de design para anéis de foco.
UX de arrastar e soltar: significantes, feedback e alternativas acessíveis
Como projetar o recurso de arrastar e soltar que as pessoas podem descobrir e usar: agarrar significantes, levantar e visualizar feedback, zonas para soltar, física e a alternativa sem arrastar que o WCAG 2.2 exige.
Telas de esqueleto: quando usá-las em vez de spinners
O que são telas de esqueleto, quando elas vencem os spinners, como projetá-las para que correspondam ao conteúdo real e como animá-las sem prejudicar o desempenho ou a acessibilidade.
Como criar mensagens de erro que reduzam a frustração
Como projetar estados de erro dos quais as pessoas podem se recuperar: posicionamento, tempo, redação, preservação de entrada, acessibilidade e movimento, com base em pesquisas de usabilidade.
Como configurar o servidor ExodeUI MCP em Cursor
Configuração passo a passo para o servidor ExodeUI MCP em Cursor (e Claude Code): a entrada mcp.json, verificação das ferramentas, primeiros prompts e revisão segura.
Controlando entradas da máquina de estado ExodeUI do estado React
Um guia prático para reproduzir um arquivo ExodeUI em React com o pacote exodeui: configurando entradas booleanas, numéricas e de acionamento do estado React e manipulação de eventos.
Cavalry vs ExodeUI: gráficos em movimento vs tempos de execução da interface de produção
Cavalry é um software processual de gráficos em movimento 2D; ExodeUI é para interface de usuário interativa fornecida em aplicativos. O que cada um faz, o que produz e quando usar ambos.
De Flash a Lottie às máquinas de estado: a evolução da animação vetorial da Web
Como a animação vetorial da web mudou de Flash e ActionScript para as exportações After Effects de Lottie e, em seguida, para tempos de execução de máquina de estado, e o que cada etapa mudou.
Carregadores GIF versus animação vetorial: por que as equipes estão substituindo GIFs animados na interface do usuário
Por que GIFs animados não são adequados para carregadores de UI e ícones, o que usar em vez disso (CSS, SVG, Lottie, vídeo, tempos de execução baseados em estado) e como escolher.
Flinto, Haiku e Origami: a lacuna da prototipagem interativa e o que a preenche
Flinto e Origami são apenas para Mac, o código de Haiku Animator está no GitHub e InVision desapareceu. O que aconteceu com as ferramentas de prototipagem interativa e o que as substitui agora.
InVision acabou: o que substitui seus protótipos, DSM e fluxos de trabalho
InVision encerrou seus serviços de colaboração de design em 31 de dezembro de 2024. Aqui está o que substituiu seus protótipos, gerenciador de sistema de design e quadros brancos, e como seguir em frente.
Alternativas Principle para usuários de Windows e Linux em 2026
Principle só funciona no Mac. Essas são alternativas realistas para designers em Windows e Linux, desde prototipagem de navegador até tempos de execução interativos.
Descontinuando componentes do sistema de design sem interromper as equipes de produto
Como implementar mudanças inovadoras no sistema de design em aplicativos grandes: anunciar, descontinuar, migrar com codemods e remover, usando controle de versão semântico e rastreamento de uso.
O retorno tátil: profundidade, vidro e feedback físico na interface moderna
Por que a profundidade, a translucidez e o movimento físico estão de volta ao design da interface do usuário após o design plano, o que o Liquid Glass e o Material 3 Expressive da Apple mudaram e como mantê-los utilizáveis.
Além do assistente de várias etapas: integração com listas de verificação e ajuda contextual
Quando um assistente passo a passo está certo, por que longos tours de integração são ignorados e como as listas de verificação e o contexto ajudam a fazer com que as pessoas valorizem mais rapidamente.
Densidade de informações em SaaS B2B: projetando painéis para usuários avançados e novatos
Como projetar painéis e tabelas B2B densos que os especialistas possam verificar rapidamente sem sobrecarregar os novos usuários: modos de densidade, hierarquia, divulgação progressiva.
Paletas de comando versus navegação aninhada: quando Cmd + K supera a barra lateral
Em que paletas de comandos são boas, onde elas falham e como projetar uma junto com a navegação: pesquisa, correspondência difusa, atalhos e capacidade de descoberta.
Desfazer em vez de caixas de diálogo de confirmação: projetando uma interface de usuário menos disruptiva
Por que a rotina "Tem certeza?" as caixas de diálogo falham, quando uma confirmação ainda está correta e como criar notificações de desfazer que sejam claras, acessíveis e seguras.
Arquitetura de token de design semântico: tokens globais, semânticos e de componentes
Como estruturar tokens de design em três níveis, suportar temas e múltiplas marcas e enviá-los para a web, iOS e Android usando o formato W3C DTCG.
Mesmice de IA: mantendo a personalidade da marca quando a IA gera sua IU
Por que os geradores de UI UI produzem interfaces semelhantes e maneiras práticas de manter uma identidade distinta: tipografia, cor, layout, movimento, ilustração e voz.
Movimento acessível: projetando para preferir movimento reduzido sem perder o significado
Como projetar um movimento que respeite as configurações de movimento reduzido e distúrbios vestibulares: o que o WCAG exige, o que remover, o que manter e como testar.
MCP para designers: conectando Figma, tokens e código a Claude e Cursor
O que o Model Context Protocol significa para designers, quais ferramentas de design possuem servidores MCP, como conectá-los a Claude Code e Cursor e o que observar.
Protetores de UI generativos: projetando de acordo com a intenção, sem quebrar seu sistema de design
Como a UX muda quando a IA constrói a interface dinamicamente e como estruturar componentes, tokens e verificações para que a UI gerada permaneça acessível e dentro da marca.
Estados da interface do usuário agente: como mostrar o pensamento da IA, as chamadas de ferramentas e o progresso
Como projetar os estados de execução de um agente de IA: recebido, pensando, chamadas de ferramenta, streaming, concluído, interrompido e com falha. Padrões, tempo e exemplos.
Respostas rápidas
Todas as perguntas- Como a IA é usada na pesquisa de UX?
- Como você projeta uma IU de chatbot de IA?
- Como você projeta UX para produtos de IA?
- Quais são os princípios do design de UI?
- Qual é o processo de design UX?
- Qual é a diferença entre wireframe, mockup e protótipo?
- O que é design de interação?
- O que é um estado vazio em UX?
- Como deve funcionar um estado de carregamento?
- O que são estados da IU?
- Quais ferramentas de design possuem um servidor MCP?
- O que é um sistema de design?
- Como você projeta UI com IA?
- A IA pode substituir os designers de UI?
- Por que o design UX é importante?
- O que é design de IU?
- Qual é a diferença entre UI e UX?
- Qual software os designers de UI usam para animação?
- Existe uma ferramenta online gratuita de animação de interface do usuário?
- Qual é a melhor alternativa Lottie para Flutter?
- O Adobe Animate foi descontinuado?
- Os agentes de IA podem escrever animações de UI de nível de produção?
- Como você corrige problemas de desempenho do Lottie e consumo de bateria no celular?
- O Rive é gratuito para uso comercial?
- Por que as animações de primavera são melhores do que as transições cúbicas-bézier?
- O que é a animação Tencent PAG e como ela se compara ao Lottie?
- Como você conecta agentes de IA ao movimento da UI usando o Model Context Protocol (MCP)?
- Qual é o melhor substituto moderno para Adobe Animate e Flash?
- Como você converte animações de protótipo Figma em código de produção React?
- Qual é a diferença entre Rive, Lottie e ExodeUI?
- Qual é a melhor alternativa ao Rive em 2026?
- Como funcionam as animações de primavera em SwiftUI?
- O que são tokens de movimento e como funcionam em sistemas de design?
- O ExodeUI pode ser usado no React Native?
- Qual é a diferença entre Figma Smart Animate e física de primavera?
- ExodeUI é melhor que Rive?
- O que é um ambiente de desenvolvimento de movimento?