Como ler este guia
Hierarquia visual
Hierarquia visual e a ordem de importancia que a interface comunica. Ela aparece em tamanho, peso tipografico, cor, espacamento e posicao. Quando a hierarquia e boa, a pessoa bate o olho e entende o que e principal, o que e apoio e qual passo parece mais importante.Grid
Grid e a estrutura invisivel que organiza os blocos da pagina. Nao precisa ser uma grade rigida o tempo todo, mas ela ajuda a alinhar conteudo, manter ritmo e evitar que cada elemento pareca jogado em um lugar aleatorio.Contraste
Contraste e a diferenca visual entre elementos. Pode ser contraste de cor, tamanho, peso ou forma. Sem contraste, tudo compete no mesmo nivel. Com contraste demais, a pagina vira ruido. Bom contraste ajuda a destacar CTA, separar secoes e tornar a leitura menos cansativa.Espaco em branco
Espaco em branco e a area vazia entre blocos, textos e componentes. Nao e desperdicio. E o que permite que cada elemento respire, ganhe contexto e nao concorra com tudo ao redor. Paginas pesadas quase sempre sofrem mais por falta de respiro do que por falta de conteudo.Primeira dobra
Primeira dobra e a parte da tela que aparece antes do primeiro scroll. Ela nao precisa resolver tudo, mas precisa dar direcao. Normalmente e onde a pessoa decide se continua lendo, se volta ou se entra em contato.UI
UI significa interface do usuario. E a camada visual e interativa da experiencia: botoes, campos, cards, menus, estados e sinais visuais.UX
UX significa experiencia do usuario. Nao e so deixar bonito. E fazer a jornada ficar clara, fluida e coerente com a intencao da pessoa. Uma UI bonita com UX ruim ainda atrapalha a conversao.O que observar em qualquer pagina
- Onde meu olho vai primeiro.
- O que esta disputando atencao sem precisar.
- Se existe uma acao principal clara.
- Se os blocos tem respiro suficiente.
- Se a pagina continua clara no celular.