Cor e profundidade são os temas-chave, enquanto analisamos quais tendências de design estão acontecendo nos sites. O vermelho é a cor primária de escolha e você pode vê-lo em quase todos os lugares; a novidade é que está sendo usado em fundos e como mais do que uma cor de destaque. Além disso, os elementos 3D e a profundidade de campo estão causando impressões significativas.
Aqui está o que é tendência em design:
1. Fundos Vermelhos
O vermelho é a cor do poder, paixão e atenção, mas até recentemente, não era a escolha certa para planos de fundo de sites. Agora, a tendência é o vermelho como cor de fundo.
Esses designs são ousados e chamativos com cores vivas, uma sensação quase ousada em alguns casos e muito impacto.
Mas funciona.
Nos projetos abaixo, o vermelho é uma ferramenta poderosa para ajudar a transmitir a mensagem do design do site. A cor exige que você se envolva com o design para ver o que está acontecendo e o conteúdo dele e, no caso da Pentel, faz parte da cor da marca.
Arze usa um fundo vermelho forte com uma inserção menor de cor contrastante para mostrar itens no site. É uma escolha interessante e bastante ousada. O fundo vermelho também perpassa o pergaminho. Esse é um uso de cor que chega a ser desconcertante, mas ainda transmite a ideia e ajuda a mostrar os produtos graças a muito contraste.
Russia Invaded Ukraine é um uso perfeito do vermelho como uma cor que invoca sentimentos de paixão com conteúdo para explicar o conflito. O vermelho pode ser uma cor carregada; aqui, essa é precisamente a intenção.
Pentel usa um fundo vermelho um pouco mais suave do que os exemplos anteriores. Aqui, o vermelho é a cor da marca, e eles usam o fundo para ajudar a chamar a atenção para os itens e elementos do site. O vermelho carrega abaixo do pergaminho também para manter o tema em movimento.
2. Ícones e gráficos 3D
Os elementos tridimensionais parecem fluir e fluir com os designers. Vemos muito 3D em projetos e depois parece que desaparece novamente. É como se não tivéssemos realmente descoberto como usá-lo bem ou de uma maneira que funcionasse com o conteúdo de vários designs.
Reconhecidamente, ícones 3D, gráficos e ilustrações podem ser difíceis de criar e usar. Muitas vezes, eles parecem um pouco leves e não combinam com todos os tipos de conteúdo. Portanto, eles não se acostumam com tanta frequência.
Cada um desses projetos tem uma abordagem diferente: Admilk vai all-in com uma série de animações em 3D apresentando o nome da marca. Eles são divertidos, leves e um pouco inesperados. Os gráficos incluem objetos que se parecem com balões, leite e cereais e grama com flores. (Clique para ver cada um.)
Refokus usa objetos tridimensionais que se movem em um pergaminho para criar fluxo direcional e interesse visual em um espaço onde não há muito mais em termos de arte. Os objetos mantêm a estética do pergaminho e criam um elemento interessante que o transporta pelo design sem sobrecarregá-lo com truques.
Junni é um daqueles designs de site que combina com 3D. Este estilo gráfico de bolhas ilustradas está começando a ser uma tendência 3D em si mesmo como um estilo que está sendo usado cada vez mais com ícones e até emojis. Tem um ar leve, e a animação quase faz com que pareça bobo e um tanto infantil.
3. Profundidade Focal Longa
Já faz um tempo desde que uma verdadeira tendência de fotografia ou videografia fez esse resumo, mas há tantas instâncias desse estilo de imagem/vídeo em projetos que não podem ser ignoradas. A profundidade focal longa está em quase todos os lugares, de sites de viagens a arquitetura e comércio eletrônico.
Profundidade focal longa ou profundidade de campo permite que a imagem mostre muito espaço em uma imagem de uma forma nítida e visível. Profundidade de campo, em termos de fotografia, é a distância entre os objetos mais próximos e mais distantes em uma imagem que são aceitavelmente nítidos.
Nessa tendência, cada site apresenta uma imagem forte e com bastante profundidade de campo. A imagem pode ser parada ou em movimento, e a imagem é o que realmente atrai você para o design.
O que é ótimo nessa tendência é que você pode ver muito de uma cena e até sentir que faz parte dela. É um conceito visual envolvente que pode funcionar para uma variedade de propósitos.
A Interest Media usa um rolo de vídeo que lentamente aumenta ainda mais o zoom. A imagem é linda e com a sobreposição de texto é fácil de ler e entender. Quase parece que você está andando de costas na ponte no vídeo.
A Bloomingdales usa um vídeo imersivo com muita profundidade e elementos de realidade virtual para criar uma experiência de compra envolvente. Faz você se sentir na loja pelo site e incentiva as compras. É uma maneira divertida de o varejista mostrar seu 150º aniversário.
O Arredamento Design usa uma foto com uma ampla área focal para fornecer inspiração de design de interiores. Observe as linhas nítidas e a facilidade com que você se envolve com a imagem, ou mesmo imaginando uma sala como a retratada. O efeito utilizado no design, com zoom no scroll, aproxima ainda mais o usuário da imagem. A profundidade aqui evita que o movimento e o zoom sejam excessivos e quase permite que você veja mais e se sinta ainda mais próximo dos objetos que estão mais distantes na imagem.
Conclusão
Existem duas tendências aqui que tendem a se cruzar: a cor vermelha está em toda parte e tendo um grande surgimento neste outono como tonalidade e profundidade dominantes, e o foco tridimensional está em toda parte.
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.
13 – Mega rodapés
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!
O lado artístico de sites e blogs é fundamental para gerar experiências úteis ao usuário que está do outro lado da tela. O web design se tornou uma peça importante na programação, através dele é possível aliar a importância do conteúdo do site a estética e usabilidade do mesmo.
Montamos este conteúdo rico em dicas e tendências para esta área que vem crescendo a cada ano que passa. Enjoy it 🙂
01. Texto sobreposto a imagem
Sobreposição de texto a imagem foi um método que tornou-se uma tendência durante o ano de 2018, e que continuará forte até o próximo ano. Misturando elementos de contraste no texto – cores ou texturas – com a imagem de fundo, resultando em uma continuidade para a imagem original.
Como continuidade de uma tendência bastante explorada com gradientes de cores vibrantes, os desenhos orgânicos e os padrões geométricos combinados com imagens, vídeos ou vetores, prenderá ainda mais a atenção do visitante de seu website.
O uso de formas em layouts para web, pode simbolizar conceitos, transmitir emoção, criar profundidade ou influenciar um caminho visual. Esses forms, quando bem distribuídos, ajudam a direcionar o usuário para áreas importantes do app ou site.
Na visão dos web designers, desenhos orgânicos temáticos com linhas fluidas significam acessibilidade e conforto. Pelo fato de serem imperfeitos e assimétricos por natureza, essas formas viabilizam profundidade a um web design, ajudando os outros elementos da página a se destacarem.
Apesar de proporcionar belas curvas que criam a ilusão de conexões, flexibilidade e movimento, lembre que como todas as tendências, se não for algo adequado à sua identidade, não arrisque.
A cor é uma ferramenta de estudo essencial para um designer, pois elas influenciam diretamente nas ações e emoções do usuário. Por isso escolha de cores brilhantes continua em alta, como nos anos anteriores, e acredita-se que continuará por um bom tempo.
A composição de cores vívidas são criadas utilizando o pigmento sem a adição de cinza ou preto. Pelo fato de segurar a atenção do usuário, aplica-se junto às chamadas. No entanto é ideal sempre encontrar o equilíbrio correto entre cor e texto, para não confundir o usuário.
Quando usadas acertadamente, as cores realçam os demais detalhes sem sobrecarregar a área de visão, dando ilusão de elementos importantes vindos do fundo – relações espaciais de distância e profundidade, tornam-se maneiras simples de alcançar um determinado equilíbrio visual.
A diagramação e o layout fora do grid marca uma forte tendência que continuará nos próximos anos. Designers estão cada vez mais usando esta forma de sobrepor os elementos, criando uma nova releitura para a estética minimalista.
As imagens alinhadas foras do grid criam um padrão simplista que consegue realçar o conceito que se quer transmitir, além de manter a atenção do usuário por mais tempo nas imagens, fator muito importante, principalmente para e-commerce.
A quebra que se dá entre as imagens e os espaços sobre o background reforça o olhar mantendo a navegação mais fluida e marcante.
A experiência de usuário faz com que o fator decisivo para manter o mesmo por mais tempo navegando por um site é o destaque que se cria para as imagens únicas de produtos e conceitos que se quer transmitir.
A adição de elementos de movimento em um site está cada vez mais em alta, contidos em animações, rolagens ou gatilhos, que acabam aumentando o engajamento e incentivam os usuários a permanecer interagindo com o site. Apesar de não ser um método novo, estes começaram a ser inovados cada vez mais, de forma minimalista e estratégica, para atrair a atenção do usuário e transmitindo uma experiência genuinamente única.
Nota-se que na atualidade, as animações em objetos estão em todos os lugares, como: logotipos, ícones, transições entre lados e estados de objetos dentro da interface – efeitos produzidos através de Parallax e GIFs continuam em tendência.
Até então, uma forma bastante popular de adicionar algum “drama” com movimentação dentro do site é a utilização da GIF de qualidade superior e a inclusão de vídeo em segundo plano num ciclo contínuo, quais ajudam a manter durante um tempo maior a navegação do usuário.
Um elemento que também está bastante na moda são as fontes handmade, conhecidas também como “artesanais”. Geralmente utilizadas em setores específicos, acabam proferindo uma personalidade exclusiva ao site, quando usada estrategicamente em chamadas ou títulos em áreas próprias da diagramação.
Com as mudanças do mundo digital, o acesso a internet móvel sobrepujou os usuários de desktop. Com isto, a responsividade para diferentes dispositivos tornou-se um padrão essencial.
Seja para manter o website dentro dos das melhores práticas de usabilidade, quanto seguir as premissas básicas para a indexação no Google e demais mecanismo de pesquisa, é necessário um olhar especial para a experiência de usuário em dispositivos móveis.
Gráfico: Digital in 2018 Global Overview
Por: We Are Social
Essa nova premissa impacta também a forma de planejar e desenvolver um novo projeto web. Se antes pensava-se em uma versão desktop com o desdobramento mobile, hoje estamos caminhando para o sentido inverso.
Pensar na versão mobile como a principal, não apenas otimiza todo o processo de planejamento, como também aprimora o desenvolvimento do site, evitando potenciais erros e ajustes durante ambos os processos.
This is a widget ready area. Add some and they will appear here.
