Todos sabemos da importância de um bom design de UI para que um negócio se torne um grande sucesso.
Por grande sucesso, quero dizer realmente GRANDE, de modo que você possa aumentar a taxa de conversão do seu site em 200% graças às melhorias no design da interface de usuário, como sugere este relatório.
Mas que exatamente é um ótimo design de UI e como um designer pode criar a interface ideal?
Neste artigo, vou tentar explicar o que torna um design de interface de usuário realmente bom, com exemplos em vários formatos e de empresas diferentes.
Foco no usuário
Sim, eu sei que soa como afirmar o óbvio, mas às vezes, como designer de UI, você deve verificar as necessidades dos usuários repetidas vezes. Não é uma tarefa única definir o que seus usuários podem querer ver e experimentar enquanto usam seu produto digital ou visitam seu website.
Por exemplo, procure por elementos de design familiares para sua pessoa de usuário. Eles usam o Instagram principalmente? Você pode adotar um design semelhante para seus ícones.
Na verdade, é como você pode construir um design intuitivo de interface intuitiva.
Os usuários procuram por estes três em um design:
- Cumprir a tarefa facilmente
- Não gastar tanto tempo fazendo isso
- Aproveitar a experiência
E, para fornecer cada um deles, é preciso seguir a regra dos KISS.
Não, não tem nada a ver com beijos.
A regra KISS significa “Keep It Simple, Stupid“. Ou seja, “mantenha as coisas simples, tolinho!”
Isto é, não tente acrescentar mais e mais ao seu design se eles não forem necessários.
Um ótimo design de UI transforma o que é complicado em simplicidade e parece estúpido, cobrindo todas as funções complexas que funcionam em segundo plano. Desta forma, ele atende às necessidades dos usuários que mencionei acima. Embora eu me concentre mais na parte do prazer neste artigo, tentarei tocar em alguns aspectos funcionais também.
E se você estiver interessado, confira nosso artigo sobre as maiores tendências de design de UI e UX.
Sem mais delongas, vejamos grandes exemplos que aplicaram essas regras ao seu design ou falharam em alguns pontos…
1. Asana
Do que gostamos?
O Asana é um produto SaaS com um design excepcional. O que o torna notável é principalmente o uso de animações em seu design. Por exemplo, um unicórnio aparece em sua tela para celebrá-lo quando você completa uma tarefa. Não é lindo?
Você se sentiria grato por ser acompanhado por esses personagens animados enquanto trabalha em uma tarefa estressante. É exatamente desta forma que você pode tornar a experiência do usuário mais divertida. Além disso, a ótima UI da Asana é extremamente fácil de usar e não requer quase nenhuma informação prévia.
Por último, mas não menos importante, o design do cartão proporciona uma melhor experiência visual para o usuário.
O que poderia ser melhor?
Devo dizer que mesmo que seu design intuitivo o torne um grande produto, ele tem seus problemas.
Como indica um usuário no fórum da comunidade Asana, você precisa abrir cada tarefa para ver se as subtarefas estão sob seu título. Em outras palavras, você não pode ver os detalhes das tarefas sem clicar neles e ver a totalidade da tarefa. Pode haver uma barra lateral para visualizar as subtarefas e seus responsáveis.
Além disso, um problema muito sutil do produto em termos de design é a aparência dos botões de fechamento [X] e [feito] ao mesmo tempo, mesmo que funcionem da mesma forma.
Este é um bom exemplo de apresentação de elementos desnecessários que o afastam do cumprimento da regra dos KISS.
2. Gumroad
Do que gostamos?
O Gumroad decidiu entrar em um novo sistema de projeto a partir de 2021 e foi com ele desde então. Se você não conhece a Gumroad, é um produto de comércio eletrônico para publicação digital, e seu design de interface gráfica é mais do que impressionante. Mas o que é um sistema de design? Um sistema de design é um banco de dados de componentes e guidelines que podem ser combinados em várias outras aplicações e usados várias vezes. A maioria dos grandes aplicativos que você conhece, tais como Dropbox, Google e Mailchimp, o utilizam para eficiência.
A paleta de cores é o que a distingue de outras plataformas de comércio eletrônico.
É como nos anos 80, com suas tonalidades vivas. É chamada Memphis design, e é famosa por suas cores ousadas e contrastantes e formas abstratas. Você pode chamá-lo de retrô ou vintage, mas funciona hoje em dia.
O que poderia ser melhor?
Há muitas pessoas que odiavam o novo projeto da Gumroad.
E há até mesmo um vídeo de torrefação para sua landing page no YouTube.
A principal razão para essa crítica é seu visual desatualizado e seu estilo barulhento. Eu não posso dizer que concordo com eles, pois eu mesmo sou um pouco hipster, talvez. 🤭
Embora eu concorde que não corresponde totalmente ao seu objetivo comercial, ainda estou do lado de esquemas ousados de cores para brilhar entre os outros.
3. Headspace
Do que gostamos?
Em 2023 estamos todos mais abertos à diversidade, e alguns aplicativos móveis parecem estar adaptados a ela também.
Um dos aplicativos mais famosos de bem-estar e atenção, Headspace, ganha meu coração com seu design de UI inclusivo com ferramentas de acessibilidade.
Você também pode mudar a fonte e a cor dos textos dentro do aplicativo, o que é uma grande vantagem.
Mas o mais importante é que o Headspace integra a VUI (interface de voz do usuário) em seu design. É basicamente uma interface de reconhecimento de voz para responder à voz humana e transformar a voz em texto.
O que poderia ser melhor?
Hmm… “Nada” pode ser uma resposta às vezes.
Eu realmente não posso dizer nada de ruim sobre o excelente design de interface de usuário do Headspace, e minha pesquisa também concluiu que ele é inigualável em termos da combinação de interface de usuário e interface de usuário. Talvez você queira conferir este artigo que eu gostei de ler.
4. Hello Monday
Do que gostamos?
O Hello Monday é um estúdio de criação digital, e prova seu sucesso com sua página web.
O uso do espaço branco torna todos os elementos mais cativantes e significativos.
E os cartões interativos fazem o usuário sentir algo, como tocar uma poça e ver os reflexos se moverem.
As ilustrações e desenhos personalizados são uma parte importante de seu design visual e têm uma aparência muito boa. Ela nos proporciona uma experiência especial e única, contrária ao mundo pronto de elementos e imagens de design. Além disso, dá uma vibração genuína para passar mais tempo na página.
O que poderia ser melhor?
Não há nenhuma barra de rolagem no lado direito da página, contra a expectativa. Aparece o ícone de navegação que não serve ao meu objetivo de ver o resto da página rápida e facilmente.
Embora às vezes seja agradável ir contra as convenções de design, não acho que rolar para baixo através do mouse pad seja uma experiência agradável.
5. Dribbble
Do que gostamos?
O Dribbble é um banco de dados vivo e enorme para designers. É por isso que seu design de interface é uma história de sucesso.
Os cartões têm a função de criar uma galeria e ver muitas peças de design maravilhoso ao mesmo tempo.
Também é bom como você pode pesquisar com base em códigos de cores para ver os desenhos com essa cor dominante.
O que poderia ser melhor?
Eu gostaria que os cartões fossem interativos. Por exemplo, eu adoraria ver alguns detalhes do designer ou ler sobre o design quando encontro um cartão com meu cursor.
Os cartões são muito melhor usados quando construídos com o design interativo em mente.
Principais aprendizados
O processo de design de uma UI requer mais do que apenas habilidades de projeto ou ferramentas de projeto. Você pode ser um excelente designer gráfico, mas acabar não satisfazendo os usuários reais. Para evitar isso, o UI design e UX design trabalham juntos em todos os exemplos de sucesso que mencionei neste artigo.
Portanto, concentre-se no usuário enquanto navega pelas inspirações de design.
Perguntas Frequentes
O que é UI design, com exemplos?
Design de interface de usuário, ou simplesmente UI design, é a criação de qualquer elemento visual, interação ou animação em um produto ou uma página web, como a barra lateral e a barra de ferramentas superior do Google Docs. Os botões para clicar, os textos, imagens, barras laterais, layouts e controles deslizantes são alguns elementos de UI design.
Onde posso encontrar bons exemplos de UI design?
O Dribbble é a melhor página web para visualizar toneladas e milhares de exemplos de design de UI. Você pode usar a barra de busca para encontrar bons exemplos baseados em sua indústria ou estilo preferido. Além disso, você pode compartilhar seu portfólio como designer ou contratar designers de primeira linha nesta plataforma. Entretanto, tenha em mente que ela é altamente criticada por não levar em conta o design e a funcionalidade da experiência do usuário. Portanto, esteja ciente disso, e não se esqueça de combinar UI e UX para alcançar melhores soluções.
Além disso, você pode verificar o Awwwards para conferir landing pages com designs de UI excelentes e premiados pelos votos de designers e usuários em geral.
