A rolagem parallax não precisa de introdução quando se trata de discutir as práticas de design mais atraentes. Geralmente, a rolagem de paralaxe é amplamente testemunhada em sites WordPress. É um efeito em que a imagem de fundo se move a uma taxa mais lenta do que os elementos de primeiro plano. Isso dá a ilusão de ter três dimensões em uma superfície plana de duas dimensões. Muitos jogos usam essa tendência há muito tempo. No entanto, ela surgiu no design da web há relativamente pouco tempo e ganhou enorme popularidade. É tão difundido que você provavelmente já o viu em algum lugar quando navegou na web, mesmo que não soubesse o que era. O conceito de rolagem parallax funciona na criação de uma ilusão que parece atraente e única. Ele agrega valor estético ao web design e chama a atenção para o conteúdo na rolagem de paralaxe, o que ajuda a destacar o conteúdo valioso da desordem.
Índice ocultar
1. A experiência do usuário melhora significativamente:
2. Ajuda no processo de contar histórias:
3. Redução significativa nas taxas de rejeição:
1. Rolagem de fundo de paralaxe:
2. Rolagem Vertical Paralaxe:
3. Efeito de transparência de paralaxe:
4. Rolagem horizontal de paralaxe:
5. Efeito de escala de paralaxe:
1. Lembre-se sempre do objetivo principal do seu site:
2. Não abuse do efeito de rolagem de paralaxe:
3. Faça protótipos de efeitos de rolagem de paralaxe e teste-os: Fixe
4. Planeje o conteúdo para uso móvel:
5. Capacidade de resposta do seu site:
1. A história dos Goonies:
2. Estúdio Dog:
3. Vigilância do Fogo:
Essa tendência de design se originou quando a tendência de design plano pegou. Antes da tendência de design plano, o design de realismo era tendência. Com essa tendência, a ênfase estaria em sombras, reflexos e outros truques para criar uma sensação de profundidade e aparência tridimensional. O design plano era excessivamente bidimensional, e esses truques não funcionariam com eles para criar uma aparência tridimensional. Vendo essa lacuna, a rolagem parallax surgiu como um conceito para introduzir três dimensões em um design plano.
Para entender a rolagem parallax com mais detalhes, devemos primeiro ver por que vale a pena investir nessa prática.
1. A experiência do usuário melhora significativamente:
Alfinete
Algumas pessoas acreditam que a rolagem parallax é um recurso adicional que adiciona complexidade à interface do usuário sem qualquer contribuição. No entanto, isso não é verdade, pois microinterações e animações fazem uma grande diferença para criar interfaces de usuário atraentes em comparação com faces de usuário planas. Ele possui um excelente valor na experiência do usuário (UX).
2. Ajuda no processo de contar histórias:
Alfinete
Se tivéssemos que narrar uma história para outra pessoa, poderíamos fazê-lo sem esforço. No entanto, ter a mesma facilidade e fluxo de narrativa no design do site pode ser muito desafiador. Conectar os pontos e facilitar a transição e manter o público viciado é muitas vezes complicado. A rolagem de paralaxe ajuda com esse problema, criando uma experiência envolvente e imersiva para a história fluir. Como há uma diferença na velocidade dos elementos de plano de fundo e de primeiro plano, o ritmo eficiente dos elementos pode melhorar significativamente a experiência de contar a história.
3. Redução significativa nas taxas de rejeição:
Alfinete
A taxa de rejeição refere-se ao número de pessoas que clicam no site e clicam no botão voltar na guia antes de percorrer o site completamente. Taxas de rejeição frequentes e altas podem afetar significativamente o ranking de SEO. Os sites de rolagem parallax têm taxas de rejeição significativamente menores, pois a maioria deles são sites de rolagem de página única. A experiência dinâmica que os usuários obtêm ao testemunhar a rolagem de paralaxe os mantém envolvidos.
Agora que abordamos as vantagens de usar a rolagem parallax, podemos discutir os vários tipos de técnicas de rolagem parallax disponíveis para web designers. Existem duas grandes categorias para efeitos de paralaxe. Efeitos de paralaxe baseados em rolagem e efeitos de paralaxe baseados em mouse.
Os efeitos de paralaxe baseados em rolagem são efeitos de paralaxe que você experimentaria ao rolar para baixo em um site. Cada tipo de rolagem de paralaxe atende a uma necessidade e propósito diferente. Alguns dos efeitos de rolagem de paralaxe são –
1. Rolagem de fundo de paralaxe:
É uma das maneiras mais antigas e eficazes de usar a rolagem de paralaxe. Usando isso, quando o usuário rolasse no site, a imagem de fundo mudaria. Isso ajuda a contar histórias convincentes com estilo.
2. Rolagem Vertical Paralaxe:
O Parallax Vertical Scroll é ideal para sites em que você deseja que os usuários sintam que o site está se movendo com eles, usando elementos flutuantes que se movem em velocidades diferentes. Isso também pode ser feito em várias camadas.
3. Efeito de transparência de paralaxe:
O efeito de transparência de paralaxe é um efeito suave em que o texto ou a imagem desaparecem lentamente quando o usuário rola para baixo. Ele também voltaria a aparecer quando o usuário rolaria para cima.
4. Rolagem horizontal de paralaxe:
A rolagem horizontal de paralaxe cria uma sensação de movimento horizontal quando o usuário rola o site para baixo. Os elementos da esquerda aproximam-se do centro. Isso cria uma sensação de movimento.
5. Efeito de escala de paralaxe:
O efeito de escala de paralaxe permite que o usuário crie um zoom in e zoom out do efeito de túnel. O zoom é proporcional à proporção, por isso cria uma ilusão única que parece legal. Parece um efeito de distorção que leva o usuário para outra dimensão.
Agora que discutimos as diferentes variações dos efeitos de rolagem parallax, podemos passar a discutir as práticas de design essenciais a serem lembradas ao projetar um efeito de rolagem parallax para seu site:
1. Lembre-se sempre do objetivo principal do seu site:
Alfinete
A rolagem de paralaxe é divertida e pode ser cativante. Não apenas para os espectadores, mas também para o designer. Isso não deve se traduzir em ter um site que tenha um efeito de rolagem de paralaxe impressionante e nenhum foco no conteúdo. A rolagem de paralaxe, como outros elementos de design, deve funcionar como dicas visuais que devem guiar o visitante para os lugares em que você pretende que ele esteja. Deve ajudar a atingir os objetivos do negócio, como vender um produto, divulgar conteúdo ou gerar leads.
Se você usar excessivamente a rolagem parallax sem nenhum contexto ou propósito em mente, poderá impressionar os espectadores do seu site, mas eles não se traduzirão em leads ou conversões eficazes. Faça uso da rolagem parallax para aumentar as chances do que você deseja que o usuário faça. Um excelente truque para isso é fixar um CTA atraente, porém sutil, no rodapé da página. Dessa forma, quando os usuários rolarem pelo site, eles verão a rolagem paralaxe em ação. Eles também teriam um ou dois botões constantes que são estáticos e onipresentes. Isso atrairia o visitante a clicar no botão para ver o que acontece.
2. Não abuse do efeito de rolagem de paralaxe:
Alfinete
O efeito de rolagem de paralaxe tem um certo fator uau anexado a ele. Ele quebra a natureza mundana e estagnada de qualquer site que cria um interesse súbito nos olhos do visitante. Como o uso da rolagem parallax faz com que os elementos do site se movam em velocidades diferentes, encontrar o equilíbrio certo entre diversão e caos é essencial ao usar a rolagem parallax. Se o site tiver muitos elementos de movimento rápido ou muitos elementos de movimento também, pode ser difícil para o visitante acompanhar. Isso jogaria fora seu guia visual por todo o site e criaria confusão.
3. Faça protótipos de efeitos de rolagem de paralaxe e teste-os: Alfinete
É sempre uma boa ideia construir um protótipo interativo antes de finalizá-lo no estágio de desenvolvimento. Isso ajuda os designers a testar seu efeito de rolagem de paralaxe antes de colocá-lo no ar. Os designers devem testar o efeito na usabilidade e na experiência do usuário. Como a paralaxe é tão versátil e diferente em sua abordagem, ela pode afetar pessoas diferentes de maneiras diferentes. É fácil desviar da paralaxe útil para criar efeitos de rolagem de paralaxe que causam distração. Portanto, teste-o completamente com usuários reais que sejam objetivos e tenham um senso de design da web. Além disso, teste-o com um público geral, pois são eles para quem você está fazendo o efeito.
4. Planeje o conteúdo para uso móvel:
Alfinete
Navegar na net não é mais restrito a computadores. Em vez disso, mais da metade dos usuários prefere navegar em seus smartphones e tablets. O Google também mudou seus resultados de mecanismos de pesquisa com base no que regula e classifica os sites de maneira diferente para dispositivos móveis em comparação com computadores. Isso significa que, se o seu site tiver uma boa classificação na navegação de desktop, mas tiver um design móvel hostil, ele não terá uma classificação alta no Google quando você pesquisar por meio do telefone. A rolagem parallax não é compatível com dispositivos móveis. Os tablets suportam até certo ponto, mas não os celulares. A solução prática para isso é não usar efeitos de paralaxe para seu site móvel.
O layout básico do seu site deve ser projetado de forma que seja facilmente traduzível para dispositivos móveis. Qualquer seção que se sobreponha e transborde deve ser observada. Os fundos não devem entrar em conflito com a legibilidade do conteúdo. Para o site móvel, mantenha apenas os elementos de design necessários. Isso ajudaria você de duas maneiras – os usuários que usam o navegador em seus dispositivos móveis podem estar usando dados móveis. Ter um site mais leve os ajudaria a carregar o site mais rapidamente e gastar menos dados navegando pelo site. Também não afetaria sua classificação de SEO dessa maneira.
5. Capacidade de resposta do seu site:
Alfinete
Não temos mais conexões de rede que levam minutos ou horas para carregar um site. Todos têm acesso à internet na velocidade em que os usuários podem estar em um site por um segundo e mudar para outro em um segundo. Com essa facilidade de velocidade vem a facilidade de opções. As pessoas navegam em vários sites todos os dias. Se o seu site não carregar relativamente rápido, eles não ficarão esperando o seu site carregar e mostrar seu incrível efeito de paralaxe. Parallax é um truque pesado e mesmo quando você o otimiza; levaria um golpe no tempo de carregamento da página. Torna-se seu dever otimizá-lo o máximo possível se você sentir que manter a rolagem de paralaxe contribui significativamente para o seu site.
Agora que entendemos todos os aspectos da rolagem parallax e como aproveitá-la ao máximo, vejamos alguns dos sites que implementaram com sucesso a rolagem parallax em seu design de site com eficiência:
1. A história dos Goonies:
Alfinete
Este site usou um efeito de rolagem de paralaxe dedicado para destacar o filme clássico Os Goonies. Ele usa rolagem de paralaxe imersiva para falar sobre o enredo do filme e outros detalhes, como o nome do diretor, data de lançamento, perfis de personagens e muito mais. Ele é criado usando o WebFlow e funciona como uma homenagem ao filme clássico. Quando você visita o site, a primeira interação usa o efeito de escala de paralaxe que ajuda o usuário a se sentir como se estivesse viajando dentro da história com o site. Cada efeito de paralaxe é usado para direcionar a sugestão visual para o visitante e é feito sem esforço. Ele também usa áudio para uma experiência imersiva de contar histórias.
2. Estúdio Dog:
Alfinete
Dogstudio é um estúdio criativo que mistura arte, tecnologia e design. Para mostrar isso, eles projetaram habilmente seu site. O centro do site tem um cachorro que escala e gira conforme o usuário continua rolando pelo site. A luz no cachorro também continua mudando quando você passa o mouse sobre seus projetos recentes. Há também efeitos de paralaxe baseados em mouse. No início da página, se você passar o mouse para a esquerda, o cão se inclina para a direita e vice-versa. É um uso eficaz de rolagem de paralaxe.
3. Vigilância do Fogo:
Alfinete
Firewatch é um jogo criado pela Campo Santo. Existe um site para promover este jogo que faz uso sutil, mas impressionante, da rolagem parallax. Quando você visita o site, é tratado com uma imagem de banner que parece imersiva como é. Quando você rola o site para baixo, a imagem e o conteúdo sobem, criando um efeito de rolagem de paralaxe simples, mas eficaz. O site usa 6 camadas para torná-lo tão suave quanto é. O resto do site é estático, onde reside todo o conteúdo. Isso ajuda você a ler o conteúdo e conhecer o jogo sem se sentir enjoado com efeitos de paralaxe excessivamente feitos. Eles usam um efeito de paralaxe para capturar a atenção e, em seguida, fornecem informações relevantes para capturar o interesse do visitante.
Agora você sabe por que a rolagem de paralaxe é uma tendência de design tão popular nos dias de hoje. Tem muitas vantagens que os web designers podem explorar. Não há escopo de repetitividade com outro site devido às muitas variações de rolagem de paralaxe disponíveis. Os sites mencionados nesta lista também cobrem como o efeito pode ser usado inteiramente para o propósito de contar histórias ou como um elemento adicional para melhorar a sensação do site. Entenda por que e onde você precisaria usar a rolagem parallax em seu site e faça uso dela. Não force apenas pelo valor estético.
