• Home

    Escolha seu Plano

    Carreiras Alura

    Evolua com profundidade técnica, direção clara e aplicação prática.

    Jornadas guiadas do básico ao avançado com checkpoints práticos, desenhadas para quem busca profundidade e protagonismo técnico.

    Iniciante

    Comece do zero com uma trilha clara e progressiva.

    Fundamentos práticos para dar os primeiros passos com segurança e construir uma base sólida.

    Intermediário

    Continue sua evolução com cursos que conectam fundamentos, ferramentas e prática profissional. Ganhe autonomia, e avance para projetos mais completos.

    Avançado

    Aprofunde temas técnicos e estratégicos para enfrentar desafios mais complexos. Explore boas práticas, arquitetura, performance com visão profissional.

    Cursos

    Ver mais cursos de Back-end
    • Pensamento computacional: fundamentos da computação e lógica de programação
    • Lógica de programação: mergulhe em programação com JavaScript
    • DDD: fundamentos do design orientado a domínio
    • ASP.NET: autenticação e autorização em APIs e aplicações web
    • Microsserviços: migração de monólitos e modularização

    Cursos

    Ver mais cursos de Dados
    • Python para Dados: primeiros passos
    • Excel: domine o editor de planilhas
    • Engenharia de Dados: Orquestração de Pipelines com Apache Airflow
    • Power BI Desktop: construindo meu primeiro dashboard
    • Governança e Arquitetura de Dados

    Cursos

    Ver mais cursos de Inteligência Artificial
    • IA: Explorando o Potencial da Inteligência Artificial Generativa
    • Engenharia de Prompt: Criando Prompts Eficazes para IA Generativa
    • Claude para Análise de Dados: prompts, integrações e automações
    • Agno: criando agentes e sistemas multiagente
    • Engenharia de software na era da IA: segurança de aplicações com agentes, MCPs e código gerado por IA

    Cursos

    Ver mais cursos de Front-end
    • HTML e CSS: ambiente, estrutura e estilo
    • React: realizando testes avançados com Jest e Testing Library
    • React: integrando TypeScript em projetos
    • JavaScript: aprendendo a programar
    • React: aplicando arquiteturas de Micro frontends

    Cursos

    Ver mais cursos de DevOps
    • Sistema Operacional Linux: fundamentos e administração prática
    • Containers e Docker: empacotamento, isolamento e gestão
    • Redes: dos conceitos iniciais à criação de uma intranet
    • Linux: gerenciando diretórios, arquivos, permissões e processos
    • Cibersegurança: Fundamentos e práticas integradas

    Cursos

    Ver mais cursos de UX & Design
    • UX Research: mapeando a experiência da pessoa usuária
    • UX/UI Design: Entregando produtos digitais com IA
    • UI Design: Prototipação e animações interativas
    • Figma: Conhecendo o programa
    • Product Design: métricas e ciclo de vida do produto

    Cursos

    Ver mais cursos de Gestão & Negócios
    • Canva: Criação de landing pages e e-mail marketing
    • Agilidade: como ela pode ajudar a criar um time de alta performance
    • Google Analytics 4: Extrair insights e configurar eventos
    • Management 3.0: gerencie o ambiente, não as pessoas
    • Automação de processos com n8n: Inteligência de dados para Marketing

    Cursos

    Ver mais cursos de Mobile
    • React Native: Estilização e Layouts com Flexbox e StyleSheet
    • Flutter: Graphql e suporte offline
    • Android com Gemini: Trabalhando com textos e imagens na IA
    • Dart: trabalhando com orientação a objetos
    • React Native: Dominando Listas com FlatList e ScrollView

    Carreiras

    Ver mais carreiras
    • Especialista em IA
    • Engenharia de IA
    • Ai native software engineering
    • Arquitetura de Soluções com IA
    • AI Product Design
    • Engenharia de Machine Learning
    • Desenvolvimento Front-End React
    • Engenharia de Dados
    • Cloud Security
    • Social Media Marketing
    • Engenharia de Agentes de IA

    Cursos

    • Engenharia de Prompt: Prompts Eficazes para IA Generativa
    • Claude Code: Criando sua Primeira Aplicação
    • Python: Crie sua Primeira Aplicação
    • Git e GitHub: Compartilhando e Colaborando
    • N8N: Fluxos de Trabalho Avançados

    Cursos

    • Copilot Studio: Solução Multiagentes
    • Padrões de API HTTP e Modelagem de APIs
    • Python para Análise de Dados com SQL
    • Docker: Criando e Gerenciando Containers
    • Design com IA: Otimizando o Processo Criativo

    Cursos

    • Model Context Protocol (MCP)
    • Spec-Driven Development: Dev Assistido por Agentes
    • Arquitetura de Sistemas Distribuídos com Java
    • Governança de Modelos e Reprodutibilidade
    • Pentest: Vulnerabilidades em Aplicações Web

    Escolha seu Plano

    Skills & Go

    O Skills & Go é para Tech Leads, Product Managers, estrategistas e early adopters que transformam ideias em soluções de alto impacto. Em cursos ao vivo e 100% online, você domina a nova era da IA em tempo real.

    Aulas ao vivo

    Saiba mais
    • Agentic Engineering: orquestre múltiplos agentes com confiabilidade
    • Building AI Products: transforme ideias em produtos reais com IA
    • AI Data Strategy: transforme dados em decisões estratégicas com IA

    Escolha seu Plano

    Eventos Alura

    Nossos eventos são pensados para quem quer estar à frente das mudanças em tecnologia, IA e inovação. Em experiências presenciais, você acompanha tendências e se conecta com especialistas que estão moldando o futuro.

    Próximos eventos

    • Imersão Engenharia de Software: Dev na Era da IA
    • IA Conference
    • Alura Signals
  • Talent Lab
  • IA

    Escolha seu Plano

    Conteúdos gratuitos

    Explore conteúdos gratuitos para aprender tecnologia no seu ritmo. Encontre artigos com conteúdos técnicos para aprender na prática, notícias para acompanhar as principais tendências do mercado e o Alura Labs, com análises e reflexões de especialistas sobre tecnologia, IA e carreira.

    Conteúdos gratuitos

    • Artigos
    • Notícias
    • Alura Labs
  • Para Empresas
Ver planos
Links principais
  • Planos e Promoções
  • Links complementares do menu mobile
  • Talent lab
  • Inteligência Artificial
  • Pós Graduações
  • Para Empresas
  • Sobre a Alura
  • Grupo Alun
  • Entrar
    • Home
    • Carreiras
    • Skills & Go
    • Talent Lab
    • Inteligência Artificial
    • Pós Graduações
    • Artigos
    • Sobre a Alura
    • Grupo Alun
    LoginContato
    • LinkedIn
    • Instagram
    • YouTube
    1. Página inicial
    2. UX & Design
    3. 10 tendências de UI Design para 2022

    10 tendências de UI Design para 2022

    6 min6 minutos de leitura

    6 min6 minutos de leitura

    Publicado: 03/01/2022

    Última atualização: 26/01/2026

    1. Conclusão

    O ano de 2022 mal chegou e já está recheado de novidades para todos os lados, e como já é de praxe para o universo do design, as novas tendências focadas em User Interface apareceram para começarmos a produzir interfaces que sejam cada vez mais atualizadas para os nossos usuários.

    Neste artigo, vamos conhecer 10 tendências que vão ser cada vez mais utilizadas neste ano.

    Confira quais são elas!

    1. Sites "one-page"

    Banner do Guia Tático Alura sobre carreira em tecnologia, destacando o mapa da carreira tech. A imagem convida a explorar diferentes caminhos profissionais, comparar possibilidades e encontrar a próxima fase da carreira na área de tecnologia, com chamada “Explore o mapa”.

    Já ouviu a frase “menos é mais”? Pois é, não é de hoje que falamos de simplicidade em interfaces digitais, e ela reflete muito na jornada do usuário para alcançar um determinado objetivo. Por isso, nada melhor do que sites com uma única página para concretizar essa simplicidade e poupar muito tempo.

    Se você tem um pequeno negócio, quer divulgar algum conteúdo específico ou simplesmente compartilhar seu portfólio, nada melhor do que descomplicar a vida do usuário do seu produto ou serviço e alocar todas as informações numa única página.

    Interface fictícia de um site one-page.Todas as informações estão reunidas numa única página como serviços, busca e valores.

    2. Telas divididas

    Costumamos ver muito desse design de telas divididas em páginas de login ou de cadastro, como na página de registro de conta do Dribbble, por exemplo. Como todo bom design que vem dando certo, a tendência é continuar utilizando e aprimorá-lo.

    A grande jogada dessa tendência é permitir que você traga conteúdos de mesma importância para o campo de visão do usuário, sem precisar criar novas seções que fiquem abaixo, com menos relevância. Além disso, esse modelo de página permite brincar com contrastes de cor e ilustrações no centro.

    Página de cadastro do Dribbble. No lado esquerdo, uma mensagem chamativa da plataforma, e do direito, o formulário de cadastro de conta.

    Página de cadastro do Dribbble

    3. Glassmorfismo

    Outra tendência que avançará em 2022 é o glassmorfismo. Essa é uma tendência que começou a surgir logo após o neomorfismo (que não deu certo como tendência), e que esteve presente em algumas interfaces no ano de 2021.

    Basicamente, o glassmorfismo se trata de representar algumas formas na interface com um efeito de vidro, reduzindo a opacidade do elemento e desfocando quaisquer outros elementos que estão ao fundo dessa forma, criando um aspecto visual bem atraente. Sua relevância passou a ser muito maior com a atualização do Windows 11 e do macOS Big Sur, que trouxeram esse elemento com muito destaque.

    Interface de um site fictício, mostrando cartões de crédito ilustrados no estilo glassmorfismo.

    4. Realidade virtual

    Depois que Mark Zuckerberg anunciou a Meta, que antes se chamava Facebook, a palavra “metaverso” se tornou extremamente popular, o que começou a abrir portas para muitas empresas já existentes expandirem, e também para que novas empresas surgissem nesse modelo.

    Quando falamos da construção de uma interface para o usuário, dentro desse contexto de realidade virtual, não podemos deixar escapar a nossa criatividade para unir o melhor do mundo real com o mundo digital e expandir cada vez mais as possibilidades.

    Página inicial do site da Oculus, mostrando duas pessoas utilizando óculos e imersas em  uma realidade virtual.

    Página inicial do site da Oculus

    5. Elementos 3D

    Não é de hoje que elementos em três dimensões são usados em interface, substituindo fotos reais. Porém, mais do que simplesmente pegar um objeto e representá-lo tridimensionalmente, é utilizar de alguns recursos em ilustrações para trazer o aspecto da tendência.

    Detalhes como sombreamento, causando profundidade, e animações suaves, como uma flutuação ou um movimento giratório devagar, colaboram muito para criar esse efeito.

    Interface de um site fictício, com uma ilustração flat 3D de uma pessoa em pé segurando um notebook.

    6. Modos claro e noturno

    Cada vez mais sites e aplicativos vêm se aprimorando para que suas composições visuais estejam com os famigerados modos “dark” e “light”. Os próprios sistemas operacionais, sejam de computadores ou smartphones, já se atualizaram com esse novo modelo e muitos sites também já estão trazendo essa função.

    A necessidade dessa funcionalidade aumentará (e muito) com a chegada do novo responsivo, que está sendo trabalhado pela Google, com o objetivo de tornar o design responsivo adaptativo aos usuários – em vez de telas, como é a forma que fazemos hoje. Em breve traremos um conteúdo fresquinho sobre esse tema!

    Interfaces fictícias mostrando telas em modo claro e noturno.

    7. Textos grandes

    Existiu uma época em que consideraríamos o uso de textos grandes como um enorme exagero, mas nunca sabemos para onde o design vai evoluir. Interfaces com textos grandes, largos, em negrito, tomando boa parte do campo de visão, e até mesmo ficando sobreposto a imagens ou vídeos, está se tornando um estilo recorrente.

    Os textos, seguindo essa tendência, deixam de ser apenas elementos de leitura, mas também de estética visual. O ponto principal desses elementos é a forma como podem trazer evidência sobre alguma seção ou informação na página, atiçando a curiosidade do usuário.

    Página inicial da Stripe, exibindo um texto de destaque em um tamanho grande.

    8. Cursores redondos

    Parece até que as pessoas estão se cansando do clássico cursor de ponteiro, mas na verdade novos modelos estão surgindo com um design muito mais interativo, que são os cursores redondos, literalmente com forma de círculo, ou até mesmo comum simples pontinho com uma borda circular ao redor, lembrando o planeta Saturno.

    O mais interessante dessa tendência não é a repaginação no visual do cursor, mas a forma como ele interage com elementos clicáveis nos sites, tornando a experiência muito mais imersiva.

    Página inicial da illo, com um cursor circular em formato de ponto, com uma borda ao redor. O cursor aponta para o vetor de uma mulher que aparece no centro da tela.

    9. Brutalismo

    Depois de falarmos de todas essas tendências mega interessantes, parece até estranho quando falamos do brutalismo, essa nova tendência que só de ler o nome, já assusta um pouco!

    O Brutalismo usa cores contrastantes, fontes super altas e sem uma hierarquia bem planejada e elementos normalmente retos. Podemos até mesmo dizer que esse modelo traz autenticidade ao máximo numa interface, porque se diferencia de tudo o que costumamos ver por aí em websites, mas, apesar da estranheza, normalmente são simples, com uma navegação muito mais reduzida – ou até mesmo sem navegação – o que conhecemos como “single-page”, que são sites com apenas uma única página.

    Página inicial da Typography Principles, no estilo brutalista, com estilo de uso diferente do padrão. O título tem uma fonte grande e atinge quase toda a página. As imagens são menores e os textos são dispostos com alinhamento simples e à esquerda.

    10. Muito mais gradientes

    Vamos combinar aqui: gradientes ficam muito charmosos nas interfaces e encontramos muitos deles em planos de fundo no ano de 2021, e agora estamos aprimorando essa tendência para que apareçam em elementos mais sobrepostos, como textos, ícones e ilustrações, aumentando significativamente o destaque desses itens, e até mesmo a própria identidade da marca.

    Se isso já parece o suficiente, essa tendência fica melhor ainda quando temos gradientes que fazem transição automaticamente, como no site do Stripe.

    Página inicial da Design+Code, que mostra textos e imagens de fundo em cores gradientes.

    Conclusão

    Nada melhor do que começar o ano por dentro de todas as novas tendências de design, e com certeza, cada uma delas vale um estudo mais aprofundado antes de começar a aplicá-las de fato.

    É importante lembrar também que, por mais que esteja em alta, pode ser que determinada tendência não combine com o perfil de uma marca, por isso, antes de iniciar qualquer construção do design visual, entenda quem é a marca, quem são os usuários dela, pois assim você conseguirá ter uma visão melhor para poder projetar o layout de um produto digital em ferramentas como o Figma.

    Já aproveito para divulgar a nossa Formação de Figma para você que é está iniciando a carreira agora ou quer aprender mais a respeito da área de UI Design e começar a trabalhar com o Figma para construir suas interfaces. Temos cursos e vários outros conteúdos super completos para você se inserir rapidamente no mercado e ficar craque na prototipação.

    A gente se vê na próxima, valeu!

    Banner do Guia Tático Alura sobre carreira em tecnologia, destacando o mapa da carreira tech. A imagem convida a explorar diferentes caminhos profissionais, comparar possibilidades e encontrar a próxima fase da carreira na área de tecnologia, com chamada “Explore o mapa”.

    Avalie este artigo

    • Foto de Mateus Villain

      Autor(a)

      Mateus Villain

      Senior Product Designer, especialista em design systems, professor e autor do livro Design System além do layout: Criação, estratégia e governança.

    Explore por tópico

    • Back-end
    • Dados
    • DevOps
    • Front-end
    • Gestão & Negócios
    • Institucionais
    • Inteligência Artificial
    • Mobile
    • UX & Design

    Leia também

    • Alura
      06/12/2016

      4 designers que se destacaram no mercado de tecnologia

      Ler mais
    • 14/10/2021

      10 tipografias gratuitas para um design incrível

      Ler mais
    • 05/11/2017

      5 dicas para melhorar a acessibilidade em sua interface

      Ler mais
    Ver mais conteúdos

    Inscreva-se em nossa Newsletter

    Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.

    Institucional

    • Sobre nós
    • Trabalhe Conosco
    • Para Empresas
    • Para Escolas
    • Política de Privacidade
    • Compromisso de Integridade
    • Termos de Uso
    • Canal de Ética
    • Código de Ética
    • Fale Conosco
    • Documentos Institucionais
    • Status
    Institucional
    • Sobre nós
    • Trabalhe Conosco
    • Para Empresas
    • Para Escolas
    • Política de Privacidade
    • Compromisso de Integridade
    • Termos de Uso
    • Canal de Ética
    • Código de Ética
    • Fale Conosco
    • Documentos Institucionais
    • Status

    A Alura

    • Como Funciona
    • Inteligência Artificial
    • Plataforma
    • Depoimentos
    • Instrutores(as)
    • Dev em <T>
    • Luri, a Inteligência Artificial da Alura
    • IA Conference
    • Cursos Imersivos
    • Perguntas Frequentes
    A Alura
    • Como Funciona
    • Inteligência Artificial
    • Plataforma
    • Depoimentos
    • Instrutores(as)
    • Dev em <T>
    • Luri, a Inteligência Artificial da Alura
    • IA Conference
    • Cursos Imersivos
    • Perguntas Frequentes

    Conteúdos

    • Alura Cases
    • Imersão Engenharia de Software: Dev na Era da IA
    • Artigos
    • Podcasts
    • Artigos de educação corporativa
    Conteúdos
    • Alura Cases
    • Imersão Engenharia de Software: Dev na Era da IA
    • Artigos
    • Podcasts
    • Artigos de educação corporativa
    Uma Empresa do GrupoLogo Grupo Alun

    Outras empresas do Grupo Alun

    • FIAP
    • STARTSE
    • PM3
    • LUMINA

    Ao submeter seu e-mail, você concorda com a política de privacidade da Alura.

    Redes Sociais & Apps

    instagram
    youtube
    tiktok
    x
    appStore
    googlePlay
    Uma Empresa do GrupoLogo Grupo Alun

    Outras empresas do Grupo Alun

    • FIAP
    • STARTSE
    • PM3
    • LUMINA

    Ao submeter seu e-mail, você concorda com a política de privacidade da Alura.

    Redes Sociais & Apps

    instagram
    youtube
    tiktok
    x
    appStore
    googlePlay
    Alura