E esse tal de Parallax ae?Um tipo de navegação que já há algum tempo vem sendo bastante utilizada, o Parallax Scrolling tem caído no gosto dos usuários e clientes por proporcionar uma experiência de navegação visualmente agradável e em alguns casos com um ótimo nível de interatividade, porém como todas as tecnologias web que alcançam uma certa popularidade existem muitos exemplos de boa utilização assim como exemplos de como desperdiçar uma boa tecnologia para fazer algo não tão bom assim.
Vou direto ao assunto e nesse texto apresento meu ponto de vista justificando a boa utilização do Parallax, não entrarei em questões técnicas de desenvolvimento (linhas de código, como fazer isso e aquilo) esse texto é mais um conjunto de dicas no pré-desenvolvimento para quem está pensando em usar essa tecnologia em algum projeto.
Não pense no Parallax como ítem de uma vitrine na construção de um site onde você olha algum exemplo e diz: “gostei, vou usar!”. Óbvio que tendo um budget você vai achar quem faça qualquer tipo de site em qualquer tecnologia sem questionamentos, porém o resultado pode ser um verdadeiro desastre.
Antes de pensar em usar o Parallax temos alguns pontos que devem ser considerados para saber se a tecnologia cai bem ou não para seu projeto, não se preocupe tanto com a quantidade de informação mas sim em como o usuário vai interagir com esse conteúdo, as brincadeiras que podem ser feitas nessa navegação e principalmente a finalidade do site. Imagine por exemplo um e-commerce em Parallax, conseguiu visualizar? Talvez não atinja o objetivo de um e-commerce causando impacto direto no objetivo deste tipo de site que é vender.
Exemplifiquei apenas um item para que antes de vislumbrar um incrível site em Parallax talvez seja legal parar um pouco e analisar o objetivo do projeto, rascunhar uma arquitetura pode ser um bom começo para decidir a melhor navegação para seu site.
Ah essa é fácil, basta inputar as sessões do site em um scroll imenso e pronto! o front-end cuida do “efeitinho” certo? Não, não é bem assim.
Esse com certeza é o ponto que mais deve ser pensado na hora de usar o Scrolling, pois se você quer realmente aproveitar a tecnologia e ter uma bela navegação deve-se pensar em todos os elementos e como utilizá-los nas transições, desde imagens e texto brincando com a transição dos frames quanto brincar com o tema do site para impulsionar o usuário a entrar na brincadeira.
A tecnologia em si do Parallax Scrolling é voltada à navegação, é sempre bom revisar questões de UX aqui também, cuidados para quantidade de conteúdo nos frames e para não tornar a experiência do usuário cansativa já nas primeiras rolagens.
Hora dos retoques finais e muito importantes para um bom resultado: A definição do tempo nas transições e consquentemente a quantidade de rolagem na navegação.
Aqui é onde o designer e o front-end do projeto devem estar muito bem alinhados para um bom resultado final, se é a mesma pessoa que cuida das duas partes melhor ainda.
A definição em do timing em si entre um frame e outro é algo simples de primeiro momento, basta alguns testes e ajustes e você tem uma transição mais suave ou mais rápida, o ponto preocupante aqui está mais para a adaptação desse scroll em diversas resoluções e a atenção com a navegação em desktop já que em dispositivos mobile o usuário nevega pelo toque enquanto em desktop/notebooks usa-se o touchpad ou a “rodinha” do mouse.
Aqui a dica é não poupar tempo na bateria de testes em diversos dispositivos e resoluções para não “cansar o dedo” dos usuários seja no tablet ou no mouse, também no carregamento do site, é sempre bom não esquecer de deixá-lo o mais leve possível.
Listei abaixo alguns sites que encontrei com algumas particularidades que me agradam e podem servir de inspiração para seu projeto.
http://www.arnoldclark.com/challenge/
A navegação é explicativa e a animação usa bem as transições e camadas de várias formas.
http://community.saucony.com/kinvara3/
Informativo e criativo, site para divulgação de um tênis, vai montando o tênis enquanto apresenta informações sobre o produto, muito bom!
https://victoriabeckham.landrover.com/INT
Divulgação de uma versão da Range Rover Evoque, aproveita bem o recurso das camadas, chama atenção sem perder o visual luxuoso.
http://cyclemon.com/
Um bom exemplo de como fazer algo simples e bonito.
http://journey.lifeofpimovie.com/#!
Aqui usaram e abusaram do recurso com um belo resultado final
http://www.drugtreatment.com/
Um dos meus tipos de navegação preferidos para o Parallax, com o horizonte em camadas, show!
http://www.dementialab.org/discovery-lab/
Bem interessante, proporciona um efeito 3D na navegação.
http://neomam.com/interactive/13reasons/
Infográfico com navegação vertical aproveitando bem animações de backround e ilustrações destaque.
http://www.expresssolicitors.com/assets/nhs-payout-timeline.html
Belo exemplo de como usar o tema do site a favor e proporcionar algo criativo e divertido.
http://www.5emegauche.com/agence
Outra brincadeira bem feita com imagens proporcionando experiência de um passeio pela agência, no menu temos outras páginas usando parallax. Vale o click!
[Crédito da Imagem: Website – ShutterStock]
Publicitário, Gerente de Projetos e Programador. Há alguns anos envolvido no mundo do Marketing e Publicidade, especializado em Processos, BPM e sempre me atualizando sobre SEO, UX e novas tecnologias, divido meu tempo absorvendo e compartilhando conhecimento.
You must be logged in to post a comment.
