Tendências de web design para 2022

Se aprendemos alguma coisa nos últimos dois anos, é que sempre teremos que nos adaptar a algo novo. Isso é verdade tanto na vida quanto no design e, à medida que avançamos para 2022, os designers estão começando a abraçar o caos da vida e a expressá-lo por meio de seus designs.

As tendências para 2022 estão se movendo em direção a designs mais ousados, criativos e interativos. Os criadores estão se inclinando para um pouco mais de disrupção e ultrapassando os limites do que é considerado “bom” web design.

Aumente sua criatividade no novo ano implementando algumas das tendências que esperamos ver mais em 2022:

• Minisites interativos
• Designs com inspiração retrô
• Projetos de conceito aberto
• Mais personalização
• objetos 3D, rolagem 2D
• Brutalismo-lite
• Morfismo de vidro
• Efeitos de rolagem criativos
• Tipografia superdimensionada
• Bordas visíveis
• Componentes de colagem com visuais abstratos

Minisites interativos

Você é ótimo no que faz – mostre isso! Apresentar suas habilidades em um ambiente menor, mais controlado, com conteúdo e interações altamente especializadas é uma das maneiras pelas quais os designers estão atraindo novos clientes. Mostre aos clientes em potencial que você pode criar experiências verdadeiramente únicas criando algo simplesmente pela criação.

O desenvolvedor sul-coreano Jungik Lee criou este mini-site que permite aos usuários completar uma das três tarefas simples. Ele usa muitas cores e instruções simples para criar ou mover objetos diferentes, e preencher uma página com círculos coloridos é realmente muito divertido.

A web designer de Amsterdã, Victoire Douy, usa a interatividade em seu pequeno site de portfólio para capturar sua atenção. Simplesmente movendo o cursor, você pode alterar cores, puxar cordas, mover objetos e muito mais.

Designs com inspiração retrô

A idade média de um web designer nos Estados Unidos é de 37 anos, colocando-os firmemente na geração Millennial. Como os Millennials foram a primeira geração a realmente adotar a internet como usuários diários, não surpreende que muitos designers sejam inspirados pela arte, tipografia e cores que eram populares durante os primeiros dias da web.

A Wild Souls tem um site de comércio eletrônico que combina formas coloridas com um estilo sobreposto para criar uma estética divertida e vibrante, adequada para a empresa de alimentos. Eles são um varejista especializado em nozes, manteigas de nozes, méis e marmeladas, e os efeitos de pairar sobre seus produtos adicionam novas texturas e formas que se baseiam com bom gosto nos temas visuais inspirados nos anos 90.

O Cartoon Network em si é uma marca amada por grande parte das Gerações Y e Z. O site do estúdio usa uma base em preto e branco combinada com cores fortes e animações deliciosas, criando um site que parece simultaneamente retrô e muito moderno.

Projetos de conceito aberto

Talvez a pandemia esteja afetando nossas preferências de design, bem como nosso comportamento pessoal, porque há uma tendência emergente de deixar muito espaço aberto nos designs. Pode não ser um metro e oitenta, mas os designers estão deixando um espaço crescente entre as seções, concentrando-se nas manchetes e, às vezes, descartando completamente as imagens dos heróis, dando aos usuários muito espaço para respirar.

Destilados de qualquer tipo são afiados e nítidos, e o site da Bear Creek Distillery em Denver, CO também está livre de aditivos extras. O conceito de design do site é tão limpo quanto a vodka, bourbon, rum e uísque que eles refinam.

Atalson é uma empresa de design de produtos e embalagens, fornecimento de materiais e fabricação com sede na cidade de Nova York. A sustentabilidade está no centro de seu processo, e a ideia de fabricação limpa é espelhada visualmente em seu site por meio do uso de espaço em branco. Esse espaço aberto permite que os produtos que eles projetaram mantenham os holofotes, enquanto os efeitos de foco sobre as imagens expressam uma visão geral de um produto ou uma explicação dos valores de sua empresa.

Mais personalização

À medida que os usuários gastam mais tempo e dinheiro online, os provedores estão encontrando novas maneiras de atrair subconjuntos mais amplos de seu público. Para isso, muitos estão aumentando o nível de personalização disponível em seus sites e aplicativos, incluindo grandes melhorias nos recursos de inclusão que vão além das práticas recomendadas de acessibilidade padrão que todos os sites devem seguir.

A categoria “beleza” do Pinterest é uma das mais pesquisadas no site, e a empresa reconheceu a necessidade de ser mais inclusiva para todos os seus usuários. O Pinterest agora cria experiências mais rápidas e personalizadas nessa categoria, oferecendo um recurso de “variação de tons de pele”. Para muitos usuários, essa é uma resposta à saturação excessiva de tons de pele mais claros no aplicativo, para que todos os usuários do Pinterest possam encontrar looks que funcionem para eles com mais rapidez e facilidade.

A Mastercard encontrou uma maneira de permitir que mais portadores de cartão expressem suas verdadeiras identidades durante as transações, criando o sistema “True Name”. Isso permite que portadores de Mastercard trans e não binários tenham seus nomes verdadeiros listados em seus cartões em vez de seus nomes mortos, independentemente de seus nomes terem sido legalmente alterados ou não.

objetos 3D, rolagem 2D

Os designs com modelos 3D e uma apresentação de conteúdo 2D plana parecem atraentes e totalmente coesos. Apresentar conteúdo facilmente digerível de maneira previsível com um elemento 3D interativo em segundo plano é especialmente útil quando você está ajudando seus usuários a entender melhor um conceito físico.

O site que promove este novo distrito de negócios perto do coração de Moscou, na Rússia, é um ótimo exemplo de foco em uma peça central 3D acompanhada de conteúdo simples e plano. A página inicial mostra um modelo móvel do Parque Skolkovo, mas não ofusca o conteúdo colocado em destaque.

One Ocean Science é uma cúpula de compartilhamento de conhecimento com o objetivo de conectar líderes globais em conservação e pesquisa oceânica de uma perspectiva multidisciplinar. A página inicial do site dá as boas-vindas com uma rolagem 2D sobre um modelo 3D do globo, que se move à medida que você rola, destacando diferentes áreas e a pesquisa que está sendo realizada lá.

Brutalismo-lite

O brutalismo refere-se a um estilo de arte e arquitetura muito em blocos, geométrico e áspero. No web design, esse estilo ousado e simples se destaca porque tende a evitar algumas das regras tradicionais seguidas pelos sites em favor do minimalismo. Muitas vezes feito em preto e branco, os sites neste estilo apresentam poucos ou sem frescuras e texto em negrito para um acabamento austero.

A agência criativa italiana Caroselling tem uma identidade de marca que é honesta e direta. Eles acreditam em estabelecer expectativas realistas, pensando nas ramificações de sua estratégia e respeitando as restrições de tempo e orçamento de seus clientes. Um site brutalista os ajuda a ilustrar sua história como um parceiro de agência sem frescuras e sem complicações.

O designer Rick Owens, nascido em Paris e nascido na Califórnia, uma vez descreveu sua filosofia no design de móveis como “uma pele brutalista em uma rocha brutalista ao lado de um fogo brutalista em uma caverna brutalista”. No site de suas linhas de roupas e acessórios, você não encontrará móveis, mas encontrará uma clara inspiração brutalista nas imagens e no layout.

Morfismo de vidro

Exatamente como o nome sugere, o Glassmorphism é a arte de fazer uma tela parecer feita ou coberta por vidro, normalmente usada para desfocar um plano de fundo em uma interface de usuário. Em 2022, essa tendência deve continuar a crescer em popularidade à medida que os designers ampliam os limites do front-end criando objetos e textos animados semelhantes a vidro.

A agência de produtos digitais Dovetail Studios animou este conjunto Glassmorphic de anéis de aninhamento que giram em diferentes ângulos. Ele chama a atenção e mostra a proeza de modelagem 3D de sua equipe. Outros ícones no site também refletem esse efeito.

Outra agência de criação digital, Lo and Behold Studios, também usa objetos Glassmorphic animados em sua página inicial. O tema geral mais leve, no entanto, dá ao site um efeito totalmente diferente do que um usuário teria ao visualizar o Dovetail.

Efeitos de rolagem criativos

Muitos designers estão expandindo a tendência de rolagem horizontal do ano passado e estão experimentando ainda mais os efeitos de rolagem. Seja horizontal, lado a lado ou multidirecional, mudar a direção da jornada do usuário em um site é uma maneira fácil de oferecer a eles uma experiência geral mais dinâmica.

A empresa de móveis holandesa Moooi move os usuários cada vez mais fundo em suas coleções à medida que rolam a tela. Seu site oferece três experiências: Beauty Blooms, Defy Gravity e Paper Play. Em cada uma, a tela se abre para revelar coleção após coleção, e você mergulhará em novos padrões e vinhetas à medida que rola.

Kayla Fisher, uma fotógrafa cujo site já falamos antes, usa uma rolagem lado a lado, mantendo o menu fixo no lado esquerdo da tela. Isso permite que você visualize o trabalho dela de maneira visualmente atraente, sem perder de vista os botões grandes que obrigam os usuários a mergulhar mais fundo.

Tipografia superdimensionada

Seu site deve fazer uma declaração ousada sobre quem você é como empresa. Muitas empresas estão levando essa ideia a sério usando tipografia superdimensionada para manchetes, ou até mesmo no lugar de uma imagem de herói.

O coletivo de pesquisa tecnológica HUMAIN está trabalhando para preencher a lacuna entre as experiências humanas e a inovação técnica. Apoiado pelo Cronos Group, seu objetivo é encontrar novas maneiras de usar tecnologias emergentes para aprimorar as experiências humanas tanto online quanto na vida. Ao usar texto no lugar de uma imagem de herói, essa empresa com uma história complicada grita sua missão desde o momento em que você entra no site.

Quando você pensa em fones de ouvido, as ideias que vêm à mente são tanto auditivas quanto visuais. O nome da empresa de fones de ouvido AIAIAI é tanto uma exclamação quanto um nome, e grita uma declaração ousada para os usuários que visitam seu site. O texto grande apresenta a empresa, seguido por um vídeo menor e adjacente ao herói logo abaixo da dobra, interrompendo o padrão tradicional de imagem de herói e texto.

Bordas visíveis

Bordas visíveis dão estrutura ao seu design e chamam a atenção de seus usuários por meio de seu conteúdo. Usando apenas linhas simples, as bordas podem ajudá-lo ao projetar para clientes que precisam de um site limpo e organizado. Por outro lado, uma borda divertida, divertida e interativa pode criar um interesse visual adicional para seus visitantes online usando cores fortes ou efeitos interativos.

A agência independente Bonjour Paris combina bordas visíveis com uma rolagem horizontal para que o site seja minimalista, mas ainda tenha muita intriga. As bordas do linework continuam em todo o terreno até a seção do projeto, onde assumem uma nova forma sem parecer ambíguas ou ocupadas.

O restaurante australiano Curry Cafe tem dois locais, e a borda de rolagem do site fornece uma estrutura sólida por meio da qual os usuários podem consumir o restante de seu conteúdo altamente colorido e envolvente.

Componentes de colagem com visuais abstratos

Percorremos um longo caminho desde o início da web. Onde alguns designers estão adotando a estética estruturada, outros estão se movendo na direção oposta. Cores fortes, imagens sobrepostas e várias texturas podem se unir perfeitamente quando cada um dos elementos é cuidadosamente projetado.

Illuminating Radioactivity é um site educacional criado em colaboração pelo Stimson Center, o projeto Reinventing Civil Defense e o Bombshelltoe Policy x Arts Collective. Ele relata a história e o significado da palavra “radioatividade” e nossas associações com ela, bem como as maneiras pelas quais ela desempenhou um papel na ciência, entretenimento, medicina e muito mais. À medida que você rola, você é inundado com fotos antigas que ajudam a contar a história combinada com formas abstratas e brilhantes.

A empresa australiana The Loved Up Co ajuda a apimentar as noites de encontro com kits práticos que fornecem tudo o que você precisa para uma noite com seu parceiro. Sua página inicial apresenta pessoas em estilo de colagem em que os corpos são tirados de fotos em preto e branco e as cabeças são sobrepostas com bocas sorridentes, flores e coquetéis! Formas abstratas, círculos e rabiscos aparecem em todo o design para continuar movendo o olho pelo conteúdo.

Projetando o futuro da web

Fique de olho nessas tendências e experimente alguns conceitos que chamam sua atenção. Se o seu olho de rastreamento de tendências está afiado, você pode até ter notado que algumas das tendências de web design em 2022 são extensões ou permutações das tendências do ano passado.

Veja alguns que você ama? Algo que deixamos de fora? Deixe-nos saber nos comentários abaixo e lembre-se: estilos que vieram para ficar e aqueles que estão passando por modas dependem do que designers como você decidem criar com seus clientes este ano!