Se queres estar a par das novidades e começar o próximo ano com o pé direito, neste artigo vamos abordar as tendências de web design para 2020. Canvas, 3D, tipografias gigantes, contrastes, inteligência artificial, machine learning, reconhecimento de voz e muito mais.
[superfeatured]7076[/superfeatured]
Mais um ano, cá estamos nós a preparar-nos para o que aí vem. Já quase em novembro, queremos estar prontos para o próximo ano — e queremos que quem nos visita também esteja. Como já é tradição, preparámos um artigo para falar sobre o que vai marcar o universo do web design em 2020.
Acompanhe a evolução → as tendências de web design para 2026 apostam no minimalismo, IA e experiências mais humanas.
Este tipo de artigo é um dos pilares do nosso blog e, ano após ano, traz-nos muitas visitas e até pedidos de orçamento de quem procura as últimas tendências em web design, design gráfico e marketing. Por isso, dedicamos cada vez mais tempo, atenção e empenho a este conteúdo. O nosso objetivo é oferecer informação de qualidade, tanto para profissionais de design como para potenciais clientes à procura de inspiração para o seu novo site. Além disso, criar conteúdo relevante ajuda-nos a manter uma boa posição nos motores de busca. Já sabem: Content is king!
WOWWW! Já temos o novo artigo sobre as tendências de web design para 2021!!!
Artigos de anos anteriores que te podem interessar: Tendências em web design 2019 – Tendências em web design 2018 – Tendências em web design 2016
Tendências em web design para 2020, antecipa-te
Tipografias ainda maiores
Uma das grandes tendências para 2020 será, sem dúvida, o uso de tipografias de grandes dimensões. Não só nos títulos, mas também no corpo do texto.
Com a popularização dos ecrãs panorâmicos de alta resolução e a descida dos preços destes equipamentos, o tamanho das letras nos textos já está longe dos 12 ou 14 píxeis dos anos 2010. Agora, é perfeitamente aceitável usar 20 píxeis ou mais, sempre que o projeto e o site o justifiquem.
Nos títulos, não há limite — além do bom gosto e do sentido estético. Por isso, arrisca e usa tamanhos gigantes para criar contraste. Títulos bem escritos e em grande destaque dão personalidade a qualquer site que queira sobressair e estar preparado não só para 2020, mas para os próximos anos.
Como e quando aplicar
Aplica esta tendência em sites que:
- Peçam um design muito visual e impactante
- Tenham poucas imagens e precisem de reforço visual — tipografias grandes, usadas sem medo, dão o destaque necessário
- Não sejam dirigidos a um público demasiado conservador
- Tenham como alvo utilizadores com equipamentos modernos, especialmente ecrãs grandes
Atenção:
- Deves ajustar os tamanhos para diferentes resoluções. Cria exceções responsivas, desde 2560px (ecrã grande) até aos mais comuns 1330px (portátil)
- Garante que os tamanhos fazem sentido na versão mobile, já que a maioria dos utilizadores navega em dispositivos móveis
Websites que seguem esta tendência
Rogue Studio
Neste site, o uso de tipografias não é só grande… é ENORME. E resulta na perfeição.
Acredito que este site será um dos nomeados para o nosso artigo anual dos melhores web designs do ano.
Granyon Summer Party
Outro excelente exemplo da tendência aplicada na perfeição. Não só o título principal, mas também o corpo do texto surge em tamanho generoso.
Team Elite Kickboxing
Para terminar, mais um exemplo onde a tendência está bem patente. Além disso, este site também segue na perfeição a próxima tendência de que vamos falar.
Contrastes, cores negativas e tons vibrantes
O uso de contrastes e cores negativas tem ganho cada vez mais destaque no design e desenvolvimento web. Em 2020, esta tendência mantém-se e vamos ver sites de grande impacto visual, sem qualquer receio de arriscar.
Liberta o teu lado mais ousado e aposta em contrastes e cores vivas. Aplica filtros às imagens, seja previamente em photoshop ou recorrendo a ferramentas modernas de desenvolvimento web, como os blending modes em CSS ou até o elemento canvas.
Como e quando aplicar
Aplica esta tendência em sites que:
- Peçam um design visual e marcante
- Não sejam dirigidos a públicos muito conservadores
- Queiras captar a atenção e não deixar ninguém indiferente
Atenção:
- Em sites corporativos para empresas conservadoras, usa esta abordagem com muita subtileza
- Aplica contrastes de forma coerente, respeitando a imagem e as cores da marca
- Mesmo com contraste, mantém a harmonia visual criando uma paleta de cores equilibrada
Websites que seguem esta tendência
Ninja guru
Aqui vemos o contraste levado ao extremo: tanto com cores negativas (preto/branco) como com combinações vibrantes (azul/laranja).
Festa da Francofonia 2019
Cores vivas, contrastes, elementos geométricos em movimento… Um site que não passa despercebido e um exemplo perfeito de uma das tendências-chave para 2020.
Kombu
Neste site, o contraste é usado no packaging de cada bebida, representando o sabor de cada uma. O efeito “wavy” nas linhas diagonais, a condizer com o packaging, é brilhante. Um ótimo exemplo de como usar contrastes e efeitos JS com sentido, mantendo uma comunicação formal adequada ao produto.
Experiência mobile, ainda mais essencial
Hoje em dia, todos conhecem o conceito de responsive web design, por isso talvez já não seja uma “tendência” no sentido clássico.
Com a maioria dos utilizadores a navegar em dispositivos móveis, é fundamental pensar neles e criar experiências totalmente adaptadas ao dispositivo e ao contexto de utilização. Ou seja, levar o responsive web design a outro nível.
Já não chega ter um site adaptável. Agora, é preciso ir mais longe e inspirar-se na usabilidade das apps. Se conseguirmos que a navegação no nosso site seja o mais parecida possível com uma app, estaremos a falar a mesma linguagem do utilizador. Estaremos à frente.
Outro ponto crítico para utilizadores mobile é garantir tempos de carregamento otimizados.
Dicas práticas
- Evita vídeos em autoplay, pois consomem dados e podem prejudicar quem não tem wifi
- Otimiza as imagens, servindo versões adaptadas à largura do dispositivo para acelerar o carregamento
- Usa menus tipo “burger” para compactar a navegação num formato semelhante a uma app
Websites que seguem esta tendência
Nicholas Munt
Este site, ao usar ajax para carregar cada página, é muito mobile friendly, aproximando-se bastante da experiência de navegação das apps.
Salmoon & Sons
Neste site, em versão mobile, destaca-se o slider com swipe totalmente fluido — a imagem acompanha o dedo na perfeição. O menu burger também está muito bem conseguido, deslizando lateralmente.
Volia
Como podem ver, este site usa tipografias grandes, mas bem adaptadas à versão mobile. O menu burger está muito bem implementado e a transição é bastante interessante.
WOWWW! Já temos o novo artigo dos melhores designs web 2019-2020!!!! Clica já!
Cursores e scrolls personalizados
Uma tendência que tem vindo a crescer é a criação de cursores personalizados, substituindo o cursor padrão do navegador.
Estes cursores costumam interagir com os elementos à volta, mudando de tamanho, cor, etc. É uma tendência recente, mas que vai ganhar ainda mais força em 2020.
O mesmo acontece com as barras de scroll: cada vez mais vemos scrollbars totalmente personalizadas, ignorando as do navegador. Muitas vezes, vêm acompanhadas de um deslizamento suave (smooth scrolling).
Outra tendência em alta é o não uso de scrollbars, mesmo havendo conteúdo adicional. O utilizador já está tão habituado a fazer scroll que podemos criar interfaces mais minimalistas, dispensando a barra. Se isso for demasiado radical, podes optar por não mostrar a barra mas indicar o scroll com um ícone típico de “scroll down”.
Como e quando aplicar
Aplica esta tendência em sites que:
- Queiras dar um toque extra de personalidade
- Tenham utilizadores avançados ou habituados ao mundo digital
Atenção:
- Garante que o scroll funciona corretamente em todos os navegadores
- Em mobile, o scroll pode comportar-se de forma estranha — o melhor é ocultá-lo por completo
Websites que seguem esta tendência
Aluxion
Aqui temos um scroll personalizado, composto por duas circunferências — uma grande e uma pequena — que seguem o cursor com um ligeiro atraso e ainda oferecem um efeito hover muito apelativo. Também há uma scrollbar personalizada, o que integra todo o design.
Joseph Berry
Este cursor, semelhante ao anterior, destaca-se por incluir uma circunferência exterior em formato tipográfico. Neste caso, optaram por não usar scrollbar — uma tendência que vai crescer, já que os utilizadores estão cada vez mais habituados a fazer scroll de forma intuitiva.
Matt VBRG
Neste site, o cursor interage com todo o conteúdo, mudando cores e aplicando efeitos visuais marcantes, como o efeito cromado nas imagens.
Canvas e elementos 3D com Three.js
O uso de Canvas em web design tem vindo a ganhar destaque e, em 2020, será uma das tendências de referência para criar sites de última geração.
Com canvas, podemos usar opengl para criar experiências que vão muito além do HTML tradicional. A liberdade criativa é total.
Um dos aspetos mais explorados do Canvas é o uso das 3 dimensões para criar profundidade e objetos 3D interativos — ao ponto de um site quase parecer um videojogo.
Para criar estas experiências 3D, existe a famosa biblioteca Three.js. Com ela, é possível criar objetos 3D ou importar modelos feitos em programas de modelação. O mais interessante é a possibilidade de interagir com estes elementos, criando experiências verdadeiramente imersivas.
Sem dúvida, o uso de Three.js para 3D será uma das grandes tendências de web design em 2020
