12 tendências do Design para 2021

Tags:    

Tópicos

Receba atualizações semanais no e-mail

Boas-vindas ao nosso momento Mãe Diná anual de previsões. De tipografia retrô aos movimentos sociais do Design, irei te apresentar o que vale a pena ficar de olho neste ano.

Todo mundo já deve estar farto de ouvir que 2020 foi um ano que passou bem longe de ser fácil de lidar. Com suas garrafas de álcool gel, reuniões e aulas cansativas no Meets, a ansiedade em meio às tantas incertezas, o ano foi desgastante.  

Mas apesar de todas as circunstâncias, demos o nosso melhor enquanto humanidade (será?). Nós conseguimos seguir em frente nos mais diversos setores, alguns com maior necessidade de transformação que outros e o Design, certamente, esteve junto a todas essas (re)invenções.  

exemplo de 3d design e flat design

Aqui vão as que acreditamos serem as principais tendências no Web Design, UI e UX para tornar o seu começo do ano de 2021 um pouco mais inspirador🙂.

Tipografia Retrô 

É normal vermos coisas antigas retornarem à moda e, inexplicavelmente, isso se tornar absolutamente bacana. Bons exemplos disso são as pochetes e bicicletas fixas. Com as fontes é a mesma coisa, sendo a queridinha do momento a tipografia retrô. 

tipografia retrô por Burguer King
Burger King mudou sua identidade visual após 20 anos, apostando na tipografia retrô

Mas assim como a pochete e bicicletas antigas, é preciso dar uma repaginada para uma pegada mais moderna, dependendo do look ou complexidade do seu projeto. É o que alguns costumam chamar de “Retro-Futurismo”.

Tipografia retrô do Mailchipm

A tipografia sempre será uma das mais fortes ciências no Design e acompanhar suas tendências é caminhar junto à linha de frente dos designers pelo mundo.

Design 3D


O Design 3D não é exatamente novo, mas ele fica cada vez melhor e mais legal. Esse estilo com certeza é o principal responsável pelos grandes avanços tecnológicos e capacitação técnica dos nossos softwares de Design nos últimos anos.

mascote virtual da casas Bahia

Além disso, no ano de 2018, as gigantes NVidia, AMD e Microsoft lançaram a nova tecnologia de renderização gráfica em 3D, o Ray Tracing — ou RTX. Já muito difundida nos vídeo games que saíram nos 2 últimos anos, a tecnologia agora entrará com tudo na recém chegada Nona Geração de Video Games

combinação de design 3d e flat design
O  3D pode se mesclar com outros estilos, como o Flat Design. Reprodução: UOL.

O estilo 3D, assim como a ilustração, possui uma infinidade de aplicações que se encaixam em diversos produtos e públicos.

Emoji Design

É isto: os Emojis evoluíram e evoluíram até que ganharam o seu próprio estilo. Podemos dizer que eles são uma nova versão dos pictogramas. Diferente das placas de sinalização que nos informam num curto espaço de tempo, os emojis podem guiar as emoções do receptor da mensagem.

exemplo de aplicação de emojis

Entender que os emojis são uma forma de linguagem te abre a mente para processos criativos do design, como a identidade visual, conteúdo, definição do tom de voz, entre outros.

emojis interativos

Dark Mode (Modo Escuro/Noturno)


Podemos definir o Design de Interfaces como “Antes do Modo Escuro” e “Depois do Modo Escuro” e, a cada ano que se passa, as telas escuras são ainda mais difundidas por aí.

layout modo escuro do Kmusic

O crescimento dos dispositivos eletrônicos aliado à preocupação com a Experiência de Usuário formam a dupla perfeita para firmar o modo escuro como peça fundamental no Design de Interfaces moderno.

layout modo escuro do Habo

O modo escuro também tem benefícios para a acessibilidade, economia de bateria do celular e também redução de danos à visão daqueles que ficam muito tempo em frente às telas.

Ele trouxe uma função também comercial para as empresas, valorizando suas plataformas de maneira bem sutil e ao mesmo tempo eficiente. O layout escuro chegou para ficar.

Efeito Parallax

O efeito de rolagem em Parallax vem sendo uma forte tendência no Web Design nos últimos anos e ele não irá desaparecer em 2021. Cada vez mais esse estilo de animação e interação vem sendo explorado de maneiras criativas e inovadoras.

demonstração efeito parallax em site

É importante lembrar que o excesso do Efeito Parallax pode ser perigoso para quem sofre de Disfunções Vestibulares, pois os efeitos de profundidade e movimento podem causar desorientação e tontura.

Aqui vão algumas boas práticas que observamos serem utilizadas na aplicação deste efeito, sem causar danos colaterais:

  • Não deixe que o Efeito Parallax sobreponha uma informação importante;
  • Não permita que o efeito torne mais difícil completar uma tarefa, para o usuário;
  • Mantenha um número mínimo de sessões Parallax;
  • Minimize gradualmente a quantidade e intensidade de elementos em movimento;
  • Restrinja o Efeito Parallax em uma pequena área da tela;
  • Inclua a opção de desativar o efeito.

Rolagem Horizontal

Anteriormente visto como um passo em falso no Web Design, o Scroll Horizontal está de volta e dessa vez com força total.

Agora estamos vendo mais designers de Interface darem continuidade às aplicações e experimentações do Scroll Horizontal. Porém, não com o mero objetivo de ser diferentão, e sim separar informações primárias de complementares de maneira mais gráfica e interativa.

Para aplicar o Scroll Horizontal, não esqueça dessas seguintes considerações:

  • Não force os usuários a utilizarem o scroll do mouse ou se quer conte com que eles o utilizem: permita formas alternativas como as famosas setinhas de navegação;
  • Por falar nas setinhas, use pistas visuais que sejam evidentes para os usuários entenderem que aquela sessão é navegável de forma horizontal. Sem esconder botões com estado inativo e hover, por exemplo;
  • Reflita bem sobre qual conteúdo será exibido com a rolagem horizontal. Um bom exemplo são as galerias de mídia, onde é possível mostrar a miniatura das imagens no formato horizontal;
  • Evite aplicar a rolagem horizontal nos textos e conteúdos mais importantes. 

Scrollytelling

Não, Rogerinho. Não estamos inventando palavras. Vivemos um tempo em que, cada vez mais, os designers buscam trazer as narrativas dos projetos para dentro de seu design e é aqui que o Scrollytelling entra. Se trata de uma forma visual e interativa de contar histórias.

O Storytelling vem invadindo as estratégias de marketing e design, principalmente aqui no Brasil, já que adoramos ouvir uma boa história. O Scrollytelling é exatamente isso: uma espécie de “funil de vendas” sentimental e com alto apelo visual.

captura de tela do site Rouser

Resumidamente, o scrolltelling acontece quando vamos descendo a página e interações vão acontecendo: novos elementos surgem, ou desaparecem; um ícone passa a ter animação; zoom in ou zoom out num outro elemento; e daí por diante. Ou seja, o scrolltelling é uma história sendo contada à medida que damos scroll.

Um exemplo fantástico é a página de “Quem Somos” do coletivo Rouser.

Voice User Interface (VUI)

Chatbots por voz e assistentes virtuais, definitivamente, se tornaram uma das tecnologias mais queridinhas do ano de 2020. Eles mudaram nossa forma de pesquisar informações, anotar lembretes, organizar a rotina e uma gama infinita de outras opções. 

Você pode ir um passo além se considerar essa tendência tecnológica e de design para seu projeto. Empresas como Apple, Microsoft, Amazon, Google e Android já incluíram essa tecnologia emergente em seus processos de Design UI/UX e Desenvolvimento.

dispositivo echo

Implementar uma Voice User Interface pode ser a alavanca para tomar a liderança em meio ao seu nicho de clientes ou usuários. É uma tecnologia que ganha força e popularidade a cada dia.

Experiências Multimidiáticas

O crescimento constante de pessoas conectadas aliado à evolução das conexões Wifi fez com que experiências multimidiáticas se alastrassem por aí. Unir artes visuais, texto, vídeo e áudio traz uma experiência rica e marcante para os usuários.

Um recente case de sucesso foi o Crowdfunding do Jovem Nerd, site popular entre o público geek brasileiro. A campanha ganha esse destaque pela proposta de expandir a experiência dos ouvintes de uma minissérie de seu já consagrado podcast, o NerdCast.

captura de tela da campanha de crowdfunding

Baseado no clássico da literatura e terror O Chamado de Chutullu, H.P. Lovecrat, o site quebrou o recorde latino-americano das campanhas de financiamento coletivo, propondo novos formatos desta história como Revistas em Quadrinhos, Livros, Colecionáveis, Artes e Audiobooks. Até a Montegrappa e Iron Studios entraram nessa brincadeira. 

Realidade Aumentada (AR) e Realidade Virtual (VR) no seu negócio

Junto às experiências multimidiáticas, não podemos nos esquecer das incríveis experiências imersivas utilizando a AR e VR. Realidade Aumentada, nos dias atuais, é algo muito maior que sair caçando Pokémons por aí com o seu dispositivo mobile; e o VR além dos óculos que te transportam para outra realidade.

captura de tela do site da Jeep

Um exemplo incrível de aplicação da AR é a experiência criada pela Jeep, no site oficial da montadora de veículos. Através da plataforma é possível que o cliente monte seu veículo como bem entender, possibilitando a escolha de modelo, acabamentos, funções opcionais, acessórios, tipo de revestimento interno e tudo mais.

Além de sua funcionalidade super útil, a imersão digital torna a experiência de compra mais completa, já que o cliente tem maior liberdade para avaliar opções, ter uma resposta visual e financeira imediata. Além de aspectos mais subjetivos, como tirar dúvida sobre algo que poderia sentir vergonha de perguntar a um vendedor, por exemplo.

As Realidades Aumentada e Virtual são campos ainda pouco explorados. Suas possibilidades são infinitas e aplicáveis para todo e qualquer setor.

Realidade Virtual (VR) e eventos imersivos

Como era de se esperar as conferências, congressos, exibições e quaisquer outros eventos, foram arruinados no último ano. Podemos dizer que este foi um dos primeiros setores a sentir o impacto do Novo Normal. 

Entretanto, vimos uma mudança muito rápida na dinâmica de funcionamento dos eventos. A Sympla até lançou uma plataforma de Streaming e, sem demorar muito, começaram a surgir os eventos com imersão digital através da VR.

Eventos virtuais trocam filas quilométricas e corredores lotados pelo conforto do lar de cada pessoa. É um campo que veio para ficar em termos de logística e estrutura para grandes produtores de eventos.

Um ótimo exemplo foi a CCXP 2020 (Comic Con Experience), evento brasileiro feito nos moldes da anual Comic Con San Diego (Califórnia, E.U.A). No ano passado, o evento ganhou a sua versão virtual chamada de CCXP Worlds.

imagem divulgação da comic con experience worlds 2020

O evento, realizado pela primeira vez online, foi transmitido para 113 países e contou com 250 lives simultâneas voltadas à Cultura Pop. Painéis com grandes nomes de Hollywood, stands virtuais, lançamentos de trailers e uma infinidade de outros conteúdos foram acessados por milhões de pessoas através de um universo online criado com a tecnologia Unreal

Acessibilidade Digital ganhando mais força

O ano de 2019 foi bem importante para a Acessibilidade Digital. Segundo o movimento Web Para Todos, esse foi um ano em que os processos relacionados à acessibilidade digital ganharam popularidade. A Tecnologia Assistiva, por exemplo, ganhou mais força e a Microsoft resolveu tomar frente nesta luta no mercado dos video games

controle de Nintendo Switch para PCDs
Controle de Nintendo Switch para pessoas com deficiência, desenvolvido pela marca Hori

Naturalmente, as expectativas para 2020 eram as melhores possíveis e elas foram, quem sabe, até superadas. O mundo conectado e dentro de casa talvez tenha ajudado a entender que a acessibilidade não beneficia somente as pessoas com deficiência. Uma vasta quantidade de sites, aplicativos e plataformas incluíram recursos de acessibilidade em seus conteúdos.

Outro ponto marcante para a Acessibilidade Digital foi o lançamento da WCAG 2.2 (Web Content Accessibility Guidelines). 

E, claro, é preciso mencionar os video games, em especial o vencedor de Jogo do Ano de 2020 em diversas premiações, The Last Of Us Part II. O game já entrou para a história por ter feito grandes premiações criarem uma nova categoria em suas cerimônias: Acessibilidade. Isso graças às suas mais de 60 (sessenta) configurações de acessibilidade. O vídeo abaixo fala por si só

Nota: não devemos tratar a Acessibilidade como uma tendência, pois ela é uma bandeira que deve sempre ser mantida erguida. Afinal, se trata de Direitos Humanos e Constitucionais, além do nosso propósito enquanto designers de tornar o mundo um local para todos. É nosso dever pontuar e acompanhar os avanços desta área e por isso essa menção honrosa na lista. 

No Code / Low Code

O movimento No Code não significa a extinção dos códigos. Os desenvolvedores e desenvolvedoras sempre serão extremamente importantes. No Code significa tornar o desenvolvimento acessível àqueles que não sabem programar, permitindo que qualquer pessoa possa pôr em prática sua ideia ou visão.

Através do No Code, os designers podem se tornar desenvolvedores Front-End. Analistas de RH podem criar seus formulários nos sites de suas empresas e uma simples loja de roupas do bairro se tornar um e-commerce acessado por todo o mundo. 

Já existem várias plataformas No Code disponíveis e a tendência é que elas melhorem e aumentem em quantidade. 

Quer um exemplo prático? Este site que você está acessando foi 100% construído pelo nosso Growth Specialist, Vitor Galante, e este humilde designer a que vocês escreve. E aí, estamos aprovados?

O que vem por aí

É sempre empolgante acompanhar de perto as evoluções do Design e como ele está intrínseco às transformações tecnológicas e culturais da sociedade. Mal podemos esperar pelo o que a comunidade do Design irá criar para o mundo neste ano.

Deseja compartilhar seu trabalho mais recente conosco e com os demais leitores? Marque o nosso perfil do Instagram, Linkedin ou Facebook em sua publicação.

Que o seu 2021 seja feliz e cheio de projetos. ✊

Respostas de 4

  1. Parece que tem equívoco no item 1.7. O título é STORYtelling, assim como está na descrição do item, e não SCROLLYtelling. Vale revisar 😉

    1. Olá, Claudia. Foi um equívoco não. É scrolltelling mesmo. Sabe quando vamos descendo a página do site e os elementos vão surgindo e mexendo na tela? É exatamente isso! Uma história contada à medida que vamos dando scroll. 🤗

      1. Obrigada pela resposta, Taysa! Não conhecia o termo… Mas ficou confuso no texto pq vcs mencionam o Storytelling também no mesmo item. Talvez tenha faltado exatamente essa descrição que vc respondeu pra mim: “Uma história contada à medida que vamos dando scroll. “!
        Vivendo e aprendendo! 😀

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Posts relacionados

Estamos contratando, venha conferir nossas vagas