🚀 UI Design: As 5 principais práticas que toda UI deve possuir 🚀

Hey galera! 😎 Sou Bruno Kobashigawa (Koba), o Product Designer da Input Tecnologia.

Hoje, vou te contar as 5 principais práticas para uma interface de usuário arrasadora e super atraente, e ainda vou incluir as heurísticas de Nielsen para turbinar tudo!

Photo by charlesdeluvio on Unsplash

Componentes

Pensa comigo, componentes são como os tijolinhos que constroem a magia da interface! 🧱 Juntam formas, textos e imagens para formar a base sólida de uma UI top!

Exemplo de visibilidade do status do sistema com um card de viagem em andamento

Com a Heurística de “Visibilidade do Status do Sistema”, garanta que os componentes mostrem claramente o que está acontecendo, para que os usuários nunca fiquem perdidos.

Tipografia

Vamos falar sério, a tipografia é o segredo do sucesso! 💯 Escolher a fonte certa é como dar aquela identidade visual que conquista os corações! Então, bora escolher as fontes que casem com o estilo do projeto!

Imagens retiradas do MVP do meu Aplicativo “TôChegando” (Para saber mais, acesse o link no final deste artigo)

E não se esqueça da Heurística “Controle e Liberdade do Usuário”, dando opções para personalizar a tipografia conforme a preferência de cada um!

Hierarquia Visual

Pensa comigo, é como guiar os amigos numa trilha incrível! A hierarquia visual mostra onde estão os tesouros da UI, destacando o que é importante e organizando tudo de forma mega clara!

Exemplo de hierarquia visual com um card de identificação de perfil

Com a Heurística “Consistência e Padrões”, mantenha essa hierarquia em todas as páginas, para que os usuários se sintam em casa!

Contraste

Ninguém merece se perder no universo da UI, né? 🌌 Então, garanta contraste daqueles de cair o queixo! Cores que se destacam fazem a leitura ser molezinha e agradam os olhos de todos! 😍

Imagens retiradas do MVP do meu Aplicativo “TôChegando” (Para saber mais, acesse o link no final deste artigo)

Com a Heurística “Reconhecimento ao Invés de Lembrança”, faça com que as informações essenciais estejam sempre visíveis e bem diferenciadas!

Sombras

Aí é o truque para deixar a UI com aquele ar moderno e sedutor! 😏 As sombras dão aquele charme e encanto, mas use com sabedoria! Deixe tudo sutil e leve, e a magia acontece! ✨

Exemplo de sombreamento com um card de histórico de viagens

Seguindo a Heurística “Estética e Design Minimalista”, deixe as sombras adicionarem aquele toque especial sem poluir a interface.

Opinião do Autor

Eu sempre utilizo esse padrão de sombras e meus designs aparentam mais clean:

X = 0

Y = 4

D = 4

Color: #000000 — 5%

Conclusão

Na hora de criar sua interface, não esquece dessas práticas e das heurísticas de Nielsen!

Vai ser sucesso garantido e a experiência do usuário será sensacional!

Treinador muito feliz!

Espero que tenha curtido essa viagem conosco e obrigado por embarcar nessa jornada! 🙌

Ficou curioso sobre o “TôChegando”? 🤩

Acesse o link abaixo para descobrir:

TÔCHEGANDO | Linktree

Se precisar de mais dicas ou mais insights, é só me chamar! 😉

Abraços!