De tempos em tempos, surgem tendências que rapidamente viram “febre” e são adotadas por muita gente. É assim na moda, na gastronomia, nos esportes e também no desenvolvimento de sites para a internet.

Entre as tendências de webdesign que vêm se fortalecendo nos últimos tempos, está o parallax. Você, provavelmente, já navegou em um site que utilizava esse recurso e talvez até o tenha achado interessante. Mas, o que é parallax? É uma técnica que cria a impressão de um ambiente 3D em uma tela 2D, utilizando movimento de tela. Funciona assim: as imagens são inseridas em camadas, os planos de fundo, e a medida que você navega pelo site, as imagens se movimentam mais lentamente do que a sua navegação.

O efeito é muito interessante e está muito em alta! Atualmente, o principal uso está em sites onepage (outra tendência do mercado, em que todas as informações principais estão na primeira página). Porém, há de se utilizar o bom senso. Incluir esse efeito muitas vezes em várias páginas do site acaba tornando a navegação desagradável, por isso recomendamos cautela e sempre ter em mente que o uso do parallax é livre e pode modernizar e enriquecer bastante o seu site.

O Journal of Usabilities Studies realizou um estudo com cerca de 86 participantes, divididos em dois grupos iguais. Enquanto um dos times navegou em um site sem parallax, o outro visualizou uma página com o efeito. Aqueles que usaram o site com a técnica de design definiram a experiência como muito mais divertida e interessante! Que tal utilizar este recurso em seu site e melhorar a experiência do seu cliente?

Ficou com dúvidas se estas características podem funcionar no seu site? Então, vamos ver algumas dicas para você usar e conseguir o melhor do parallax:

Use com propósito

Além de bonito e atrativo visualmente, o parallax pode ser, também, bastante funcional. Você pode usar as camadas de plano de fundo, o movimento e a impressão de 3D para dar informações e contribuir com a experiência do consumidor.

Um ótimo exemplo de parallax com propósito é o hotsite da Werkstatt, onde observamos um site com visual harmônico e clean. As imagens interagem com os títulos das sessões, bem como o cliente que navega interage com as imagens, que ganham vida à medida que posicionam o mouse sob as mesmas.

Este recurso faz com que o cliente sinta que está participando do processo de navegação de uma forma ativa, o que torna a experiência mais agradável e faz seu site se destacar da concorrência, que ainda não adotou o recurso.

Conforme o visitante rola a página, com a atenção captada pela imagem em movimento, você também tem a chance de levá-lo diretamente aonde deseja, e, no caso do nosso exemplo, o menu não interfere na navegação, ficando em um ícone discreto no topo da página. Seja um cadastro, a aquisição de um produto ou um contato direto, alinhar o parallax com um propósito estratégico pode ajudá-lo nas conversões.

Não esqueça do mobile

Às vezes, a empolgação em utilizar uma nova técnica ou recurso pode fazer o desenvolvedor ou o dono do site se esquecer que a usabilidade e a estratégia sempre devem ser consideradas primeiro. Porém, boa parte da navegação nos tempos atuais são provenientes de acessos móveis, ou seja, o celular.

Incluir o parallax em um site deve provocar uma mudança na programação, e você não pode deixar de lembrar que esse efeito também deve se adequar a uma tendência mais forte ainda e que impacta diretamente nas visitas mobile.

Considere seus recursos

Como o parallax, normalmente, precisa de imagens em alta resolução e está relacionado a extensão de página, provavelmente, adicioná-lo vai impactar no consumo dos recursos da sua hospedagem, sobretudo a memória RAM e o processamento. Certifique-se de que sua hospedagem conta com capacidade suficiente para suficiente para suportar as imagens que o parallax demanda.

Adicione camadas

O parallax fica muito mais interessante quando você acrescenta duas ou mais camadas de imagem, permitindo que os elementos gráficos interajam diretamente um com o outro, além de conectar as informações do site.

Contudo, é claro, é preciso pensar muito bem nas imagens e informações que você vai usar, lembrando que é interessante se preocupar com a noção de profundidade e ainda manter o conteúdo funcional e bonito. Dê atenção, também, ao tamanho e nível de detalhe das imagens, lembrando que em telas menores algumas fotos podem não funcionar tão bem.

Teste em todos os navegadores

Alguns recursos funcionam de maneira diferente, dependendo do navegador e do dispositivo que é utilizado para fazer o acesso. Assegure-se que alterações sejam feitas na programação do site se, por acaso, notar que em um browser ou dispositivo o efeito não está tão bom.

Converse com o seu desenvolvedor e ele, provavelmente, vai saber quais alterações precisam ser feitas nos códigos para que tudo funcione corretamente, independentemente do navegador que o visitante estiver utilizando no momento.