6 fundos interativos legais do site e como fazê-los

Faça com que seus visitantes permaneçam 25% mais tempo na sua página, reduza a taxa de rejeição e faça com que as pessoas voltem ao seu site graças a um plano de fundo interativo.

Seu site é sua principal vitrine e deve refletir sua cultura da melhor maneira possível. Além disso, também é seu principal objetivo atrair a atenção dos visitantes, inspirá-los, interessá-los por seus negócios e apresentar seus produtos e / ou serviços. Existem várias maneiras de fazer isso e uma delas é fornecer um plano de fundo interativo para o site. De fato, esse tipo de efeito tem várias vantagens: aumentar em 25% o tempo gasto em uma página, reduzir em até 35% a taxa média de rejeição e, portanto, fazer as pessoas voltarem ao seu site (+ 40% de taxa de usuários recorrentes).

Neste artigo, nos concentramos em 6 exemplos, usando fundos interativos excelentes e eficientes para sites e construindo com métodos diferentes. Vamos descobri-los!

1. Veritystudios, partículas luminosas

Atualmente, a criação de um universo de marca é uma das principais prioridades para os negócios B2C e B2B e, antes de gastar muito em uma agência, você pode dar ao seu universo alguma substância com apenas um pano de fundo.

Site Veritystudios usando Three.js

A Verity não vende apenas soluções internas de drones, mas mágica. Eles criaram um plano de fundo interativo usando código personalizado para fazer os visitantes sentirem, com partículas em movimento e uma luz sincronizada, proporcionando um efeito de profundidade legal e uma leve animação no plano de fundo ao mover o mouse. O uso de linguagens de código como BabylonJS ou Three.js permite criar sua própria experiência, que se encaixa perfeitamente na atmosfera que você deseja oferecer, mas requer mais habilidades técnicas.

2. HD Rain faz chover ️

Geralmente, os fundos são abstratos, peças de arte e formas. Mas, às vezes, fica mais real e, quando combina com o que a empresa faz, cria uma experiência incrível.

O HD-Rain fornece um efeito chuvoso em seu site com o Naker.

O HD Rain é uma startup de previsão do tempo com base no StationF em Paris e queria dar um impulso experimental ao site, para tornar o clima frio novamente!

Usando o Naker.Back, nossa ferramenta nocode e gratuita para criar planos de fundo interativos a partir de apenas um ícone, eles fizeram chover em menos de 5 minutos desde a criação até a incorporação e, como resultado, viram um aumento do tempo gasto e retornando aos usuários!

3. As redes de Fabio Lamanna

Criação de site por Fabio Lamanna usando Particle.js

Usar o seu logotipo como inspiração para o seu plano de fundo é sempre uma boa ideia. A excelente experiência na Web não é apenas uma soma de coisas diferentes, mas uma combinação coerente. Nesse caso, Fabio Lamanna usou bem o Particle.js, uma biblioteca JS para criar efeitos de partículas, bem conhecidos por seus bons efeitos de rede.

É super eficaz, especialmente porque o Fabio trabalha no campo das redes de transporte. O fundo interativo é a cereja no topo do bolo de seu site / portfólio!

4. Voe no céu!

Quando você navega na web em 2020, às vezes precisa de uma pausa. Todos esses sites parecidos, todos esses pop-ups de marketing e tudo mais ... Então você fecha os olhos, está acima das nuvens, voando no céu!

Céu interativo usando Vanta.js

Mas você também pode visitar o céu interativo criado no Webflow com o Vanta.js! Essa performance incrível é uma pausa poética, para mostrar até onde podemos chegar com um pano de fundo. O Vanta.js foi um projeto feito pelos caras da Strikingly e é uma lista de modelos como este, que você incorpora com algumas linhas de código.

5. Minhas bolhas, minhas bolhas! 🧼

Se você já viu Procurando Nemo, conhece alguns peixes (acho que é o mesmo para seres humanos) adoram bolhas. Então, por que não usá-los em seu site?

DDNA usando código personalizado para seu plano de fundo interativo

DDNA é uma empresa de joalheria que decidiu brincar com formas e cores para ter um fundo de site muito minimalista, mas eficiente. As bolhas, que podem representar de alguma forma o espírito das futuras jóias, estão flutuando em êxtase (então NÃO ME PARE NOOOOW) com cores agradáveis ​​e um efeito de sombra legal. Realmente não é o site típico de jóias que você está acostumado a visitar, é por isso que você vai se lembrar deles!

6. O universo de Damian

Costumamos dizer que criar uma experiência implica criar um universo. Talvez por isso a astronomia seja uma fonte de inspiração bastante comum para muitos designers.

Design espacial para Damian Devos, mantendo sua imagem de fundo com o Naker.

Mas, para se destacar, Damian Devos decidiu dar um impulso interativo às suas estrelas, criando instantaneamente um efeito uau e dando uma sensação de profundidade em sua página inicial. Também é uma maneira, em um portfólio como este, de mostrar os recursos técnicos do designer. Esse pano de fundo também foi criado com o Naker.Back, usando um ícone de estrela, dê a eles duas direções diferentes e adicione sensibilidade ao mouse, tudo isso de maneira super rápida e gratuita.