Curso Web Design | Descubra o que é Parallax, uma das grandes tendências do webdesign em 2014

Link to Blog do Curso Web Design - Microcamp SP

Descubra o que é Parallax, uma das grandes tendências do webdesign em 2014

Posted: 27 Feb 2014 05:27 AM PST

Efeitos de rolagem Parallax são divertidos, fáceis de usar e permitem novos caminhos para a criação do design de um site. O resultado final é uma técnica que pode criar uma experiência altamente visual e interativa para os usuários. Com a evolução do HTML, CSS e jQuery, e mais pessoas utilizando conexões de internet de alta velocidade, não é um exagero pensar que muitas técnicas outrora inimagináveis pudessem ser criadas e fazer bastante sucesso no web design atual, como no caso do Parallax.

Mas afinal, o que é Parallax?

Parallax é uma técnica onde camadas de conteúdo e de imagens são projetadas para trabalhar e se moverem juntas. Com essa técnica, as imagens de fundo, de segundo e de primeiro plano são criadas e projetadas para se mover em velocidades diferentes, de modo que criem a sensação de movimento dos elementos na tela.

Parallax pode funcionar com um clique ou uma função de rolagem em que os elementos podem ser movidos para cima, para baixo ou para os lados. Em alguns projetos, todos os elementos se movem juntos, assim parece que você está se movendo de uma tela para a outra. Outros projetos permitem a existência de várias partes móveis, de tal forma que o que vemos na tela são verdadeiras animações em atividade.

O efeito Parallax não é novo. Ele tem sido utilizado há vários anos (pense em cenários de videogames, como o do Mario Bros e gifs animados, por exemplo). O problema é que até recentemente, esses efeitos foram utilizados muitas vezes de maneira simples e até mesmo limitada. A técnica era de difícil criação e designers e desenvolvedores não se interessavam muito por ela.

Mario Bros e o conceito de Parallax: cenário de fundo, criaturas e personagem se movendo em camadas e velocidades diferentes.

Só que a Apple (sempre ela!) mais uma vez ajudou a elevar uma tecnologia tornando-a mais visível e utilizada, ao usar efeitos Parallax no lançamento do iOS 7 no ano passado. E uma grande parte dos designers seguiu o exemplo, é claro, com efeitos de rolagem Parallax aparecendo em toda a web e em uma variedade de aplicações. Mas desta vez a técnica era muito mais refinada e fornecia ao usuário uma experiência muito mais memorável.

2014, o ano do Parallax?

A grande aposta para o sucesso do Parallax neste ano é que ele permite uma ênfase na experiência do usuário. A técnica pode ser usada para criar um site bastante interessante, sem um monte de cliques. Efeitos de rolagem Parallax podem criar uma sensação de mistério para o usuário como uma “história” que se desenrola. Com cada novo movimento, algo novo se desdobra, e assim por diante. Este efeito cria no usuário um desejo de continuar interagindo com a página, o que não é nada menos que espetacular quando pensamos que é isso mesmo que desejamos: mais tempo de permanência dentro do site. Parallax oferece uma abordagem diferente para mostrar o conteúdo e o design, e os designers estão experimentando mais esse conceito atualmente porque:

É divertido;
Cria uma nova e distinta experiência para o usuário;
Incentiva os visitantes a ficarem mais tempo no site;
Apela para o nosso senso de curiosidade;
É uma nova maneira de criar uma história visual;
É um estilo de contar histórias distintas ao mesmo tempo;
Pode ser usado para informar aos usuários o que você quer que eles façam. De clicar em um link para o preenchimento de um formulário ou a compra de um item, os efeitos de Parallax podem levar os usuários a uma ação direta.
Você pode usar efeitos de Parallax para mostrar um produto. Pense sobre os pontos de vista de 360 graus de itens em alguns sites de varejo. Isso pode permitir que os usuários realmente possam ver um item antes de compra-lo.

Grandes efeitos em uma página

Efeitos Parallax trabalham em harmonia com outra grande tendência no web design atual – o projeto de uma única página. Você pode criar diferentes telas de conteúdo que parecem e agem quase como páginas diferentes, mas que são, na verdade, uma única página.

Alguns dos meus sites favoritos de rolagem com Parallax incluem efeitos que contribuem para experiências de visualização distintas. Muitas vezes, a cor vai mudar quando você começa a visualizar novos conteúdos, ou uma troca de imagem ocorre. Muitas vezes, o efeito é utilizado para contar uma história com movimento, utilizando texto, vídeo e imagens, criando uma experiência verdadeiramente interativa.

Dicas antes de fazer seu site em Parallax

Efeitos de Parallax não são para todos os tipos de site. Você precisa saber o que você deseja obter a partir dessa técnica antes de usá-lo apenas porque está "na moda".

O melhor conselho é sempre manter as coisas simples. Decida qual o efeito que você deseja usar e cumpri-lo em todo o site. Fornecer indicações para os usuários se houver qualquer questão de como o site funciona. Usuários apontam na direção certa: as chamadas para a ação devem ser claramente identificadas na tela com instruções fáceis de usar.

Use Parallax para contar uma história. É com certeza a melhor maneira de fazer uso da técnica. Certifique-se de seus efeitos refletem ações que os usuários fariam ao interagir com seu conteúdo.

Esteja ciente do peso do site. Com tanta coisa acontecendo em segundo plano e código, tudo sobre este tipo de design do site deve ser devidamente otimizado. Crie imagens com tamanhos e escalas corretas, mantenha seu código limpo e certifique-se que o seu site carrega rapidamente.

Desvantagens do Parallax

Sites Parallax podem ficar pesados, podem não cumprir algumas exigências de SEO e são muitas vezes incompatíveis com estruturas de design responsivo.

Um site Parallax pesado deve ser evitado. Se o site não carregar rapidamente, os usuários podem não esperar para ver o seu conteúdo. Crie seu site tendo especial cuidado com imagens e efeitos!

Com relação a Search Engine Optimization, a natureza do site em Parallax é tão simples que não há muito que pode ser feito para reforçar a palavras-chave, criar links e contribuir para pesquisas. Como dica, o impulso SEO poderá ser dado através das mídias sociais, porque sites diferentes e criativos tendem a ser mais compartilhados.

Quando se trata de design para mobile, Parallax não é lá essas coisas. Muitas vezes você precisa de uma tela grande para realmente ver os efeitos. E também é uma técnica que funciona melhor para um projeto com um escopo mais limitado. Afinal, com muito conteúdo, ele pode ficar muito poluído ou simplesmente não comportar uma grande quantidade de informações.

Exemplos de sites em Parallax

A seguir, alguns exemplos de sites que utilizam Parallax Scroller, de uma maneira simples ou mais complexa, há exemplos para todos os gostos: eles vão ajudá-lo a compreender melhor a utilização desse recursos para que possa criar seus próprios projetos no futuro:

Sweez - excelente site brasileiro, com vários efeitos e conteúdo distribuído de maneira inteligente.

Life of Pi - Site de divulgação do filme Life of Pi (As aventuras de Pi). Assim como o filme, surpreendente e criativo. Muitas opções de interação com o usuário, informações de bastidores, vídeos, fotos, depoimentos etc. Um primor de exemplo de como os recursos podem ser explorados.

Flash vs HTML - O título já diz tudo. Clique e conheça para tirar as suas próprias conclusões. É show! E não esqueça de votar!

Minha Cidade - O Minha Cidade transforma dados públicos (disponíveis em portais de transparência e demais sites públicos) em visualizações de dados interativas e agradáveis. Assim, você tem muito mais tempo para analisar e aprender sobre pontos fundamentais sobre a sua cidade, como educação, saúde, segurança, transporte etc. Simples e eficaz. Merece uma olhada, e também é brasileiro.

Ratatattoo - Isto não é realmente o que você espera de um site de estúdio de tatuagem. Eles fizeram um ótimo trabalho utilizando imagens em tamanho real e rolagem Parallax para criar uma experiência divertida e bonita.

Instituto Cultural do Google - O Instituto Cultural do Google foi criado para ajudar as pessoas a tomar consciência de diferentes culturas. Eles usam uma linha de tempo para ajudar as pessoas a compreender as diferentes épocas e os diferentes anos em que os eventos ocorreram. Neste site, a navegação é importante porque torna mais fácil de interagir com a linha do tempo e interagir com diferentes reportagens que incentivam a educação de diferentes culturas.

NASAprospect - NASA Prospect foi criado por um grupo de designers e estudantes da Universidade de Dakota do Sul, em colaboração com a NASA e os estudantes do programa Espaço de Arte, nos Estados Unidos. É bem simples, mas tem bastante informação e ilustrações.

Conclusão

Graças a sua natureza simples e divertida, as técnicas de design Parallax são algo que vamos continuar a ver cada vez mais durante este ano. O número de sites que já utilizam alguma forma de ação Parallax está crescendo diariamente. É uma tendência em que a maioria das pessoas aposta e gostam, principalmente para navegar pelo conteúdo e ver o que acontece em seguida.

E você? Gostou da experiência de navegação em Parallax? Tem algum outro site para indicar? Deixe-nos saber nos comentários! Em breve publicarei um tutorial com um passo-a-passo sobre como fazer esse efeito incrível em suas páginas.

Um grande abraço a todos e até o próximo post!

Páginas

quinta-feira, 27 de fevereiro de 2014