5 Dicas de UI Que Eu Gostaria de Saber Quando Comecei · arthurbarbosa

Mas por que se preocupar com UI?

No ambito dos softweres com um produto, nunca podemos garantir que, ao terminar de rolar sua landing page, o cliente clicará no botão de compra.

Mas é possivel afirmar que 100% dos clientes verão sua landing page.

Uma boa interface de usuário transmite credibilidade, confiança e profissionalismo
– características decisivas na hora de o cliente decidir se vai ou não clicar no botão de compra.

Vou compartilhar algumas dicas que aprendi ao longo de meus projetos 😉

Estou utilizando Tailwind CSS, mas você também pode aplicar essas práticas no CSS puro.

Vamos usar o seguinte design como ponto de partida e aplicar melhorias:

1. O espaçamento correto

É importante que conteúdos relacionados estejam mais próximos uns dos outros. Gosto de utilizar um multiplicador para guiar os espaçamentos:

1x para conteudos relacionados
2x para nao relacionados.

Podemos aplicar:

mt-6 no parágrafo
mt-12 no botão

2. O tamanho do texto

É importante que a headline chame atençao.
Vamos usar:

text-6xl font-extrabold

3. O espaçamento entre as letras

Um espaçamento menor entre as letras transmite uma ideia mais refinada de branding.
Portanto:

tracking-tight

4. O tamanho do paragrafo

Aqui, temos uma lição essencial: evite textos longos no seu hero; as pessoas perdem o interesse rapidamente!

Se o parágrafo tiver mais de 4 linhas, prefira o alinhamento à esquerda para facilitar a leitura.

text-left

Sobre o comprimento das linhas, tente manter entre 50 a 75 caracteres por linha.

Usei max-w-2xl na div do conteúdo.

No caso deste exemplo, mantive o texto centralizado e reduzi o conteúdo:

Dica bônus:
Evite misturar alinhamentos. Se optar pelo alinhamento centralizado, aplique-o
tanto ao header quanto ao parágrafo. O mesmo vale para o alinhamento à esquerda.

5. Torne responsivo

Você não quer que sua headline fique desorganizada em telas menores, certo?
A solução é torná-la responsiva:

text-4xl md:text-6xl

Antes e depois:

Espero que essas dicas ajudem! A interface de usuário pode ser decisiva para transmitir profissionalismo e conquistar a confiança dos seus clientes. 🚀

Parabéns pelas dicas, gostei de algumas, de outras nem tanto, porque, assim como a arte, eu entendo que a parte de UI é bem subjetiva em relação à percepção do usuário.

Eu, por exemplo, não gosto desses títulos informativos que ocupam metade da tela, ou que ocupam grande parte do conteúdo somente pelo fato de, artisticamente, isso ser uma forma de comunicação e chamada de atenção do usuário.

Eu acredito que o posicionamento correto, pequenos elementos chamativos e o conteúdo tem que sobressair a apresentação em si. Claro que a apresentação é a primeira coisa que vai ser avaliada, mas eu venho de uma área de sistemas, então eu ocupo pouca parte de site de UI ou UX, porque trabalho com as coisas burocráticas, regras de negócio, então eu não estou tão imerso nessa parte artística e de ter que cativar o usuário pelo visual ao invés de ser pela funcionalidade.

Eu acredito que a teoria é um bom caminho para as boas práticas, desde que observado seu público alvo.

Parabéns pelo artigo. Fico no aguardo de mais dicas.