Quais tendências de web design dominarão?
As tendências de design podem moldar tudo, vamos mergulhar em algumas das principais tendências de web design. Veremos as tendências que começaram a surgir no final de 2021 e são candidatas definitivas para definir o cenário no próximo ano, bem como alguns designs de tendência que estão no auge da popularidade.
01 – Designs divertidos e otimistas
Formas, cores e até rostos modernos podem ser muito divertidos. Os designers estão usando a tendência de web design com designs divertidos e otimistas para tudo, desde sites de portfólio – como o exemplo acima – até e-commerce. O traço comum com esses designs é que eles injetam um pouco mais de felicidade no mundo.
Nada diz otimismo como um rosto sorridente. As imagens certas são uma maneira fácil de retratar essa vibe e aproveitar as vantagens dessa tendência de design de site. Preste atenção na fotografia e nas imagens em geral e procure rostos que se conectam com o público virtual, como no exemplo acima do LegalSuper.
Após os últimos anos vivenciando uma pandemia mundial de saúde, os designers estão adicionando um pouco mais de diversão e coragem aos projetos de design. É apenas a sensação de que todos precisamos agora.
Diversão e otimismo são injetados com imagens que apresentam rostos, fontes mais leves e fontes interessantes, e cores que exsudam emoções positivas. Para aproveitar ao máximo a tendência, pense em elementos que são um pouco mais leves e evite fontes pesadas ou opções de cores.
FOFSO faz isso com a linguagem da página inicial, bem como rostos intensos, mas felizes, olhando para a câmera com roupas brilhantes e um fundo interessante.
02 – Esquemas de cores em preto e branco
Os esquemas de cores em preto e branco são a tendência de design mais forte e bonita do ano. Sem cor, você realmente precisa pensar e projetar dentro dos limites. Embora possa parecer um pouco intimidador, pode ser libertador e ajudar a impulsionar a criatividade. Além disso, os resultados podem ser absolutamente impressionantes.
Talvez em outro sinal dos eventos mundiais, os esquemas de cores em preto e branco estão quase em toda parte. Essa estética rígida é um indicador de como muitos designers podem se sentir com foco na simplicidade e na rigidez.
A chave para fazer um esquema de cores em preto e branco funcionar bem e ao mesmo tempo parecer novo e moderno é aplicar os efeitos e as técnicas certas.
No exemplo acima, há uma animação sutil e líquida ao passar o mouse, bem como um ponteiro do mouse de grandes dimensões para aumentar a interatividade.
03 – Tipografia Ousada e Experimental
Em 2022, não havia maneira errada de fazer tipografia. Fontes grandes em negrito – até mesmo serifas – estão por toda parte. E eles parecem fantásticos. Ao brincar com essa tendência de design de site, pense em como as fontes responderão (tudo parece diferente na tela de um celular) e como maximizar o impacto para os visitantes. Muitos tipos de fontes experimentais não são apenas projetados com elegância, eles também incluem elementos como animações ou opções flexíveis.
De contornos a fontes coloridas e formas e preenchimentos variáveis, as opções de tipos em negrito e experimentais estão dominando os designs de sites. Quando se trata da tipografia da web de hoje, realmente não existem regras e os designers estão brincando com um pouco de tudo.
O design de Garcia Salmeron usa vários efeitos de tipos na página inicial que exemplificam essa tendência: misture e combine caracteres no título principal, uma escolha de fonte um tanto experimental e camadas de preenchimento coloridas com imagens e planos de fundo.
Ponteiros de grandes dimensões
Esta é uma tendência de design que você verá em muitos dos exemplos aqui se clicar, mas não verá nada até tentar se envolver com o design de um site: ponteiros de grandes dimensões ou movimentos do mouse.
Este elemento da interface do usuário está em toda parte. O exemplo e uso mais comum é aquele exemplificado por Jade Sheng com um ponteiro circular que se move pela tela e até mesmo se expande ou muda de cor quando cruza um elemento clicável.
A grande vantagem dessa tendência de design de IU é que ela fornece informações valiosas de usabilidade para os visitantes do site e os ajuda a se envolver melhor com o design.
04 – Elementos de Design Tridimensional
Enquanto 2020 e 2021 viram muitos designers lidando com designs tridimensionais completos para sites completos, a tendência emergente é incorporar elementos de 3D com uma estética geral mais plana.
Os elementos com um toque 3D podem incluir sombras, animações ou efeitos de camada para criar profundidade e dimensão.
Sennep faz isso no exemplo acima com um achado ilustrado que alcança e corrige o texto no resto do design. A ilustração usa sombra e movimento para realizar esse estilo de design de tendência.
É hora de pensar em 3D para quase tudo. De modelos da web da vida real a ilustrações de vídeo ou foto com profundidade, os elementos tridimensionais podem ajudar a fornecer uma compreensão extra para um design, como a renderização arquitetônica acima, ou aumentar o interesse visual.
O design tridimensional também se estende à narrativa visual. Pense em como capturar sua história ou produto de uma forma que destaque a profundidade do campo e as sombras. O vídeo, como o exemplo acima, é uma das maneiras mais testadas e comprovadas de fornecer esse estilo de maneira eficaz.
05 – Quase brutalismo
Brutalismo é a tendência de design de sites que as pessoas desejam adotar, mas é muito duro e afiado para trabalhar na maioria dos projetos. Digite a última iteração dessa tendência – quase brutalismo.
Esses designs usam muitos dos mesmos efeitos nítidos, mas com uma borda mais clara. Em vez de fontes mono, as serifas mais agradáveis aos olhos e as serifas de areia são a norma. Em vez de bordas afiadas, há um amplo espaço entre os elementos, mesmo se houver alguns limites e linhas distintas.
Não há muitos babados ou outros visuais, deixando a cor e o texto para realmente dar conta desses projetos.
06 – Elementos de texto de rolagem
Embora você sempre queira que os elementos de texto sejam legíveis, eles também podem ser dinâmicos. Elementos de texto de rolagem – geralmente usando fontes grandes, apenas algumas palavras e em um único local – pode adicionar ênfase a palavras-chave e despertar o interesse do usuário.
A rolagem de texto geralmente se move lentamente pela tela à esquerda em um local que não é muito ocupado. As fontes contornadas são uma opção popular e a chave para manter a legibilidade é usar palavras ou frases curtas e comuns.
As frases de chamariz e outras mensagens devem ser separadas do texto de rolagem para garantir que os visitantes do site possam lê-las com facilidade.
As opções de rolagem de texto são mais do que apenas uma tendência ou truque de design de site, elas podem ajudar a estimular a interação e o envolvimento do usuário. No exemplo acima do molho Mama Joyce Peppa, o cursor inclui texto de rolagem que se expande para uma exibição de texto de rolagem maior. (Você pode até querer assistir essa interação repetidamente.)
07 – Glassmorphism
Os primeiros indícios de morfismo de vidro começaram com o neomorfismo no final de 2020 e início de 2021 e evoluíram para o efeito de vidro mais completo que é popular agora.
A morfismo de vidro é exatamente o que você pode pensar: elementos de design que têm uma aparência que lembra o vidro. Pode haver elementos de transparência, frieza ou brilho.
Os designers têm trabalhado com esse estilo de uma maneira importante no Dirbbble e ele está encontrando um caminho para um grande número de designs de sites publicados.
08 – Ainda mais gradientes
Além de um curto período em que todo design era superplano, gradientes são a tendência de design que continua surgindo. Em 2021, a maioria dos gradientes do design apareceu em planos de fundo.
Para 2022, os gradientes estão assumindo duas novas formas:
- Para preenchimentos de cor de texto (como o exemplo acima) para fornecer o máximo impacto e ênfase
- Como um preenchimento em uma ilustração ou ícone com outras linhas para criar um efeito de profundidade texturizado
09 – Páginas iniciais sem imagens
Sem foto? Sem problemas! Projete sem imagens e você estará na tendência em 2022.
Use um tipo diferente de interface de usuário ou truque de design para aproveitar ao máximo uma página inicial sem imagens. No exemplo aqui, Kirifuda usa um belo esquema de cores em preto e branco com um efeito de impressão sobreposta entre os elementos de texto. Tipografia superdimensionada e uma fonte de estilo manuscrito ajudam a reunir tudo. (Observe a combinação de outras tendências de design neste para um efeito estelar.)
Um design sem imagens também é uma ótima oportunidade para experimentar outras técnicas, como animações, estados de foco ou outros elementos interativos.
Projetar sem imagens na página inicial pode muitas vezes levar a uma estética mínima. E está totalmente ok. Use outra técnica para despertar o interesse, como um grande elemento de texto em uma fonte interessante.
10 – Efeitos em camadas
Elementos que se empilham, marcam e se sobrepõem podem estabelecer conectividade entre os elementos de design e um efeito de profundidade. Os efeitos em camadas podem ser óbvios e diretos ou um pouco mais discretos. Ambas as opções podem funcionar juntas ou sozinhas para um impacto geral.
A State Creative usa várias camadas – plano de fundo, meio e primeiro plano – para reunir uma variedade de elementos de uma forma visualmente interessante e significativa.
11 – Estética de tela dividida
A estética da tela dividida está novamente em vigor. A tendência de alguns anos atrás funcionou por razões de usabilidade e capacidade de resposta e agora é mais um design.
Esses visuais podem incluir telas que são divididas horizontalmente ou verticalmente com cada lado tendo as mesmas ou diferentes ações funcionais ou de clique.
Os melhores designs de tela dividida fazem as duas coisas:
- Eles fornecem uma experiência visual forte
- Eles usam vários pontos de entrada para se aprofundar no conteúdo
12 – Tipos de letra interativos
O texto que se move com você na tela é a espinha dorsal por trás das fontes interativas. Na maioria dos casos, isso funciona usando um estado de foco, embora existam alguns outros efeitos mais complexos que você pode experimentar. (Animações líquidas com fontes também estão crescendo em popularidade.)
Ao considerar os elementos de texto interativos, pense na legibilidade e na compreensão. Um efeito de texto só funciona enquanto as palavras nele ainda forem legíveis e compreensíveis. (Caso contrário, a mensagem e o significado do design se perderão.)
Essa tendência de design também funciona melhor quando não há muitas outras técnicas em camadas no design. Este truque é melhor quando está sozinho.
Quem poderia imaginar que os rodapés de sites – especialmente aqueles com muitas informações – seriam um elemento de tendência de design de sites?
Os mega rodapés são um dos elementos de design obrigatórios de 2022 para sites que contêm muitas informações, grande número de páginas ou vários pontos de engajamento.
O World Wildlife Fund tem um rodapé de dois níveis:
- Na barra preta espessa, existem três colunas de opções de menu para fácil navegação, agrupadas de acordo com o que o usuário deseja fazer no site (descobrir, oferecer suporte, conectar)
- Também na barra preta está um formulário de inscrição abrangente para saber mais sobre a organização
- Na barra de rodapé branca mais fina estão informações organizacionais, links de mídia social, uma isenção de responsabilidade sem fins lucrativos, aviso de direitos autorais e links de manutenção (política de privacidade, divulgações e termos)
Os mega rodapés funcionam bem quando há níveis óbvios de elementos com finalidades distintas. O formato da coluna com cabeçalhos, bem como uma âncora inferior horizontal ajudam este rodapé de Wild Souls a ter uma aparência incrível.
Os mega rodapés podem até assumir um estilo quase brutalista. O truque é usar elementos para criar um senso distinto de organização para que os usuários saibam como encontrar o que procuram com facilidade.
14 – Design Inclusivo
Os designers estão trabalhando em direção a uma web mais inclusiva e isso está aparecendo em quase tudo que está sendo publicado. De imagens a linguagem e texto alternativo, não há razão para não tentar tornar seus projetos mais inclusivos para todas as pessoas.
Inclusão se estende a raça, neutralidade de gênero, cultura, acessibilidade e habilidade. O tema comum é que o seu site deve ser montado de forma que qualquer pessoa que queira ter acesso ao conteúdo e que as pessoas também vejam outras pessoas com quem se identifiquem na tela.
A linha tênue aqui é que você não precisa ser exagerado com imagens e linguagem que grita “SOMOS INCLUSIVOS”. Esta é uma daquelas situações de design em que mostrar é mais importante do que dizer, e ser verdadeiro e autêntico é mais importante do que forçar.
15 – Imagens Extraordinárias
Onde começa a linha entre o fim real e o imaginário? Quando você acessa muitos sites, pode não ter 100% de certeza. E tudo bem.
Divirta-se com essa tendência e mescle o real com o imaginário para criar imagens bastante extraordinárias. Sua imaginação é o único limite aqui.
No exemplo do K Plus Film, as pessoas estão situadas em cima de uma fruta que está voando pela tela. A cor e a escala criam um visual envolvente que é tudo menos típico.
Um novo ano novas possibilidades!!!
O novo ano já parece explodir de forma extraordinária no que diz respeito às tendências de design de sites. Pense em como e mesclar esses elementos em projetos existentes ou como parte de algo novo. E acima de tudo, inove!