Tendências de web design 2021: scrollytelling, efeitos 3D e mais interação

Sonja Hoffmann Última atualização 22.02.2021
9 min.
Webdesign-Trends-2021
Última atualização 22.02.2021

Depois de um ano como o que acabamos de viver, é quase utópico aventurarmo-nos numa perspetiva sobre as tendências futuras. Afinal, quem pensaria em 2020 que o mundo poderia e mudaria tão rapidamente? E quão rápido nos podemos podemos adaptar às mudanças. Vamos dar uma olhada nas tendências de web design para 2021!

O novo normal domina-nos: a tecnologia tornou-se mais importante para nós e mais integrada na nossa vida quotidiana. Como resultado, a nossa tecnologia precisa de se mover numa direção que permita mais personalização, integração e interação. E para todos nós. 

Confinamento, teletrabalho e afins deslocaram mais o nosso foco para o digital. No entanto, esta tendência também causou e continua a causar um rápido crescimento dos produtos digitais. O mesmo se aplica ao setor do comércio eletrónico. Tudo isso requer mais individualidade e habilidade para se poder posicionar contra um número maior de concorrentes.

Neste momento é importante focar nos utilizadores e utilizadoras finais. Trata-se de surpreendê-los/las, integrando-os/as e personalizar a internet. E de manter o foco sempre na máxima funcionalidade.

Assim, neste novo ano, vemos mais oportunidades para a personalização. Vemos mais frequentemente a possibilidade de alternar entre o modo escuro/modo claro ou mesmo de personalizar as cores de um design em si.

Vemos designs que são mais ousados e menos simétricos. A contra tendência para a integração de cores e elementos orgânicos permanece. Conseguimos mais personalidade através de colagens, media mistos e a integração de efeitos de animação. Vamos dar uma vista de olhos às tendências de web design para 2021 agora!

1. Scrolling

Paralaxe e animações de scroll paralaxe

O paralaxe, especialmente com imagens simples, é algo que já usamos há vários anos. Recentemente, adicionámos animações complexas de scroll parallax. Usadas corretamente, estas transformam o teu site de um fundo plano em 2D num mundo digital interativo - comparável a um palco de teatro.

O que é o efeito de paralaxe?

Os efeitos de paralaxe ocorrem quando os elementos estão localizados a diferentes distâncias uns dos outros. Se estes se movem através de "scrolling", percebemos o seu movimento como velocidades diferentes.

Observação: Para os utilizadores e utilizadoras que sofrem de tonturas, demasiados movimentos no teu site podem causar desconforto.

Algumas dicas sobre como integrar com sucesso o efeito de paralaxe:

  • Certifica-te de que as informações importantes são sempre apresentadas de forma clara e não são encobertas pelos efeitos.
  • Certifica-te de que todas as funcionalidades do teu site são mantidas em todos os dispositivos - mesmo em condições subótimas, como por exemplo, má recepção da internet.
  • Minimiza o uso de efeitos de paralaxe.
  • Considera incluir uma opção para desativar o efeito.
Webdesign-Trends-2021

O site do jogo Firewatch usa oito imagens PNG diferentes no cabeçalho, que são animadas juntas para transmitir a sensação de uma paisagem real. Na versão móvel, porém, o efeito de paralaxe é substituído por uma imagem estática.

Animações de scroll (rolagem)

As animações de scroll (rolagem) extensivas também não são inteiramente novas, mas têm até agora recebido menos atenção - provavelmente porque a sua composição requer habilidades de desenho. Como sempre, menos é mais. Bem usado, as animações de scroll dão ao teu site um fluxo harmonioso. 

Webdesign-Trends-2021

ToyFight é uma agência criativa sediada em Manchester. Através do uso inteligente de animações acionadas por scroll, a agência adiciona dinamismo e personalidade ao seu site. Mesmo em dispositivos menores, as animações funcionam - mesmo que o tempo de carregamento seja um pouco afetado.

Webdesign-Trends-2021

A empresa Prevint oferece um conceito global contra a violência sexual. Através do uso mínimo de animações de rolagem (scroll), são visualizadas as três medidas mais importantes para a prevenção. Especial aqui é o uso de rolagem vertical e horizontal: a navegação principal é a nível vertical, enquanto a rolagem horizontal vai mais fundo no respetivo tema.

As setas de navegação na parte inferior do ecrã fornecem orientação adicional. No lado móvel, a navegação é feita tocando apenas nos botões.

Fazer scroll na horizontal

Embora as opiniões sobre a rolagem horizontal tenham variado muito no passado, vemos sites a utilizá-la cada vez com mais frequência. Especialmente do ponto de vista da experiência do utilizador, a sua utilização era anteriormente considerada bastante questionável.

Webdesign-Trends-2021

O site da Home Société, construído como "One Pager", funciona completamente orientado horizontalmente. A navegação "sticky", que normalmente encontramos no topo, é do lado esquerdo. Funciona da mesma forma com Anchor Links como num Anchor Pager orientado verticalmente. No telemóvel, temos a página exibida verticalmente.

Webdesign-Trends-2021

O site da Kwok Yin Mak é um portefólio de design que percorre horizontalmente todas as páginas integradas. A diferença para a Home Société é o uso da infinite scrolling (rolagem infinita): quando se chega ao fim de uma página, é-se transportado de volta para o início sem se notar. Esta página também dispensa a rolagem horizontal numa base móvel.

Algumas dicas sobre como integrar com sucesso a rolagem horizontal:

  • Dá aos teus utilizadores e utilizadoras um plano B, como por exemplo, setas ou um menu "sticky", para navegar no teu site.
  • Pense qual o conteúdo da sua página que irá beneficiar da rolagem horizontal.
  • Tenta seguir o mais possível uma direção. Mudar de direção com demasiada frequência irá confundir os teus utilizadores e utilizadoras.
  • Tem cuidado com a mistura de textos longos e a rolagem horizontal. Este layout pode tornar os teus textos menos legíveis.
Que tipo de letra se adequa ao meu site?

Uma fonte apropriada torna o teu site muito mais interessante, e não apenas visualmente. As fontes têm uma influência crucial sobre se as secções do texto são ignoradas ou lidas. Neste artigo vou mostrar-te como encontrar a fonte perfeita para o teu site!

Scrollytelling

Scrollytelling significa narração visual de histórias através de rolagem animada. Isto dá ao site personalidade e uma sensação de interatividade. O conteúdo longo é apresentado de uma forma facilmente digerível. As histórias são construídas de uma forma mais interessante e comunicadas de uma forma mais apelativa. A internet está ser usada cada vez mais como um meio para contar histórias interativas. 

Webdesign-Trends-2021

O The New York Times usa uma abordagem relativamente minimalista. A imagem de cabeçalho consiste num efeito de paralaxe seguido de muito texto. Isto está compactado em parágrafos claros de pare e é visualmente apoiado por secções de paralaxe em Comic Style.

Melhores práticas, dicas e diretrizes em web design

O que faz um bom web design? E o que definimos sequer como padrão de design? Podes encontrar as dicas mais importantes para sites de sucesso no meu artigo sobre as Melhores práticas em web design.

Webdesign-Trends-2021

Um exemplo interessante é também o Webflow. O site convida-te numa viagem pela história da arte em busca das tendências do web design do futuro.

Webdesign-Trends-2021

O efeito também não perde o seu interesse quando e dispositivos móveis.

Webdesign-Trends-2021

canals-amsterdão.nl combina scrollytelling com navegação horizontal, animação e paralaxe. Um detalhe especial: o menu sticky muda a sua cor de fundo dependendo da cor da posição atual. Mais informações sobre este tópico podem ser encontradas no Guia de scrollytelling.

Cartões de scroll

Por cartões de scroll entendemos a rolagem vertical ou horizontal, que se encaixa na janela seguinte antes de continuarmos a navegar. Podes enfatizar visualmente isto, por exemplo, por separações coloridas, que dão a sensação de cartões, como no exemplo de Green Meadow.

Webdesign-Trends-2021

Outras peculariedades aqui são as animações de texto que estão sempre a recarregar, assim como a rolagem infinita, que nos dá a sensação de um site infinito.

2. Composições de design e layout

Integração das características físicas do produto a ser vendido

Webdesign-Trends-2021

Ora London vende vernizes de unhas, entre outras coisas. Para o layout de design do site eles usam a textura do seu produto.

Webdesign-Trends-2021

No site Main Squeeze Juice, há manchas de cor que se podem assemelhar a uma versão desbotada dos seus sumos de frutas. Também muitos títulos utilizam este efeito.

Webdesign-Trends-2021

Ora The Floral Agency destacou visualmente o seu site com flores da sua gama de produtos. 

Neomorfismo

O neomorfismo ou novo morfismo tem sido declarado uma tendência há bastante tempo. Mas a razão pela qual os dessigns minimalistas têm sido tratados com aversão na cena criativa deve-se principalmente a estas duas razões:

  1. O neomorfismo é difícil de reproduzir. Se não for criado corretamente, rapidamente o design parece muito pouco profissional.
  2. Devido a sombras suaves e baixo contraste, os elementos no novo design de morfismo podem causar problemas aos utilizadores e utilizadoras finais. 

Em 2021, a tendência do noemorfismo está agora a "descolar". O modelo Neu Vision mostra uma integração amigável do neomorfismo no dia-a-dia.

Webdesign-Trends-2021
Tutorial: Como criar novos elementos de neomorfismo

Com a ferramenta Neumorphism.io podes experimentar o neomorfismo. O código CSS correspondente está incluído no pacote. Podes encontrar mais informações sobre o tema aqui neste artigo.

Composições abstratas, colagens e media mistos

Como mencionado anteriormente, os sites podem mostrar mais personalidade. Uma maneira de conseguir isto é através de composições abstratas ou colagens. Também é permitida a mistura de diferentes suportes - sejam ilustrações desenhadas à mão, emparelhadas com formas geométricas perfeitas.

Webdesign-Trends-2021

City Circus usa colagens em todo o seu site.

Efeito borrão e Efeito vidro fosco

O Frosted Glass Effecto (ou Efeito Vidro Fosc) é ideal para tornar o texto nas imagens legível. Também pode ser usado como efeito "Hover". Um tutorial sobre como implementar o efeito de vidro fosco no CSS pode ser encontrado aqui.

Webdesign-Trends-2021
Fonte: Codepen.io

3. Cores

Orgânico e discreto

Webdesign-Trends-2021

O site pureorganix.ca tende a usar poucas e brilhantes cores naturais. Os tons de cores orgânicos já existem há algum tempo e continuarão a ser um tema em 2021.

Preto Branco

Webdesign-Trends-2021
Site: UX Database

A ausência completa de cores faz com que o teu site pareça minimalista, arrumado e limpo. O toque sério criado pela omissão de tons acolhedores foi bem equilibrado pelo uso de ilustrações no site UX Database.

UX Design e Usabilidade da Web

Porque deverias estar interessado na usabilidade e na experiência do utilizador como web designer? E como realmente garantes uma mais-valia aos teus utilizadores e utilizadoras através de um bom UX? Eu digo-te isso e muito mais neste artigo.

4. 3D

Ícones e imagens

Tal como com a Realidade Virtual (RV), temos estado já há algum tempo à espera que os objetos 3D façam finalmente a sua grande descoberta. Como no início de cada ano, espera-se que os elementos 3D e RV desempenhem um papel maior a partir de agora. Não se prevê que isto seja diferente em 2021.

Os elementos 3D serão cada vez mais utilizados em 2021: por exemplo, como substituição de ícones 2D e ilustrações, para representar produtos, e como elementos de design geométrico.

Também vamos ver 3D como uma parte interativa do site, como no caso da agência Dogstudio.

Webdesign-Trends-2021

Ou como um elemento estático ou animado, como se pode ver no exemplo seguinte.

Webdesign-Trends-2021
Site: https://www.yaya.co/

E-Commerce

A realidade aumentada já foi utilizada esporadicamente para fins de comércio eletrónico no passado. Como com a App da IKEA.

Webdesign-Trends-2021

Diesel, por outro lado, conta mais com a variante interativa 3D.

Webdesign-Trends-2021

Ambas as abordagens fazem sentido para o respetivo produto. Ser capaz de testar mobiliário virtualmente na tua futura casa não reduz apenas as hipóteses de fazer uma má compra. A App também é divertida e oferece incentivos para decorar e fazer compras.

A Diesel, por outro lado, está a tentar criar uma espécie de sensação 3D , permitindo que os utilizadores e utilizadoras finais examinem e virtualmente sintam o produto antes de o comprarem.

No passado, a integração de elementos de realidade aumentada/virtual e elementos 3D era muitas vezes bastante cara e, portanto, reservada a empresas maiores. Com as novas ferramentas, a integração da realidade aumentada (RA) tornou-se agora possível também para as empresas mais pequenas.

Aqui estão dois exemplos:

5. Conteúdo

A web está a tornar-se mais pessoal, mais interativa e a adaptar-se a nós.

O Google oferece um exemplo de interatividade com o seu Blob Opera. As próprias criações também podem ser gravadas e assim partilhadas com todos.

Webdesign-Trends-2021

Na página de contacto da Madwell, cada elemento gráfico é interativo.

Webdesign-Trends-2021

Sennep oferece os seus serviços com muita personalidade,.

Webdesign-Trends-2021

Web Design para causas

Além disso, 2020 acaba de mostrar que todos nós podemos trabalhar em rede uns com os outros e temos até mesmo às vezes de o fazer. A rede tornou-se mais humana. O web design para causas está a tornar-se cada vez mais relevante. Sites éticos, sites verdes, sites para nos defendermos e aos nossos semelhantes (para citar apenas alguns exemplos) aumentaram muito em importância no ano passado. Podemos esperar que esta tendência continue fortemente em 2021.

Conclusão

Estar em contacto com amigos de todo o mundo, trabalhar remotamente, comercializar produtos e serviços online - isto não é novidade. E no entanto, até agora, tem sido mais uma realidade para uma minoria da população. 

Muitas empresas e pessoas neste país têm até agora abordado o tema de forma bastante tradicional: temos possibilidades de presença na web e networking, mas usamo-las apenas secundariamente. O contacto pessoal estava em primeiro plano. 

A funcionalidade dos nossos produtos online é, portanto, particularmente importante - também porque a concorrência é muito maior. E, no futuro, não podemos mais ignorar tóemas como a acessibilidade.

É claro que uma chamada de vídeo não pode substituir uma reunião presencial importante. Mas talvez aprendamos através da situação atual a distinguir entre o que são reuniões realmente importantes e o que também pode ser feito com a ajuda de um telefonema. Esta abordagem fez-se muitas vezes sentir na qualidade da presença digital. 

Frases como "Se alguém quiser saber, telefona-nos ou pergunta-nos" são algo que já ouvi mais vezes no passado, quando planeava projetos online. Com o novo foco no isolamento e no teletrabalho, já não temos este luxo.

É por isso que o design móvel, desempenho, usabilidade e afins continuarão a ser fatores importantes na criação do teu site em 2021.

Webdesign-Trends-2021
Twitter

Ao carregares o tweet, aceitas a política de privacidade do Twitter.
Saber mais

Carregar conteúdo

PGJsb2NrcXVvdGUgY2xhc3M9InR3aXR0ZXItdHdlZXQiIGRhdGEtd2lkdGg9IjU1MCIgZGF0YS1kbnQ9InRydWUiPjxwIGxhbmc9ImVuIiBkaXI9Imx0ciI+UGVvcGxlIG9mdGVuIGZvcmdldCBhYm91dCBjb2duaXRpdmUgaW1wYWlybWVudC4gIE5vLCB0aGF0JiMzOTtzIG5vdCBhbiBpbnRlbnRpb25hbCBwdW4uIDxicj5OaWNlIGV4dGVuc2lvbiBvZiA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL01pY3Jvc29mdD9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5AbWljcm9zb2Z0PC9hPiBpbmNsdXNpdmUgZGVzaWduIHdlIGRpZCBhdCB0aGUgPGEgaHJlZj0iaHR0cHM6Ly90d2l0dGVyLmNvbS9Nb0pHb3ZVSz9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5ATW9KR292VUs8L2E+LiAoYXBvbG9naWVzIHRvIGxhcnJ5IG1pbGVzLCB0b21hc3oga29sZWNraSwgamVuIGxlbW9uIGV0IGFsIGNhbiYjMzk7dCBmaW5kIHlvdSBvbiB0d2l0dGVyISkgPGEgaHJlZj0iaHR0cHM6Ly90LmNvL3NkU0hQMDRGeWYiPnBpYy50d2l0dGVyLmNvbS9zZFNIUDA0RnlmPC9hPjwvcD4mbWRhc2g7IE1hcmsgTWNFbGhhdyAoQG1hcmttY2VsaGF3KSA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL21hcmttY2VsaGF3L3N0YXR1cy85ODkwNDk5MzM4MTc5NjI0OTc/cmVmX3NyYz10d3NyYyU1RXRmdyI+QXByaWwgMjUsIDIwMTg8L2E+PC9ibG9ja3F1b3RlPjxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL3BsYXRmb3JtLnR3aXR0ZXIuY29tL3dpZGdldHMuanMiIGNoYXJzZXQ9InV0Zi04
As tuas perguntas sobre as tendências de web design para 2021
Conta-nos as tuas perguntas e previsões sobre as tendências de web design 2021 nos comentários abaixo - estamos curiosos. Queres ser informado/a sobre novos artigos de WordPress? Então segue a RAIDBOXES no Twitter Facebook e através da nossa newsletter.

Depois de estudar design de jogos e escrita criativa na verde Auckland, na Nova Zelândia, a Sonja especializou-se em design de web e aplicações e seu desenvolvimento. O seu foco é a gamificação e a exploração da motivação e experiência do utilizador, aliado à paixão e curiosidade pelas tendências tecnológicas.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.