Novas ten­dên­cias surgem a cada segundo no mundo do web design, para moldar o mundo on-line. As ten­dên­cias de web design mais populares hoje procuram capturar o olhar com letras em 3D, por exemplo, ti­po­gra­fias cha­ma­ti­vas e elementos de en­tre­te­ni­mento, como joguinhos em páginas de erro 404. Conheça aqui as 15 ten­dên­cias de web design que vão deixar você to­tal­mente preparado para o futuro do web design.

O cons­tru­tor de sites da IONOS

MyWebsite é sua virada de chave para uma presença web pro­fis­si­o­nal, e inclui consultor pessoal!

  • Cer­ti­fi­cado SSL
  • Domínio
  • Suporte 24 horas

As 15 ten­dên­cias de web design mais modernas

Que fique claro que 2023 continua com várias ten­dên­cias que já bombavam nos anos an­te­ri­o­res. Isso significa que nenhuma mudança brusca foi re­gis­trada no mundo on-line. Contudo, várias ten­dên­cias apontam para a oti­mi­za­ção da ex­pe­ri­ên­cia do usuário UX design. Isso quer dizer que os web designers devem se atentar cada vez mais a esse movimento, que já vem moldando os sites do futuro. Apre­sen­ta­mos agora as 15 ten­dên­cias de web design mais modernas em 2023:

  1. Web design retrô
  2. Elementos in­te­ra­ti­vos em 3D
  3. Ma­xi­ma­lismo e excesso
  4. Web design de en­tre­te­ni­mento
  5. Páginas de erro 404 criativas
  6. Vídeos curtos com valor agregado
  7. Ti­po­gra­fias ousadas e originais
  8. Ne­o­mor­fismo
  9. Scrolling design: rolagem infinita e efeito parallax
  10. Ve­lo­ci­dade e per­for­mance
  11. Ex­pe­ri­ên­cia do usuário per­so­na­li­zada
  12. Realidade virtual e realidade aumentada com WebXR
  13. Apri­mo­ra­mento dos chatbots
  14. Design sus­ten­tá­vel
  15. Mi­croin­te­ra­ções

Web design retrô

Ao visitar certos sites em 2023, você pode se sentir viajando no tempo. Imagens retrô, elementos pi­xe­li­za­dos e es­tru­tu­ras de navegação típicas do início da internet voltaram com tudo. Os anos 90 e prin­ci­pal­mente os 2000, ca­ri­nho­sa­mente chamado de Y2K, são atual fonte de ins­pi­ra­ção. Cursores per­so­na­li­za­dos, com ou sem efeitos, também estão sendo bastante uti­li­za­dos em projetos web. Hoje, usuários podem desenhar seu próprio ícone de cursor, adicionar elementos animados e efeitos ativados pelo movimento do mouse. O site 90’s Cursor Effects exem­pli­fica essa tendência nos­tál­gica.

Imagem: Exemplo de cursor retrô
Efeito do cursor ativado por movimento do mouse

Elementos in­te­ra­ti­vos em 3D

As ten­dên­cias de web design para 2023 também incluem efeitos 3D, que pro­por­ci­o­nam aos vi­si­tan­tes uma ex­pe­ri­ên­cia mais imersiva. Usuários adentram um mundo virtual que pode ser explorado por meio de cliques e rolagens. A loja de de­par­ta­men­tos es­ta­du­ni­dense Blo­o­ming­dale’s, por exemplo, in­cor­po­rou essa tec­no­lo­gia ao seu site, ao pro­por­ci­o­nar uma ex­pe­ri­ên­cia de compras imersiva.

Sites com elementos 3D que podem ser movidos por cliques do mouse ou pelo toque de um dedo estão se tornando cada vez mais comuns. Para o comércio ele­trô­nico (e-commerce) em especial, objetos in­te­ra­ti­vos têm um enorme potencial. Os con­su­mi­do­res podem agora vi­su­a­li­zar um produto de todos os lados e ângulos, para obter uma impressão exata. Elementos 3D simulam uma ex­pe­ri­ên­cia de compra in loco, em que se tem a pos­si­bi­li­dade de ins­pe­ci­o­nar um objeto antes de comprá-lo. O site francês de facas de bolso Deejo faz bom uso dessa tec­no­lo­gia.

Imagem: Faca em 3D vendida pelo site Deejo
Site da Deejo pro­por­ci­ona ex­pe­ri­ên­cia de compra imersiva mostrando todos os ângulos do produto
eCommerce Website Design da IONOS

Nossos web designers es­pe­ci­a­li­za­dos em e-commerce vão criar a sua loja e ensinar você a utilizá-la.

  • Domínio grátis
  • Segurança de ponta
  • SEO

Ma­xi­ma­lismo e excesso

O ma­xi­ma­lismo também está entre as ten­dên­cias de web design para 2023. Ao contrário do mi­ni­ma­lismo, que segue a máxima “menos é mais”, no ma­xi­ma­lismo, mais é mais. Sites gra­fi­ca­mente cheios, em que todos os elementos tentam chamar a atenção de alguma forma, estão ficando cada vez mais populares. Animações aglo­me­ra­das, efeitos especiais e imagens coloridas são apenas alguns dos exemplos dessa nova tendência.

O MUTANT STAND, site co­mu­ni­tá­rio da Web 3.0, adora o excesso. Com um esquema de cores verde-neon, cristais voadores e imagens em movimento, ele é um ótimo exemplo de web design marcante e moderno.

Dica

Se um design colorido e brilhante não é o seu forte, saiba que o modo escuro (dark mode) é tendência tanto no web design quanto no setor de software. Cada vez mais usuários se dizem in­co­mo­da­dos com in­ter­fa­ces bri­lhan­tes, prin­ci­pal­mente em ambientes com pouca luz ambiente. Sistemas ope­ra­ci­o­nais e na­ve­ga­do­res estão ofe­re­cendo a opção de modo escuro. Leia mais sobre o modo escuro no Windows 10 e sobre o modo escuro no Google Chrome.

Web design de en­tre­te­ni­mento

O web design de 2023 também se baseia em elementos sim­ples­mente di­ver­ti­dos, que não servem a um propósito es­pe­cí­fico. Essa tendência, bastante im­pul­si­o­nada nos últimos anos, tem como único objetivo entreter os vi­si­tan­tes de um site, con­fe­rindo um novo visual a com­po­nen­tes de design antigos.

Essa tendência de web design abrange animações in­te­ra­ti­vas que podem ser ativadas e movidas pelos vi­si­tan­tes, por exemplo, somente por diversão. Da mesma forma, a clássica barra de car­re­ga­mento de um site pode ser subs­ti­tuída por uma animação de car­re­ga­mento per­so­na­li­zada, o que torna o tempo de espera, antes monótono, agora divertido.

O portfólio do full-stack developer François Risoud tem animações com efeito hover (hover ani­ma­ti­ons), que fazem com que elementos da página se dispersem quando você passa o cursor sobre eles.

Imagem: Portfólio de François Risoud
No site de François Risoud animações em hover fazem elementos se moverem pela tela

Páginas de erro 404 criativas

Até as páginas de erro 404 de­sem­pe­nham um papel especial nas ten­dên­cias de web design. Assim como na tendência apre­sen­tada acima, o objetivo desta também é entreter os vi­si­tan­tes. A clássica página de erro de URL inválida traz elementos de en­tre­te­ni­mento, trans­for­mando um “beco sem saída” em um divertido pas­sa­tempo. Reunimos algumas ideias de páginas de erro 404 criativas neste artigo. Uma empresa que im­ple­men­tou essa tendência de web design em seu site foi a agência de design Feldman Studio. Nesta página de erro 404, vi­si­tan­tes podem jogar o clássico jogo Snake e aparecer na lista de melhores pon­tu­a­ções.

Imagem: Página de erro 404 da Feldman
Vi­si­tan­tes podem jogar Snake na página de erro 404 da agência Feldman

Vídeos curtos com valor agregado

A in­cor­po­ra­ção de vídeos em sites é uma tendência de web design já bastante comum. O que há de novo é que, em 2023, a pre­fe­rên­cia é por vídeos curtos, mas com valor agregado. Essa tendência pode ser im­ple­men­tada em um site, por exemplo, na forma de um breve vídeo in­tro­du­tó­rio sobre você ou sua empresa. Da mesma forma, produtos podem ser apre­sen­ta­dos por esses vídeos curtos. Para aumentar o alcance, é possível com­par­ti­lhar os vídeos nas pla­ta­for­mas de mídia social mais im­por­tan­tes.

O site do apli­ca­tivo Paper exem­pli­fica essa trend. Lá, os vi­si­tan­tes são recebidos com um vídeo curto in­tro­du­tó­rio que passa uma ótima impressão sobre o produto.

Imagem: Vídeo curto na página inicial do app Paper
O app Paper recebe os vi­si­tan­tes de seu site com um vídeo in­tro­du­tó­rio
Dica

Quer criar um site pro­fis­si­o­nal para você ou sua empresa, mas não tem tempo ou co­nhe­ci­mento? O Website Design Service da IONOS faz isso para você, adaptando seu site a todas as suas ne­ces­si­da­des.

Ti­po­gra­fias ousadas e originais

Ti­po­gra­fias ousadas e originais também estão na agenda do web design de 2023. Alguns web designers preenchem páginas iniciais com palavras e frases im­pac­tan­tes, que dominam todos os espaços, podendo até se sobrepor a outros elementos gráficos. Essa tendência ti­po­grá­fica, con­si­de­rada parte do movimento estético bru­ta­lismo (digital brutalism), deixa claro que as fontes ti­po­grá­fi­cas não só servem para trans­mi­tir in­for­ma­ções, como também para apoiar outros elementos de design.

As fontes digitais (webfonts) também podem ajudar a conferir iden­ti­dade própria a uma marca. Grandes nomes como Coca-Cola, Disney e Harry Potter, por exemplo, têm ti­po­gra­fias per­so­na­li­za­das, fáceis de iden­ti­fi­car em qualquer lugar do mundo. Portanto, vale a pena con­si­de­rar o uso de uma fonte per­so­na­li­zada no seu site. Ex­pe­ri­mente com cores e formas. Até mesmo imagens e outros tipos de mídia podem ser inseridos nas letras.

Imagem: Screenshot do site Filayyyy
O site Filayyyy recebe seus vi­si­tan­tes com ti­po­gra­fias originais e ousadas

Ne­o­mor­fismo

O ne­o­mor­fismo, também chamado de “novo es­queu­mor­fismo”, deixa o design dos sites mais realista. Layouts muito planos, como mapas, por exemplo, podem ser apre­sen­ta­dos de uma forma mais moderna e realista. Para isso, o design de interface do usuário (UI design) utiliza modelos 3D e tons claros e escuros (luz e sombra) para dar volume aos gráficos. Isso pode ser feito com a linguagem CSS. No ne­o­mor­fismo, elementos gráficos adquirem pro­fun­di­dade, ficando mais próximos da realidade.

Apesar da sua po­pu­la­ri­dade, essa tendência de web design pode ser in­con­ve­ni­ente para alguns usuários. De­fi­ci­en­tes visuais, por exemplo, podem não ser capazes de vi­su­a­li­zar cor­re­ta­mente as linhas di­vi­só­rias de um elemento gráfico de ne­o­mor­fismo. Por essa razão, o ne­o­mor­fismo está ad­qui­rindo cada vez mais con­tras­tes mais fortes.

Imagem: Screenshot de um exemplo de site com neomorfismo em seu web design
Esse exemplo mostra como um site com elementos de design do ne­o­mor­fismo pode parecer; fonte: https://ne­o­morphism.webflow.io/

Programas de design gráfico clássicos, como o Adobe Il­lus­tra­tor, podem ser usados para a criação desses elementos gráficos. Vários sites também oferecem esses elementos, como o Neu­morphism.io.

Dica

Já que o som­bre­a­mento é a base do ne­o­mor­fismo, essa tendência de web design é in­com­pa­tí­vel com apli­ca­ções em modo escuro. Reflita sobre a melhor es­tra­té­gia gráfica para seu projeto web con­si­de­rando também esse fator.

Scrolling design: rolagem infinita e efeito parallax

Os dis­po­si­ti­vos móveis mudaram o modo como usuários interagem com o mundo digital. Cliques perdem cada vez mais espaço para a rolagem. As ten­dên­cias rolagem infinita e efeito parallax, já em voga nos últimos anos, seguem com grande po­pu­la­ri­dade em 2023.

Rolagem infinita

Na rolagem infinita, in­for­ma­ções nunca deixam de ser car­re­ga­das, ou seja, a página não tem um fim. Redes sociais como Facebook, Instagram, Reddit e Quora vêm uti­li­zando esse método há muito tempo, para pro­por­ci­o­nar aos usuários um feed de fluxo contínuo. Apesar de blogs também usarem a rolagem infinita há algum tempo, ela con­ti­nu­ará a de­sem­pe­nhar um im­por­tante papel no futuro.

A rolagem infinita é in­te­res­sante para sites com ampla oferta de in­for­ma­ções. Ela é ge­ral­mente combinada com al­go­rit­mos so­fis­ti­ca­dos, que filtram a oferta de in­for­ma­ções e apre­sen­tam primeiro as entradas mais re­le­van­tes para cada usuário. Ope­ra­do­res de sites que antes não pensavam em fazer uso dessa tendência devem saber que até os me­ca­nis­mos de busca já estão se adaptando a esse sistema. Ini­ci­al­mente, o Google teve di­fi­cul­dade de rastrear sites de com rolagem infinita, mas di­re­tri­zes de design do mecanismo de busca líder do mercado permitem que a rolagem infinita seja im­ple­men­tada com segurança nos dias atuais. De toda forma, atente-se aos seguintes aspectos, caso pense em utilizar essa tendência:

  • URLs in­di­vi­du­ais para cada subpágina
  • Elementos so­bre­pos­tos devem ser evitados
  • Usuários devem ser capazes de localizar as in­for­ma­ções que procuram com fa­ci­li­dade
  • O car­re­ga­mento não pode ser lento
Dica

O site do John Mueller, analista de busca sênior do Google, apresenta um exemplo de rolagem infinita adaptada aos me­ca­nis­mos de busca.

Efeito parallax

O efeito parallax também já está na moda há algum tempo, mas segue sendo uma das ten­dên­cias de web design mais populares. Ele tem sido um dos building blocks mais im­por­tan­tes dos sites modernos, graças à sua ha­bi­li­dade de criar uma percepção de pro­fun­di­dade, ao fazer com que camadas de um mesmo site movam-se em di­fe­ren­tes ve­lo­ci­da­des. Esses efeitos visuais divertem os vi­si­tan­tes e fazem com que eles passem mais tempo nas páginas. Ainda, o efeito parallax pode ser combinado com outros elementos, para levar os vi­si­tan­tes a re­a­li­za­rem uma ação desejada. Uma boa ideia é combiná-lo a técnicas de story­tel­ling in­te­ra­ti­vas.

Outra tendência de 2023 é a rolagem de zoom em parallax. Neste caso, a rolagem não causa um movimento vertical nem ho­ri­zon­tal, mas aumenta ou diminui o zoom. Isso passa uma sensação de levitação ou viagem. O site Won­der­land Di­gi­tal­fashion, por exemplo, ilustra a tendência.

Imagem: Página da Wonderland Digitalfashion
Efeito paralax no site da Won­der­land Di­gi­tal­fashion

Ve­lo­ci­dade e per­for­mance

Na verdade, podemos dizer que ve­lo­ci­dade e per­for­mance não somente são ten­dên­cias, como prin­ci­pal­mente um preceito básico para ser ter um site de sucesso. A ve­lo­ci­dade de car­re­ga­mento é cada dia mais im­por­tante, prin­ci­pal­mente por causa da revolução dos dis­po­si­ti­vos móveis. Ope­ra­do­res de sites trabalham para que eles sejam de fácil acesso e eco­no­mi­zem volume de ar­ma­ze­na­mento. Quanto mais rápido um site carrega, melhor é a ex­pe­ri­ên­cia do usuário (o que já era im­por­tante dez anos atrás). A novidade é que, em 2023, vários sites estão tra­ba­lhando in­ten­sa­mente com lazy loading.

Certas ten­dên­cias de web design podem con­tri­buir para a ve­lo­ci­dade de car­re­ga­mento de uma página. O mi­ni­ma­lismo, por exemplo, faz pouco uso de mídias pesadas, pre­fe­rindo formatos que usem pouca memória. Sites de rolagem infinita, que apre­sen­tam todas as in­for­ma­ções em uma única página, também con­tri­buem para o aumento da ve­lo­ci­dade de um site, uma vez que apenas uma página precisa ser carregada (e não várias sub­pá­gi­nas). Espaços em branco e ausência de elementos também andam de mãos dadas com a ve­lo­ci­dade de car­re­ga­mento de um site.

Nota

Algumas ten­dên­cias de web design, como animações in­te­ra­ti­vas, ajudam a atrair vi­si­tan­tes e a trans­mi­tir as in­for­ma­ções ne­ces­sá­rias, quando usadas cor­re­ta­mente. Contudo, designs pesados podem afetar ne­ga­ti­va­mente a per­for­mance de um site. Por isso os web designers devem sopesar os conteúdos mul­ti­mí­dia e in­te­ra­ti­vos que pretendem usar, para que esses adicionem valor ao site, ao invés de pre­ju­di­ca­rem sua ve­lo­ci­dade. Via de regra, menos é mais, mas isso não quer dizer que você tenha que ter um site gra­fi­ca­mente monótono.

A per­for­mance de um site impacta di­re­ta­mente a ex­pe­ri­ên­cia do usuário. Por isso, devemos dis­tin­guir o tempo de car­re­ga­mento real do tempo de car­re­ga­mento percebido. A demora só é pro­ble­má­tica se for notada pelo usuário. Algumas es­tra­té­gias podem ser adotadas para minimizar o efeito de tempos longos de car­re­ga­mento:

Indicador de progresso

Se os vi­si­tan­tes do seu site tiverem que esperar por algum processo, eles devem poder, pelo menos, acom­pa­nhar o tempo de espera. Uma barra de progresso não encurta o tempo de car­re­ga­mento, mas pode torná-lo mais divertido, se for projetada de uma maneira in­te­res­sante. Assim, os usuários ficam menos tentados a sair da página, caso tenham que esperar. A margem de tempo tolerável na internet tem se tornado cada vez menor, à medida que os serviços ficam mais rápidos.

Imagem: Screenshot da barra de progresso do site Sprite - The Hall of Zero Limits
Barra de progresso do site do re­fri­ge­rante Sprite - The Hall of Zero Limits; fonte: https://www.sprite.com/ze­ro­li­mits

Car­re­ga­mento pri­o­ri­tá­rio de elementos-chave

As páginas devem ser pro­gra­ma­das de modo que o conteúdo above the fold (acima da dobra) seja chamado e exibido primeiro pelo navegador. Above the fold é a parte da página que pode ser vista na tela, sem que o visitante faça uma rolagem para baixo. É su­fi­ci­ente que esse conteúdo esteja dis­po­ní­vel ao usuário assim que ele acesse o site. Os demais conteúdos, below the fold (abaixo da dobra), podem ser car­re­ga­dos pos­te­ri­or­mente.

JPEG pro­gres­sivo

As imagens in­cor­po­ra­das como JPEG pro­gres­sivo não carregam de cima para baixo, já na resolução original. Em vez disso, um processo de di­gi­ta­li­za­ção en­tre­la­çada faz com que a imagem seja apre­sen­tada primeiro como pré-vi­su­a­li­za­ção de baixa qualidade que vai sendo refinada até chegar à resolução máxima.

Imagem: Exemplo de imagem incorporada em JPEG progressevio
A imagem em JPEG pro­gres­sivo é carregada aos poucos, até chegar à resolução máxima
Dica

Ge­ral­mente, o que se aplica ao conteúdo também se aplica a imagens e vídeos: todos devem ser de alta qualidade, originais e re­le­van­tes para os vi­si­tan­tes. Além disso, faz sentido que conteúdos e mídias só sejam car­re­ga­dos quando o usuário os acessar. Quem acessa um site por dis­po­si­ti­vos móveis ou tem internet de baixa ve­lo­ci­dade são os que mais se be­ne­fi­ciam de sites bem es­tru­tu­ra­dos e livres do car­re­ga­mento de dados des­ne­ces­sá­rios.

We­bAs­sem­bly

Apli­ca­ções web são parte essencial da internet, porque é o Ja­vaS­cript que permite que vi­si­tan­tes interajam com um site – o que melhora a ex­pe­ri­ên­cia do usuário. Porém muitas dessas apli­ca­ções também pre­ju­di­cam a per­for­mance desses sites. A We­bAs­sem­bly (Wasm) é uma linguagem de pro­gra­ma­ção nova, que é executada mais ra­pi­da­mente em um navegador, por ser pré-compilada. Embora pouco difundida, ela já é re­co­nhe­cida pelos na­ve­ga­do­res modernos.

HktWin_LPf4.jpg Para exibir esse vídeo pre­ci­sa­mos usar cookies de terceiros. Você pode acessar e mudar suas con­fi­gu­ra­ções de cookies here.

Ex­pe­ri­ên­cia do usuário per­so­na­li­zada

Conteúdo di­re­ci­o­nado é um dos prin­cí­pios básicos do web design moderno. Es­pe­ci­al­mente no comércio ele­trô­nico, seleção e apre­sen­ta­ção de conteúdo devem ser baseadas nas ex­pec­ta­ti­vas dos clientes em potencial. No passado, o foco era em grupos de pessoas, mas em 2023 o foco é na ex­pe­ri­ên­cia de cada um dos usuários.

6TG4GLvK4tY.jpg Para exibir esse vídeo pre­ci­sa­mos usar cookies de terceiros. Você pode acessar e mudar suas con­fi­gu­ra­ções de cookies here.

Uma outra tendência de web design que continua relevante em 2023 são os sites per­so­na­li­za­dos, onde vi­si­tan­tes encontram conteúdos que combinam com seus hábitos on-line. Fer­ra­men­tas de análise de dados, como o Google Analytics e o Matomo, fornecem os dados que as in­ter­fa­ces de usuário usam para per­so­na­li­zar o conteúdo apre­sen­tado. Elas ajudam os pro­ve­do­res de conteúdo a com­pre­en­de­rem seus usuários e a maneira como interagem com o que lhes é apre­sen­tado.

Dica

Você depende do WordPress para o seu projeto web? O Hospedagem para WordPress da IONOS tem o pacote perfeito para você ad­mi­nis­trar seu site por meio desse sistema de ge­ren­ci­a­mento de conteúdo. Hos­pe­da­gem, cer­ti­fi­ca­ção SSL/TLS e domínio próprio.

Realidade virtual e relidade aumentada com WebXR

A maioria dos usuários já está fa­mi­li­a­ri­zada com a chamada realidade virtual no mundo do en­tre­te­ni­mento. De­sen­vol­ve­do­res de softwares e games investem muitos recursos para criar jogos e óculos de realidade virtual, por exemplo. Nos últimos anos, apli­ca­ti­vos de realidade virtual também têm chegado ao mercado, uti­li­zando essa tec­no­lo­gia para fins práticos. Um exemplo in­te­res­sante é um apli­ca­tivo de design de in­te­ri­o­res que utiliza a realidade aumentada para facilitar o pla­ne­ja­mento de um ambiente. Da mesma forma, realidade aumentada pode ser usada para que pessoas ex­pe­ri­men­tem roupas vir­tu­al­mente, antes de comprá-las. A tec­no­lo­gia WebVR, já ul­tra­pas­sada, dá lugar à tec­no­lo­gia WebXR, capaz de exibir conteúdos de realidade virtual e de realidade aumentada nos na­ve­ga­do­res.

b0KglUkvEak.jpg Para exibir esse vídeo pre­ci­sa­mos usar cookies de terceiros. Você pode acessar e mudar suas con­fi­gu­ra­ções de cookies here.

Usuários já podem vi­su­a­li­zar sites es­pe­ci­al­mente pro­gra­ma­dos em três dimensões, usando óculos de realidade virtual. Assim como na vida real, esses usuários usam os mo­vi­men­tos do corpo para interagir com os elementos dos sites. A tec­no­lo­gia é pro­mis­sora, es­pe­ci­al­mente no comércio ele­trô­nico, já que permite que lojas online re­pro­du­zam ex­pe­ri­ên­cias in loco vir­tu­al­mente. Se você já tem óculos de realidade virtual, pode testar essa tendência no WebXR do Mozilla.

Apri­mo­ra­mento dos chatbots

Softwares que pos­si­bi­li­tam a co­mu­ni­ca­ção não são nenhuma novidade. Os chatbots (robôs de chat)que surgiram durante pesquisas sobre in­te­li­gên­cia ar­ti­fi­cial, já são uti­li­za­dos por sites cor­po­ra­ti­vos e por lojas virtuais. Nos sites, os chatbots* costumam ser usados como as­sis­tente de compras ou para responder perguntas fre­quen­tes. Ge­ral­mente, eles ficam lo­ca­li­za­dos em pequenas caixas de diálogo que aceitam perguntas dos vi­si­tan­tes e geram respostas au­to­ma­ti­ca­mente. O algoritmo do robô é capaz de aprender, emitindo respostas per­so­na­li­za­das. Muitos usuários acreditam, inclusive, estar falando com um humano.

Em geral os chatbots não são in­tru­si­vos, mas operam com elementos in­te­ra­ti­vos. O usuário pode ter a impressão de estar sendo contatado em tempo real por um fun­ci­o­ná­rio do aten­di­mento ao cliente. Na maioria dos casos, o usuário pode responder à so­li­ci­ta­ção do robô sem sair do site. A maior parte dos chatbots exis­ten­tes não passa de barras de busca que reagem de forma mais dinâmica às consultas. Porém, o sucesso de bots como Siri, Alexa e Cortana faz com que a re­sis­tên­cia contra as­sis­ten­tes virtuais diminua e essa tendência de web design continue a crescer em 2023.

XuIfJAkck0Q.jpg Para exibir esse vídeo pre­ci­sa­mos usar cookies de terceiros. Você pode acessar e mudar suas con­fi­gu­ra­ções de cookies here.

Design sus­ten­tá­vel

Pessoas estão engajando-se cada vez mais em causas sociais e eco­ló­gi­cas, es­pe­ci­al­mente nos últimos anos. Da mesma forma, a im­por­tân­cia dessas pautas no mundo virtual também aumentou, fazendo com que cada vez mais empresas esforcem-se para se conectar com con­su­mi­do­res e usuários de forma mais intensa, e em um nível mais profundo, pelos canais on-line.

Sus­ten­ta­bi­li­dade e com­pro­misso social in­flu­en­ciam o web design cada dia mais. Fotos, vídeos, in­te­ra­ções e outros recursos de design modernos agregam muito mais valor quando usados para mostrar a o com­pro­me­ti­mento de uma empresa com essas pautas.

Imagem: Site da Henkel dedicado ao tema sustentabilidade
Página da empresa Henkel dedicada a responder questões relativas a ações afir­ma­ti­vas da marca; fonte: https://www.henkel.com/sus­tai­na­bi­lity

Mi­croin­te­ra­ções

Mi­croin­te­ra­ções são uma tendência de UX design, na qual in­te­ra­ções com usuários vêm acom­pa­nha­das de pequenos efeitos de animação. Um exemplo seria um botão de like que emite um som ou uma vibração quando clicado. Para es­pe­ci­a­lista em UX, como Dan Saffer, são pre­ci­sa­mente esses detalhes que compõem uma boa ex­pe­ri­ên­cia do usuário.

Dica

Mi­croin­te­ra­ções de sucesso podem ser en­con­tra­das no Awwwards.com e no Dribbble.

O que esperar do web design em 2023?

Em 2023, o web design destaca a sin­gu­la­ri­dade visual e o en­tre­te­ni­mento. Elementos 3D, com­po­nen­tes in­te­ra­ti­vos e ti­po­gra­fias ousadas são apenas alguns dos com­po­nen­tes que serão fa­cil­mente en­con­tra­dos em sites neste ano.

Além disso, nota-se uma clara mudança nas práticas de web design, que tendem a enfatizar adap­ta­ções para dis­po­si­ti­vos móveis. Deste ano em diante, os sites devem ficar ainda mais efi­ci­en­tes e fáceis de usar, para acom­pa­nhar o com­pe­ti­tivo mercado on-line. No entanto, “con­tra­ten­dên­cias”, como ma­xi­ma­lismo e excesso, que durante muito tempo foram con­si­de­ra­das de­sas­tro­sas pelo web design, voltam cheias de sig­ni­fi­cado. A evolução tec­no­ló­gica permite que tais estéticas sejam uti­li­za­das sem sa­cri­fi­car o de­sem­pe­nho do site.

A usa­bi­li­dade de um site nunca foi tão relevante quanto em 2023. Portanto, sites devem esforçar-se para serem user friendly, ou seja, “amigáveis” aos usuários. O conceito de web design res­pon­sivo faz parte dessa tendência, prin­ci­pal­mente em se tratando de dis­po­si­ti­vos móveis. Ele tem a fle­xi­bi­li­dade técnica de se adaptar aos di­fe­ren­tes dis­po­si­ti­vos usados pelos usuários. Um web design moderno e res­pon­sivo deve ser capaz de re­co­nhe­cer o dis­po­si­tivo utilizado pelo usuário e “responder” a ele, exibindo conteúdos adaptados a cada formato. Hoje em dia os web designers não projetam sites somente pensando nos na­ve­ga­do­res para desktop. Na verdade, grande parte dos sites mais populares do mundo dis­po­ni­bi­liza apli­ca­ti­vos para dis­po­si­ti­vos móveis que oferecem melhores ex­pe­ri­ên­cias aos usuários mobile.

Algumas das palavras-chave do web design continuam em 2023, como a Internet das Coisas: crescente di­gi­ta­li­za­ção da vida cotidiana, que oferecer aos usuários ainda mais pos­si­bi­li­da­des de interação. Pesquisas de in­te­li­gên­cia ar­ti­fi­cial também têm avançado sig­ni­fi­ca­ti­va­mente, me­lho­rando serviços on-line au­to­ma­ti­za­dos. Ob­vi­a­mente, web designers uti­li­za­rão essas tec­no­lo­gias a serviço deles.

Entre as novas ten­dên­cias mais im­por­tan­tes está uma in­te­gra­ção mais di­re­ci­o­nada de efeitos 3D in­te­ra­ti­vos, e de elementos de realidade virtual e aumentada. Essas ten­dên­cias de ilusão ótica tornam os projetos web mais in­te­ra­ti­vos e in­te­res­san­tes.

Ten­dên­cias e con­tra­ten­dên­cias do web design

As ten­dên­cias de web design nunca são una­ni­mi­dade. Assim que elas surgem, surgem também con­tra­ten­dên­cias, que levam elementos de design para uma direção diferente ou oposta. Às vezes, con­tra­ten­dên­cias não passam de uma reação a certas ten­dên­cias, à medida que elas se tornam mais populares. Ao remarem contra a corrente e fazerem o oposto do que está na moda, web designers acabam por des­ta­ca­rem-se no mercado.

Tendência Con­tra­ten­dên­cia
Imagens de banco de imagens (stock images): imagens pro­fis­si­o­nais, co­mer­ci­a­li­za­das por bancos de imagens, que podem ser in­te­gra­das a todos os tipos de sites, são uma forma segura de decorá-los. Imagens ex­clu­si­vas: denotam pro­xi­mi­dade e mostram pessoas e empresas como elas realmente são, atingindo vi­si­tan­tes em um nível mais pessoal.
Simetria: elementos em caixa e linhas planas, por exemplo, tornam as páginas mais fáceis de se navegar. Elas seguem a já com­pro­vada e familiar natureza re­tan­gu­lar do HTML e CSS. As­si­me­tria: design ex­pe­ri­men­tal e linhas quebradas compõem in­ter­fa­ces de web design mais ino­va­do­ras, que vão contra as con­ven­Ã§Ãµes e se destacam pela sin­gu­la­ri­dade e pela lu­di­ci­dade.
One page sites: todas as in­for­ma­Ã§Ãµes im­por­tan­tes são apre­sen­ta­das em uma única página para que o usuário tenha que clicar o mínimo possível. A rolagem infinita fica cada vez mais popular. Layouts padrão ganham mais aceitação, es­pe­ci­al­mente em empresas digitais. Sites retrô: trazem de volta in­ter­fa­ces da internet dos anos 2000 (bru­ta­lismo, mi­ni­ma­lismo, etc), assim como inovações técnicas da época, hoje não mais ne­ces­sá­rias para a navegação, mas di­ver­ti­das de serem re­lem­bra­das (como menus-ham­bur­guer e mi­croin­te­ra­Ã§Ãµes).
Designs coloridos e cores fortes conferem um certo charme a um site. As cores também carregam sim­bo­lis­mos e remetem a padrões já co­nhe­ci­dos (azul para produtos digitais, verde para empresas be­ne­fi­cen­tes, rosa para cos­mé­ti­cos, etc.) que podem agir no sub­cons­ci­ente do usuário. Mi­ni­ma­lismo de cores: muitos espaços em branco causam dis­tra­Ã§Ãµes mínimas e são in­te­res­san­tes quando o foco é na in­for­ma­Ã§Ã£o veiculada. Sites bicolores (duotone) renunciam ao design de cores complexas para facilitar o uso. Neste tipo de site, marcas e símbolos podem chamar bastante a atenção.
Resumo

As ten­dên­cias de web design em 2023 são bastante diversas e incluem sin­gu­la­ri­dade visual e elementos in­te­ra­ti­vos. Mundos virtuais em 3D e ti­po­gra­fias ousadas trans­for­mam sites em ver­da­dei­ras atrações digitais. Animações e efeitos de rolagem dão vida a conceitos abstratos. Seja qual for o caminho escolhido pelo web designer, todos eles passam por: boa per­for­mance e adaptação a di­fe­ren­tes dis­po­si­ti­vos. O web design moderno cria novas pos­si­bi­li­da­des nos sites, con­vi­dando vi­si­tan­tes a lá per­ma­ne­ce­rem, sem bombardeá-los com elementos em excesso (com exceção do ma­xi­ma­lismo, é claro). Mas lembre-se, ten­dên­cias mudarão, novas tec­no­lo­gias surgirão, mas a ex­pe­ri­ên­cia do usuário é sempre essencial. Tanto o web design quanto o conteúdo de um site devem ser pro­je­ta­dos para atender ao público-alvo.

Se você estiver montando seu próprio website ou deseja atualizar o que você já tem, inspire-se nas ten­dên­cias de web design para 2023. Elas cer­ta­mente o ajudarão a preparar seu site para as ne­ces­si­da­des e ex­pec­ta­ti­vas do futuro.

Ir para o menu principal