Como adicionar estrategicamente animação ao seu site

O uso de animação em web design não é exatamente uma novidade.

Lembre-se da era dos gifs 3D rotativos?

Como sobre a vida e a morte do Flash?

Depois que a Apple baniu o uso do Flash em todos os seus dispositivos móveis, os designers foram rápidos em descobrir uma maneira de trazer a animação de volta ao jogo. Graças à criatividade dos desenvolvedores e designers da web, agora temos a magia das transições CSS3, animações SVG, GIFs de alta qualidade e, claro, vídeos animados criados com programas como After Effects e Blender.

Houve alguns anos recentemente em que a tendência era projetar sites planos. Felizmente, a animação voltou em grande estilo e agora é uma das maiores tendências para 2018 e além.

Animações tornaram-se agora uma expectativa.

A influência positiva da animação no UX e no UI Design não é surpreendente, devido à forma como os humanos são criaturas visuais e sempre serão atraídos pelo movimento e movimento. Animações podem dar vida a qualquer processo, transformando-o em uma experiência. Os movimentos permitem que os usuários saibam que algo está acontecendo.

Por exemplo, animações dentro de células de formulário podem notificar os usuários de que cometeram um erro ou que faltam informações. Ou ao inserir uma senha e ela estiver errada, os asteriscos podem ficar vermelhos, dançar um pouco e desaparecer.

Animação da The Kinetic UI

Ou que tal esta divertida animação de login? As possibilidades de animação em web design estão crescendo a cada dia. Por que não adicionar algumas animações estratégicas ao seu site também?

Animação de Darin no Dribbble

Animando seu site

As opções de como adicionar animação ao seu site são bastante extensas, mas isso não significa que ele deva estar repleto de ícones de salto e botões giratórios. É preciso haver um equilíbrio na quantidade de animação que você inclui em seu design. Pense mais na linha de “movimento suave” do que em uma página que se move tanto que você não sabe para onde olhar. O uso excessivo de animação é tão doloroso quanto o minimalismo excessivo!

Usar um programa como o Adobe XD pode ajudar no processo de experimentar diferentes animações para colocar estrategicamente em seu site. Se você gosta de construir diretamente no WordPress, uma ótima opção é o Divi Builder, que vem com muitas possibilidades de animação dentro de cada módulo.

No final do artigo, incluí alguns links para alguns ótimos recursos que ajudarão a adicionar animações ao seu site.

Vamos dar uma olhada nos diferentes tipos de animações que podem melhorar o UX do seu site e a composição visual geral.

Funcional ou Estético

Animações têm dois usos em web design; funcionalidade e estética.

Animações funcionais

As animações podem ajudar os visitantes na jornada do usuário em seu site. Eles chamam a atenção para chamadas à ação ou seções importantes que você não quer que eles percam. Eles tornam os processos mais fáceis e são visualmente agradáveis.

Carregando animações

A animação funcional mais comum, e uma das primeiras a ser comum no design de sites, é a animação de carregamento. Eles costumavam ser encontrados principalmente quando um site era aberto pela primeira vez, mas agora que os sites carregam instantaneamente, são usados ​​​​para carregar vídeos, progressão de downloads e outros processos que seu site pode ter.

Para que sua animação de carregamento seja eficaz, ela precisa corresponder à sua marca. Se o seu site for divertido e colorido, sua animação de carregamento pode ser qualquer coisa, desde uma bola quicando até um loop colorido. Por outro lado, se o seu site for sério e formal, a animação de carregamento deve seguir esse estilo.

Animação de Sharon Yar e Dilys Lim no Behance

Animação do UXPin do site de Tom Cole Architecture

Paira

Outras animações funcionais comuns que você deve considerar são os hovers. Já estamos bastante acostumados a ver animações flutuantes e a maioria das pessoas as espera. Fazer um botão mudar de cor ao passar o mouse sobre ele é uma animação básica que você definitivamente deve considerar usar, seja em seu menu ou em uma chamada para ação.

Outras maneiras de usar o foco são para botões que não se parecem com botões ou se você deseja mostrar informações sobre o foco antes de clicar.

Animação do Design Shack

Rolagem

Sites com efeitos de rolagem não são mais um fenômeno único. A rolagem parallax se tornou muito popular (e está se tornando um pouco cansativa, para dizer a verdade). Portanto, se você quiser usar a rolagem animada, pense fora da caixa. Inclua elementos que se movem de seção em seção, elementos que aparecem progressivamente com a rolagem. Pense na funcionalidade e também na estética.

Animação por Youandigraphics

Animações estéticas

Animações estéticas ou decorativas são aquelas que tornam um site mais atraente visualmente, mas não necessariamente ajudam na funcionalidade. Há uma velha metáfora da época dos primeiros desenhos de Walt Disney, que a animação é uma “ilusão da vida”. O que a animação faz com uma imagem estática é trazê-la à vida, fazê-la respirar.

Com a quantidade certa de animação estética, seu site pode ser inesquecível.

Assim como a animação funcional, a animação decorativa precisa ter um equilíbrio. Pergunte a si mesmo se esse plano de fundo animado é realmente necessário ou se corresponde adequadamente à sua marca. Todas as fotos precisam ser animadas na tela ou você precisa de muitos pop-ups? Certifique-se de que as animações que você adiciona são suficientes para tornar seu site agradável de se ver, mas não sobrecarregado.

Planos de fundo animados

Os fundos animados mais modernos do momento são fundos de partículas, desde simples pontos em movimento até movimentos complexos de efeitos de luz. Eles podem ser adicionados como plano de fundo para uma página inteira ou apenas para seções. Eles podem fazer com que áreas do seu site tenham mais personalidade. Lembre-se de que as tendências mudam, portanto, se você usar um plano de fundo de partículas, verifique se ele realmente se adequa ao seu site.

Animação de Femme Fatale

Criatividade Ilimitada

Por último, mas não menos importante, o que a animação pode fazer pelo seu site é oferecer criatividade ilimitada. Como você pode animar praticamente qualquer coisa, as possibilidades criativas são infinitas. De fundos animados a coisas se movendo na tela e até animações sutis, como um personagem piscando.

Um site pode depender tanto da animação que a jornada pelas páginas é uma verdadeira experiência. Veja o novo site da Porsche, por exemplo, que mostra a história da montadora ao longo dos anos.

Ou junte ilustração isométrica e rolagem animada e você terá um site incrível como o RollPark.

Animação do Rollpark

Sempre otimize para dispositivos móveis!

Seria injusto para mim não lembrá-lo de que você deve sempre verificar suas animações no celular. Certifique-se de que eles funcionem como deveriam e faça ajustes se não. Se você usa animações SVG, não deve ter muitos problemas, pois os gráficos .svg são infinitamente escaláveis.

De qualquer forma, sempre verificar no celular e otimizar suas animações para todos os formatos tornará seu site muito melhor!

Ferramentas para ajudar você a animar seu site

Aqui está uma lista de links para artigos práticos para diferentes tipos de animações que você pode usar em seu site.

• Uma coleção de bibliotecas de animação gratuitas
• Os recursos de animação do DIVI Builder
• Criador de fundo de partículas
• Duas maneiras de criar fundos de partículas simples com CSS
• Usando animação SVG

Em conclusão

Mantenha suas animações equilibradas em termos de funcionalidade e estética. São ferramentas para dar vida ao seu site, não torná-lo esmagador. Lembre-se de ser criativo e pensar fora da caixa.

Ao construir seu próximo site (ou atualizar o existente), você adicionará alguma animação ao design? Lembre-se: é melhor experimentar em um site de teste ou site local antes de adicionar qualquer novo código permanentemente aos sites ativos!

Que tipo de animação de site você experimentará em seguida?

Crie suas próprias animações com esses tutoriais!

• Como criar animações SVG com CSS
• Como usar transições e transformações CSS3 para criar animações