Aprenda
Início do módulo

UI/UX para quem programa

Gestalt, cor, tipografia e hierarquia visual — por que uma tela funciona, e como fugir do visual genérico de IA.

16 lições244 min no total0% concluído
Começar trilha →

Fundamentos

O suficiente pra usar na prática sem se machucar.

8 lições · 114 min
  1. 1Por que design importa pra quem programaNão é sobre deixar bonito — é sobre reduzir o esforço que a pessoa gasta pra entender sua tela.12 min
  2. 2Hierarquia visual e espaço em brancoSe tudo na tela grita do mesmo jeito, nada é ouvido — o olho precisa saber por onde começar.14 min
  3. 3Teoria das cores na prática: a regra 60-30-10Uma tela com cinco cores brigando entre si não parece 'colorida' — parece cansativa.14 min
  4. 4Tipografia: pares de fonte e quando usar cada umaA fonte 'bonita' errada comunica a mensagem errada — serifada e sans-serif não são intercambiáveis.14 min
  5. 5Princípios de Gestalt aplicados a interfaceO cérebro agrupa elementos automaticamente, com ou sem sua permissão — é melhor saber como.16 min
  6. 6Componentes que você já usa todo dia: anatomia de um bom exemplarBotão, input, card, modal — você já codou cem vezes, mas talvez nunca tenha parado pra ver o que separa um bom exemplar de um ruim.16 min
  7. 7Consistência e design tokensSe cada tela inventa uma cor e um espaçamento novo, quem usa precisa reaprender o produto a cada clique.14 min
  8. 8Estados e feedback visualUm botão que não muda de cara enquanto processa engana a pessoa a clicar de novo — e ela clica mesmo.14 min

Intermediário

O que fundamentos deixou em aberto — produção, performance, casos reais.

8 lições · 130 min
  1. 1Evitando o visual genérico de IA (AI slop)Gradiente roxo-azul, emoji em botão, glassmorphism em tudo — um punhado de atalhos que virou sinônimo de 'ninguém pensou nisso de verdade'.18 min
  2. 2Grid e alinhamentoNinguém consegue apontar o pixel torto, mas todo mundo sente que 'algo está errado' numa tela desalinhada.14 min
  3. 3Contraste e acessibilidade visualUm texto cinza-claro sobre branco pode parecer elegante pra você e ser ilegível pra uma parte real de quem usa a tela.16 min
  4. 4Microinterações com propósitoUma animação bonita e lenta não é sinal de cuidado — é quase sempre sinal de que ninguém testou a velocidade.14 min
  5. 5Copywriting de interface (microcopy)'Erro ocorreu' não ajuda ninguém — o texto de uma interface também é uma decisão de design, não só de conteúdo.14 min
  6. 6Dark mode de verdadeInverter as cores não é dark mode — é recalcular contraste e elevação do zero.16 min
  7. 7Mobile-first e breakpoints pensando em conteúdoDesenhar pro espaço pequeno primeiro não é 'trabalho extra' — é o que te obriga a decidir o que realmente importa.14 min
  8. 8Projeto guiado: revisando uma tela ruimPega uma tela real de cadastro cheia de problemas e aplica, um a um, os quinze princípios anteriores da trilha.24 min