Tendências de Web Design para 2021

Publicados: 2021-02-17

2021. (Não é bom acrescentar aquele “1?!”)

Enquanto o mundo se ajusta a um novo ano, os designers também estão abraçando um novo ano de design. Após um ano de tantas incógnitas, começamos a ver tendências que nos levam de volta a um passado confortável, ao mesmo tempo em que enfatizam a experiência do usuário com foco no futuro.

De trabalhar online a comprar online e socializar online, as pessoas estão interagindo com a internet mais do que nunca, e os designers estão adotando designs ousados ​​para ultrapassar os limites do que podemos experimentar juntos.

Embora isso não seja exaustivo, aqui estão 11 das principais tendências de web design que estamos vendo para 2021:

  1. Layouts de página com rolagem horizontal
  2. Cursores personalizados
  3. objetos 3D
  4. Excelentes experiências de comércio eletrônico
  5. Linhas de grade visíveis com espessuras de linha grossas
  6. Opções de preferência do usuário em sites (não apenas aplicativos)
  7. Uma mudança da construção de sites para a construção de soluções
  8. Ilustrações divertidas
  9. Tipografia como design, não apenas palavras
  10. Formas geométricas como elementos de fundo
  11. WordPress como um CMS

1. Layouts de página com rolagem horizontal

Sites de rolagem longa e designs de paralaxe são populares há vários anos. À medida que nos aproximamos de 2021, estamos começando a ver uma mudança de orientação dos designers usando o movimento horizontal para “diminuir” o comprimento da página.

Embora a experiência física não seja diferente para o usuário (normalmente você ainda rola o mouse para cima e para baixo), a experiência visual oferece algo inesperado e interessante. Ele cria uma jornada pelo site em que o usuário não sabe bem para onde vai levá-lo, o que é raro agora que desenvolvemos padrões tão normais para sites.

Este site para Jony Guedj, um diretor de cinema freelance, usa uma rolagem horizontal para a seção principal de seu site para exibir seu trabalho. A barra colorida na parte inferior se move junto com o mouse, como uma maneira útil de orientar “onde” você está na página.

A LinkSture, uma agência focada em soluções de design e comércio eletrônico, usa uma rolagem horizontal para exibir seu portfólio também em sua página inicial. No entanto, está mais abaixo na página, usando uma combinação de movimentos verticais e horizontais enquanto você rola.

We Virtually Are, um estúdio de realidade virtual, usa o movimento horizontal para realmente fazer você se sentir como se estivesse no mesmo lugar em seu site, enquanto todo o conteúdo muda. É completamente diferente do que você espera da maioria dos sites, uma experiência adequada para uma empresa de RV especializada em criar novas realidades.

2. Cursores personalizados

Eu amo especialmente essa tendência porque parece familiar e nova. Uma referência aos cursores personalizados de meados dos anos 2000 (admita, você usou um no seu perfil do Myspace!), os cursores personalizados estão voltando com elegância.

De formas geométricas mínimas a experiências de página da Web totalmente interativas, personalizar o cursor do mouse está se tornando uma pequena maneira de adicionar alguma repetição à sua marca. Muitas agências o estão usando para repetir formas ou cores de seus logotipos ou como forma de envolver os usuários com o site.

Neste exemplo da Rox Studios, uma agência de design boutique, o mouse é aquele círculo amarelo. Ele muda com base no conteúdo de fundo sobre o qual você passa o mouse, transformando-se em um botão de CTA para “Visualizar” um projeto.

Vê aquela carinha divertida na primeira imagem? Que seu mouse quando você pousar no site do Concept Studio. Você verá algumas criaturas semelhantes em todo o site e também verá o cursor mudar para diferentes seções.

Na segunda captura de tela, o mouse muda para uma varinha que até solta pequenas partículas enquanto você se move. Ele nunca interrompe o conteúdo e, em vez disso, apenas adiciona um elemento de capricho e interatividade à medida que você experimenta o site.

Vê aquele pequeno círculo branco? Esse é o seu mouse no site de Etienne Pharabot, um desenvolvedor front-end baseado na França. Há mais do que aparenta, no entanto. Eu sugiro percorrer as várias frases em todo o site. (Algumas surpresas emoji aguardam!)

A Impero, uma agência de criação, usa um grande círculo amarelo como cursor que fica atrás de qualquer texto sobre o qual você passa o mouse. Eles também o usam como uma oportunidade para ajudar os usuários a navegar no site, por exemplo, exibindo “arrastar” em uma seção de rolagem horizontal. (Uma boa maneira de combinar algumas dessas tendências!)

3. Objetos 3D

Embora o design plano tenha governado por algum tempo, estamos começando a ver uma mudança tridimensional nos elementos dos designs da web. Isso pode ser inspirado pelo surgimento da realidade virtual e aumentada, sangrando em nossas experiências de navegação bidimensionais.

Este exemplo colorido da Chip&Byte, uma agência com sede na Itália, adiciona um elemento lúdico ao site. Conforme você move o cursor (o pequeno círculo cinza!), as formas também se movem, aumentando a sensação de dimensão.

Parece certo que uma empresa chamada “Yellow Telescope” tenha um telescópio 3d amarelo exibido com orgulho em sua página inicial! Quando você chega ao site pela primeira vez, você o verá “se construir sozinho” à medida que cada peça se encaixa, o que talvez seja um sinônimo de como eles ajudam seus clientes a construir práticas confiáveis.

A Beans Agency usa a tendência 3D para dar vida aos seus grãos, exibindo-os em várias cenas em todo o site. Essa tendência é uma ótima maneira de trazer movimento a um personagem ou dar uma sensação “realista” sobre apenas uma ilustração abstrata e plana.

Não totalmente vendido na tendência 3D? Você sempre pode adotar uma abordagem sutil, como C-HM Conseil. O chanfro elegante e o brilho em um fundo monocromático se inclinam para a aparência do material sem serem arrogantes.

4. Excelentes experiências de comércio eletrônico

Não é surpresa que o varejo online tenha aumentado dramaticamente no último ano, o que também levou a experiências de compra mais intencionais e melhores. Afinal, com mais concorrentes correndo para colocar seus sites online, não é mais aceitável que uma loja exista apenas na internet; ele precisa ser otimizado e priorizar a experiência do usuário para evitar que os compradores desistam.

A Minsom, uma loja de animais, facilita a compra de itens e serviços diretamente de sua página inicial. Com botões grandes e categorias simples, é fácil navegar para que você possa fazer o check-out rapidamente, em vez de gastar muito tempo pesquisando no site.

Esta loja de vinhos, Molly Dooker, não é apenas uma experiência bonita e artística, mas também uma experiência de compras tranquila. É fácil navegar pelos vinhos, visualizar o que está no seu carrinho e depois comprar – tudo isso enquanto desfruta de um design de site encantador.

A Zoya's Pantry, uma loja de alimentos saudáveis ​​e orgânicos, otimiza a experiência de compra ao adicionar vários itens ao seu carrinho. Quando você clica em “Adicionar à sacola”, sua janela não muda, então você pode continuar navegando sem perder seu lugar na página. Em seguida, para visualizar seu carrinho, tudo o que você precisa fazer é passar o mouse sobre o ícone na navegação superior (em vez de clicar em uma página separada).

Você notará algumas tendências de design para 2021 no site do The Cool Club. De uma experiência de comércio eletrônico sem esforço a uma exibição 3D de um de seus produtos (um jogo de cartas!), é fácil ver exatamente o que você está comprando e depois colocá-lo no carrinho. (Mesmo logo acima da dobra na página inicial!)

5. Linhas de grade visíveis com espessuras de linha grossas

As grades têm sido úteis no design da web há muito tempo, mas estamos começando a ver uma tendência de dar a elas um toque de cor ou uma espessura de linha grossa. Em vez de mantê-los mínimos, os designers estão se apoiando nas formas naturais que constroem na página e fazem com que suas linhas de grade se destaquem para obter uma aparência geométrica ousada.

O Eat Sleep Work usa linhas coloridas para ajudar a dar vida à sua área de trabalho semelhante ao Windows. Embora não sejam muito grossos, o azul em negrito faz o truque para destacar a grade e criar uma estrutura intencional em todo o site.

Este estúdio de desenvolvimento de software, OSM, usa linhas de grade de algumas maneiras interessantes em todo o site. Como você pode ver no fundo, eles se inclinam para uma espessura de linha grossa e estilo geométrico com sua marca, e repetem isso de várias maneiras diferentes, inclusive com layouts de grade.

Não tem certeza se as linhas de grade em negrito são adequadas para o seu site? Você pode tentar uma abordagem de “espaço negativo” como Rui Ma, designer e diretor de arte. É mais sutil do que enfatizar a grade com uma cor contrastante, mas o amplo espaçamento ainda permite que essa sensação geométrica brilhe.

6. Opções de preferência do usuário em sites (não apenas aplicativos)

A criação de experiências únicas e personalizadas está se tornando cada vez mais popular, e uma maneira de os web designers fazerem isso é criando opções no design do site. De preferências como modo claro versus modo escuro a opções de acessibilidade como qual idioma usar, essa tendência é dar mais controle ao usuário sobre como é a experiência do site.

Imediatamente ao carregar o site de Hoang Nguyen, você verá uma opção de áudio. O padrão é definido como “desligado”, então mesmo que o site carregue antes de você fazer uma escolha, ele não irá assustá-lo (embora mesmo se estivesse definido como “ligado”, isso não aconteceria; é uma música muito calmante!) . Isso lhe dá o poder de personalizar sua experiência imediatamente e, se você mudar de ideia mais tarde, há uma opção de som ao lado do logotipo dele na parte superior do site.

O site de Sofia Papadopoulou é semelhante, pois oferece configurações de áudio, mas elas ficam presas no canto inferior direito (onde você pode encontrar tradicionalmente um botão de voltar ao topo). O padrão é novamente definido como "desligado", apesar de o som contendo apenas instrumentais calmantes (nada de louco).

Este exemplo do Studio OUAM, uma agência de criação na França, facilita a escolha do idioma que você deseja usar ao navegar no site. Listados logo no topo do menu, eles oferecem a opção de francês ou inglês, adaptando seu site aos seus dois públicos principais.

7. Uma mudança da criação de sites para a criação de soluções

Embora o design da web seja tão importante como sempre (se não ainda mais crítico na era do coronavírus), as agências estão começando a mudar seu foco para a venda de soluções completas, em vez de entregas individuais. Por exemplo, em vez de se chamar de agência de web design, um estúdio criativo pode se referir a si mesmo como um “parceiro de experiência de marca” ou outra coisa que se refira ao valor total do que eles fornecem (não apenas as partes tangíveis).

Este é o Soda Studios, um “parceiro de inovação, estúdio de design e laboratório”. Eles não estão muito preocupados em listar todos os serviços individuais que fornecem, mas concentram-se em soluções holísticas para seus clientes.

O BORN Group é uma “agência digital global impulsionada por experiências centradas no ser humano”. Eles têm uma página de serviços para entrar em mais detalhes sobre o que eles oferecem, mas mesmo isso se concentra no panorama geral com serviços como experiência de marca, design de serviço e inovação.

A Kappow é uma agência digital que se concentra em web design, mas você não saberia necessariamente de sua página inicial. Em vez disso, eles compartilham o valor do que seu trabalho realmente oferece aos clientes: crescimento dos negócios, lançamentos de produtos bem-sucedidos e uma vantagem sobre os concorrentes. (Quem não quer tudo isso?!)

8. Ilustrações divertidas

A ascensão das ilustrações vem aumentando há alguns anos, e ainda não vemos isso indo a lugar algum. É uma ótima maneira de adicionar um elemento “humano” ao seu site, especialmente se você não tiver acesso a um ótimo fotógrafo e quiser evitar fotos de banco de imagens. Ou se você/sua agência é especializada em ilustração, é a maneira perfeita de mostrar seu trabalho!

Que mundo maravilhoso para navegar no site da RUYA, uma agência de branding e digital. Eles deram à ilustração a largura total de sua página inicial, tornando-a bastante impressionante assim que você carrega a página. Melhor ainda: ao passar o mouse sobre partes da imagem, você descobrirá que ela serve como um elemento de navegação, ajudando você a saber mais sobre a agência, os serviços e o trabalho deles.

Essas ilustrações peculiares da UPQODE, ​​uma agência de web design, são combinadas com animação para realmente dar vida a elas. Você pode vê-los mudar de cor, tamanho e interagir uns com os outros, o que contribui para uma experiência divertida na página inicial.

Se as ilustrações completas não forem adequadas para sua marca, sempre há a opção de usá-las como acentos, como o No Clima faz. Você encontrará “rabiscos” em cima de fotos em todo o site, dando a ele um sentimento artístico e artesanal. Esta também é uma ótima maneira de combinar ilustração e fotografia, se você estiver interessado em usar as duas!

9. Tipografia como design, não apenas palavras

Às vezes, as palavras são para serem práticas, às vezes, para serem arte. E os web designers de hoje não têm medo de usá-los para o segundo propósito, mais como um elemento de design do que um parágrafo ou corpo de texto.

Embora ainda seja legível, o texto na página inicial do Dystopian Creatives desfoca as linhas entre prático e visual de maneira atraente. Parece mais um padrão de fundo do que um parágrafo e interage com as outras imagens na página de maneiras interessantes.

A Loop, uma agência criativa de serviço completo, usa o tipo como elemento de plano de fundo em sua página inicial, juntamente com um parágrafo mais fácil de ler no topo. Como o tamanho da fonte do plano de fundo é muito grande (e um belo tom de amarelo), seus olhos podem ler os dois conjuntos de texto sem ficar confusos. Também adoro a maneira como ele solicita que os usuários rolem a página para responder à pergunta “Design for… what?”

Ao rolar para baixo neste site para Stone & Style, você verá cada título como um bloco de texto normal, mas também ecoado em uma grande fonte com serifa no fundo que sangra na página. É uma ótima maneira de repetir a mensagem sem parecer repetitivo e adiciona uma pitada de mistério elegante ao site enquanto você tenta ler o que o texto de fundo diz (antes de descobrir o padrão).

10. Formas geométricas como elementos de fundo

Quando se trata do design do seu site, não pense demais. Embora as formas geométricas possam parecer muito “simples”, elas são familiares e descomplicadas (ambas qualidades que são boas para a experiência do usuário!). E com blocos de construção tão fortes, há muito que você pode fazer para colocar a marca de sua agência neles, para que pareçam tudo, menos simples.

Este exemplo de fourpillars usa formas simples (basicamente apenas blocos e pontos!) combinadas com movimento baseado na rolagem do usuário para criar uma experiência geométrica e dinâmica. À medida que você rola a página, você verá os blocos se construirem e se desintegrarem, sempre mudando para continuar contando a história. (Pode haver um ovo de páscoa do jogo “Pong” lá também, se você estiver procurando por uma pequena pausa!)

Embora as formas coloridas e ovais de Oh Happy Dani possam não ser tecnicamente geométricas, elas certamente alcançam o mesmo efeito lúdico. Emparelhados com as cores de sua marca, eles formam um ótimo quadro por trás de sua imagem de herói, e você os verá repetidos de novas maneiras em todo o site.

O Blab, um estúdio de comunicação, também faz uso de formas quase geométricas em sua página inicial. Esses padrões circulares/ovais/em forma de ovo crescem e encolhem à medida que você descansa na página e depois se movem para o lado quando você começa a rolar. Eles me lembram o som saindo de um alto-falante, que combina perfeitamente com a cópia na página “Sua voz mais alta”.

Este estúdio colorido, illo, usa formas geométricas logo atrás de sua mensagem principal na página inicial. Ao passar o mouse sobre as frases sublinhadas, uma das formas se moverá para revelar uma imagem, uma maneira inteligente de mostrar seu primeiro foco – design de movimento.

11. WordPress como CMS

Por último, mas não menos importante, é como esses sites são construídos. (Afinal, se o back-end não está servindo ao propósito que você precisa, não importa o quão bom o front-end seja!)

O WordPress agora alimenta mais de 40% da internet. Isso é quase metade de todos os sites (incluindo aqueles não construídos em um CMS), e é provavelmente devido à flexibilidade que o CMS realmente se tornou ao longo dos anos.

Não vendeu nele? Todos os sites deste resumo são desenvolvidos com WordPress, para dar um ótimo exemplo de tudo o que você pode construir com ele! De belos temas que ajudam você a começar rapidamente a mais de 55.000 plugins gratuitos que ajudam a estender a funcionalidade, o WordPress pode fazer praticamente qualquer coisa.

O que você acha dessas tendências de web design para 2021? Você concorda com a ascensão dos cursores personalizados ou acha que os designs 3D são apenas uma moda passageira? Deixe-nos saber nos comentários abaixo quais tendências você ama, ou quais você acha que estão faltando nesta lista!