top of page
  • Foto do escritorCH34 Creative

Guia de tendências do design de UI em 2023

A ascensão do design de movimento, paralaxe, imersão, estilos de interface do usuário contrastantes, e muito mais. Algumas tendências permaneceram ou evoluíram e foram trocadas por algo mais específico. Algumas tendências desapareceram para sempre. Veja também algumas tendências antigas que estão ficando em alta de novo.


Dê só uma olhada:




Design de movimento


Superior da esquerda para a direita: Estee Lauder, Apple, Duolingo, Wishes In Words, The Virtual Economy,Wickret

O design de movimento ficou muito comum e você pode vê-lo em todo lugar. De micro-interações a animações complexas, a interface do usuário não é mais algo estática — os usuários esperam que ela “viva e respire” visualmente.


Por causa do Tiktok, Instagram e do movimento constante que os usuários consomem diariamente, a capacidade de atenção das pessoas diminui cada vez mais


Para manter os usuários envolvidos e curiosos, precisamos usar o movimento e tentar colocar um pouco de vida em telas e imagens estáticas para que elas sejam mais imersivas.


Se você usar o Duolingo, verá que a atualização recente deles inclui mais ilustrações animadas e efeitos de transição de tela. A maioria dos componentes de UI é de alguma forma interagindo com o usuário por meio de vários efeitos visuais. Algo animado acontece na tela com qualquer ação do usuário.


Na mais nova atualização do Duolingo, o aplicativo interage com você em quase todos os níveis.

Quando se fala sobre movimento, não dá pra não mencionar o efeito parallax.


Parallax é basicamente um conjunto de diferentes camadas de gráficos, que se movem em diferentes velocidades ao mesmo tempo. Isso cria um efeito muito legal e agradável aos olhos, como se o conteúdo tivesse uma profundidade real enquanto tudo é colocado em uma dimensão.


O parallax usa a base simples de mover os elementos mais próximos mais rápido do que os da parte de trás. É exatamente assim que acontece na vida real, quando você está dirigindo e olhando pela janela do carro em uma cordilheira distante.

A Midwam usou a biblioteca GSAP para criar seu site.

Essas animações podem ser bem impressionantes, mas todas elas precisam ser projetadas primeiro para que possam ser recriadas pelo desenvolvedor. E aqui é onde os designers entram.





Design clean


Superior da esquerda para a direita: Coinbase, Airbnb, Tran Mau Tri Tam, Squareblack, Foh&Boh, Revolut

Ao longo dos anos, o estilo de design mais em alta foi mudando, gradualmente indo para uma abordagem mais simples, mínima e mais clean. Pode ser uma maneira natural para todos os designers mas, entre todas as tendências que ficam ou passam, um design minimalista clean é algo com o qual você nunca vai errar.


Ao usar em diferentes aplicativos e sites, os clean e mínimos geralmente parecem os mais agradáveis e profissionais. Você não precisa seguir todas as tendências para criar um ótimo produto digital moderno.


Site da Apple — o melhor rei do design de interface do usuário à prova de tempo, mínimo e limpo, focado no recurso de produtos. A famosa “grade de aloaria” da Apple é uma tendência agora — você pode identificá-la em muitos sites!


Gradientes suaves multicoloridos



Da esquerda para a direita: Esboço, Gráficos LS, Winamp, Cosmos, Até, Stripe

Gradientes de Aurora, formas e formas de gradiente abstratos, gradientes em botões, cartões ou respingos coloridos e vibrantes de cores usados em fundos com efeitos de parallax - essa tendência ainda parece ser muito forte.

Belo exemplo de uso de gradientes de aurora. Fonte: Clyde

Você também pode identificar gradientes que são colocados no texto, por exemplo, em cabeçalhos, como destaque.

Da esquerda para a direita: Apple, Vercel, Memorisely



Alto Contraste / Monocromático


Do canto superior esquerdo: Uber, Endel, Revolut Business, Homey, Klarna, Dropbox

Você pode identificar fortes elementos contrastantes e, às vezes, até mesmo as seções inteiras em muitos sites e aplicativos, incluindo os maiores players do setor.


Pessoalmente, acho que a razão por trás dessa tendência é semelhante à que mencionei anteriormente neste post — o piscar constante de elementos/superfícies fortemente contrastantes enquanto você rola pela interface pode estimular seu foco.


Também torna a interface bastante acessível graças à boa visibilidade dos elementos e do texto, a menos que você vá longe demais com o contraste e cause desconforto.




UI futurista/cósmico escuro


Superior esquerdo para a direita: GitHub, Zenly, Railway, Linear, Notion AI, Create

A interface do usuário escura evoluiu para algo maior do que apenas uma opção de “modo noturno/escuro” para escolher. Na verdade, mais e mais marcas estão mudando para a versão escura de seus produtos e páginas.


Pessoalmente, acho que pode ser mais fácil chamar a atenção do usuário com a interface do usuário escura, pois é mais incomum e intrigante do que a aparência típica de "conteúdo no fundo branco", e cria uma vibração futurista ou às vezes até "cocêmica".


O site da Linear é um ótimo exemplo da interface de usuário escura. Também está cheio de elementos vítremorfos. Fonte: Linear

Imitação de materiais da vida real


Superior da esquerda para a direita: Solana, Carta, Thoughtlab, Youtube Music, Next.js, Mural

Já temos glamorfismo de vidro, morfismo argiloso, metal/cromofismo etc. Também notei que elementos com efeito de cristal ou semelhante a pérolas estão se tornando uma coisa e tanto. Eu acho que é razoável colocá-lo sob um rótulo - parece que a imitação geral de materiais da vida real é uma tendência forte nos últimos anos, e não está chegando ao fim tão cedo.


Observação importante a ser adicionada aqui: o glamorfismo parece estar em ascensão. Agora você pode testemunhar facilmente efeitos vítreos em muitos sites, como barras de navegação, botões ou elementos decorativos.


A carta realmente gosta de seus cristais. Além disso, observe o forte efeito vírfico na barra de navegação. Fonte: Carta


Tipografia gigantesca


Superior esquerdo para a direita: Apple, Heart Aerospace, Stand With Ukraine, Increase, Gumroad, Instagram

Uma tendência muito visível e forte hoje em dia. Usado principalmente em sites devido às maiores resoluções de tela, para alcançar uma vibração mínima/brutal/crua. Muitas vezes com fotos em tela cheia e animações visíveis.


Parece realmente deslumbrante! Crédito: Heart Aerospace

A tipografia geométrica sem serifa não vai a lugar nenhum e sempre será uma escolha segura e funcional para interfaces.


Temos tantas fontes ótimas agora. De fontes gratuitas como Google Fonts ou Font Share — a muitas famílias de fontes incríveis e premium como Gilroy, Circular Std, Mont, Axiforma, Nexa, Galano.


Encorajo você a considerar investir em algumas dessas famílias profissionais, para levar seus projetos para o próximo nível — vale a pena o custo.





bottom of page