Aprenda / UI/UX para quem programa

FundamentosAula 1 de 1612 min0% da trilha

Por que design importa pra quem programa

Não é sobre deixar bonito — é sobre reduzir o esforço que a pessoa gasta pra entender sua tela.

Você termina uma funcionalidade, o código está limpo, os testes passam, e ainda assim vem o pedido: "muda um monte de coisa aqui, não sei explicar bem o quê". Essa frustração — de quem programou e de quem pediu — quase sempre não é sobre o código. É sobre a tela exigir esforço demais de quem vai usá-la, e ninguém no time ter vocabulário pra apontar isso com precisão.

UI, UX e o que fica no meio

UI (interface) é o que a pessoa vê e toca: botão, cor, espaçamento, fonte. UX (experiência) é o resultado disso tudo: será que ela entende o que fazer, decide com confiança e completa a tarefa sem travar? Dá pra ter uma UI bonita e uma UX ruim — uma tela visualmente caprichada onde ninguém acha o botão de salvar é exatamente isso.

O verdadeiro custo: esforço cognitivo

Toda vez que alguém olha pra uma tela, o cérebro faz perguntas silenciosas: "o que isso é? o que eu faço primeiro? isso é clicável?". Cada elemento mal posicionado, cada cor sem propósito, cada texto ambíguo é mais uma pergunta que a pessoa precisa resolver antes de conseguir agir. Boas decisões de design não são enfeite — são a remoção dessas perguntas. Uma tela "boa" é uma tela que exige menos raciocínio pra ser entendida, não uma tela mais decorada.

Por que isso importa especificamente pra quem programa

Você não precisa virar designer, mas entender os princípios por trás das decisões visuais muda três coisas no seu dia a dia:

Primeiro, você evita retrabalho — quando entende por que um layout foi feito de um jeito, consegue prever se uma variação sua (um card a mais, um texto mais longo) vai quebrar a lógica visual antes de codar e descobrir depois. Segundo, você discute com argumento em vez de gosto — em vez de "acho que fica melhor assim", você aponta "esse botão não tem contraste suficiente com o fundo" ou "esses dois elementos parecem agrupados, mas não são relacionados". Terceiro, você toma pequenas decisões sozinho sem travar esperando um designer — ordem de campos num formulário, texto de um estado vazio, espaçamento de um card novo.

Design não é gosto pessoal disfarçado

A parte mais importante desta trilha: boa parte do que parece "preferência estética" tem uma explicação perceptiva ou cognitiva por trás, testável e nomeada — como o olho humano agrupa elementos (Gestalt), como contraste de cor afeta legibilidade, por que memória de curto prazo limita quantas opções alguém processa por vez. Isso não significa que toda regra de design é lei absoluta — várias são convenções fortes com exceções legítimas, e esta trilha vai deixar claro quando é uma coisa ou outra.

Exercício

Duas telas de cadastro fazem exatamente a mesma coisa. Na primeira, todos os campos têm o mesmo tamanho de fonte, a mesma cor, e o botão de enviar tem a mesma aparência dos campos de texto. Na segunda, o título é visivelmente maior, os campos obrigatórios têm um indicador diferente, e o botão de enviar se destaca em cor e peso dos demais elementos. Sem pensar em "gosto", explique em uma frase por que a segunda exige menos esforço cognitivo de quem preenche.

Quiz rápido

O que significa dizer que um design 'reduz o esforço cognitivo' de quem usa a tela?
Por que entender princípios básicos de design ajuda um dev a evitar retrabalho?