Blog

Parallax

parallax ft img

Esses efeitos de profundidade podem ajudar bastante na experiência dos visitantes de um site. Mas é preciso saber usá-lo

Existem várias formas de enriquecer o design de um site. Efeitos de profundidade são uma opção bastante utilizada hoje em dia. A técnica Parallax basicamente consiste em “enganar” nosso cérebro com imagens e textos de diversos tamanhos e diferentes velocidades para passar a ideia de profundeza para a interface da página web. Juntamente com esse método, também podem vir recursos de interatividade, para engajar o usuário.

Mas, antes de sair espalhando elementos e animações para todos os cantos, é preciso ter foco. Dosar o Parallax é usar o efeito com sabedoria e evitar que “o feitiço vire contra o feiticeiro”. Para isso, preste atenção nessas dicas:

1- Uma rolagem vertical diferente dentro de cada página, por exemplo, pode enriquecer a Experiência do Usuário, já que é possível rolar dois ou mais elementos diferentes do layout, em planos distintos, o que confere o movimento à página.

2- O caminho para manter essa técnica funcionando é trabalhar o efeito baseado em uma narrativa ou história. As pessoas querem ser entretidas, querem histórias. O envolvimento do visitante com o seu site é o prêmio final, e podemos mantê-los sempre por perto, dando a eles algo para trabalhar não só com os olhos, mas com suas mentes.

3- É importante frisar que a narrativa no web design é possível. Um visitante vai esperar um “roteiro” por trás do design da página e um efeito que amplifique essa história cai bem. Pense em um site que possa ficar guardado na memória de quem o acessou.

4- Inspire-se em games. Muitos jogos ainda investem nesse tipo de efeito criado pela união de vários planos para dar movimento a um personagem, por exemplo. Por que não pensar em inserir algo do tipo em um site?

5- As memórias dali são a narrativa construída em torno de grandes visuais. É um conceito profundo que você deve planejar. Não deixe de pensar se o efeito vale a pena para a proposta e objetivos do projeto e não se esqueça de focar na usabilidade. A pior coisa que pode acontecer é o Parallax acabar fazendo o inverso e, em vez de conduzir a navegação dos usuários, acabe atrapalhando tudo.

O Tableless tem um tutorial interessante, que ensina a criar o efeito com jQuery e CSS. Outro artigo traz o debate sobre se o Parallax seria capaz de atrapalhar no SEO de um site ou não (daí vem a questão dos objetivos do projeto, que devem reinar acima de tudo). No Creativebloq, você encontra 33 ótimos exemplos de sites que usam o efeito da forma correta. O site também traz dicas e um app que pode ajudar na criação de uma rolagem parallax.

Enfim, não é preciso ir muito longe para se informar sobre a técnica. O importante é soltar a criatividade e usar esse tipo de recurso em favor do site, para atingir o principal objetivo de qualquer job: o usuário.

Confira 3 exemplos:

 

 

 

 

 

Comente