Uma Introdução à Animação em Web Design
Animação não é mais apenas para desenhos animados. De imagens em movimento em tela cheia a pequenos efeitos de foco, aparecem toques de animação em todos os lugares. A animação é moderna, divertida e amigável.
E os obstáculos ao uso da animação começaram a cair. Com a maioria dos usuários em conexões de alta velocidade e a facilidade de criar qualquer coisa, desde simples movimentos ou um gif bobo até vários minutos de ação, as animações se tornaram ferramentas práticas e úteis de design da web.
Explore o Envato Elements
Noções básicas de animação
A animação acontece quando algo criado em forma imóvel ou bidimensional é "trazido à vida" e parece se mover de uma maneira que segue as leis da física. É como um personagem de desenho animado percorre a tela ou como um ícone de aplicativo salta como uma bola enquanto é carregado na área de trabalho do seu Mac.
Uma das palavras que é quase sinônimo de animação é Disney. No início dos anos 80, dois dos principais animadores da empresa escreveram um livro detalhando os 12 princípios da animação. A “Ilusão da Vida: Animação Disney”, de Frank Thomas e Ollie Johnston, ainda fornece a estrutura para a animação atualmente.
- Squash e alongamento
- Antecipação
- Estadiamento
- Ação direta e pose a pose
- Ação Completa e Sobreposta
- Devagar e devagar
- Arco
- Ação Secundária
- Cronometragem
- Exagero
- Desenho sólido
- Recurso
As animações da Web geralmente são salvas como GIF, CSS, SVG, WebGL ou vídeo. Eles podem ser qualquer coisa, desde um simples sublinhado que aparece quando você passa o mouse sobre uma palavra até um vídeo em tela cheia ou imagem de fundo. Como em qualquer outra técnica de design, as animações podem ser sutis ou difíceis de evitar.
Tendência emergente de 2017
Animação em web design é algo que começamos todos os dias. A chave para a animação como uma tendência de design é a moderação. Animações pequenas e simples são interessantes e interessantes; o usuário pode nem pensar em ser uma animação. Animações em grande escala podem ser um visual interessante que o atrai para o design. Mas se você começar a misturar muitos efeitos de movimento diferentes, pode causar um caos completo.
O que torna a animação na moda é o realismo. No cenário atual de design, com tantos designs de estilo simples e minimalistas, os usuários precisam de mais dicas para lhes dizer o que fazer. Pedaços simples de animação podem guiar o usuário sem alterar a estética. Ajuda a adicionar instruções e a ordem para projetar esquemas visualmente simples demais para fornecer orientação suficiente aos usuários. Nesse caso, a animação cria um meio termo entre simplicidade e usabilidade reduzidas.
O outro fator que contribui para essa tendência é o acesso a ferramentas nas extremidades traseira e do usuário do design. Você não precisa mais do Flash para animações mais complicadas. (E se você ainda estiver construindo no Flash, é hora de parar.) Isso pode ser feito de várias outras maneiras. As animações de hoje não atolam sites ou servidores da Web, tornando os efeitos rápidos para carregar para os usuários e, com animações de acesso à Internet de alta velocidade, não deixam de ficar presos no meio do ciclo do evento.
Animações grandes vs. pequenas
Quando se trata de animação para a web, ela se divide em duas categorias igualmente fáceis de entender: grandes e pequenas. (Você provavelmente pode adivinhar como eles ficam.)
Animações grandes são aquelas que têm uma escala para elas. Freqüentemente, na forma de um vídeo com tempo de execução, as animações em grande escala preenchem uma parte significativa da tela e são características de um curta-metragem. Essas animações servem como um ponto focal no design geral. Os usuários geralmente não precisam executar nenhuma ação para ver a animação em movimento. Se você assistir de perto no site do Studio Meta, cada uma das imagens grandes será ampliada ao ler a cópia.
Pequenas animações são pequenos pedaços que você descobre ao começar a interagir com um site. Esses divots podem estar na forma de estados de foco, pequenos pedaços de ornamentação ou guias ou ferramentas de usabilidade. Pequenas animações são um sotaque que contribui para a estética geral, mas é improvável que sejam o foco do design. No site de Henry Brown, a animação simples é que, se você olhar de perto, os olhos da ilustração realmente piscarão.
Quando usar animação
O problema de todas as tendências, incluindo esta, é saber quando usá-la. A animação pode ser um ótimo truque para o seu kit de ferramentas de design, mas não para todos os projetos. A animação deve ser suave e contínua, não irregular ou mecânica. Ele precisa servir a um propósito para o usuário e não atrapalhar o conteúdo.
O principal motivo para usar a animação é aumentar a usabilidade. Animações simples podem ser ótimas ferramentas de orientação para ajudar as pessoas a entender em quais botões clicar ou para onde ir no mapa de um site. Muitos designers que usam efeitos de rolagem complexos combinam uma animação simples com uma ferramenta do usuário para rolar ou clicar. (Isso inclui tudo, desde um simples ícone de salto ou palavras que aparecem dizendo "rolar para baixo".)
A usabilidade vem de várias formas:
- Função de comunicação ou como usar um site
- Mostrar alterações, como preencher corretamente um formulário ou destacar que um elemento é clicável
- Crie fluxo ou direcione usuários para uma frase de chamariz
A segunda razão para usar a animação é estética. A animação pode ser uma ótima "decoração". Às vezes, o objetivo de um elemento animado é puramente visual e é um uso aceitável. Essa animação decorativa pode ajudar a contar uma história ou criar uma conexão emocional entre a interface e o usuário. O objetivo de uma animação pode ser despertar interesse visual e manter um usuário envolvido com seu site por um longo período de tempo.
Ao criar uma animação puramente visual, considere o que deve fazer. Pense na conexão que você deseja que um usuário tenha. É para ser divertido ou surpreendente? É um pouco de conteúdo exclusivo projetado para compartilhamento? Mesmo um visual puro deve ter um objetivo.
Recursos
Pronto para começar a animar? Aqui estão alguns recursos para outras leituras e ferramentas para ajudar você a começar.
- O vídeo Illusion of Life mostra cada um dos 12 princípios de uma maneira fácil de entender.
- “Animação na Web no trabalho” da A List Apart é um ótimo recurso sobre o que faz a animação funcionar.
- A "Introdução ao iniciante à animação CSS" mostra como transformar um quadrado em um círculo usando propriedades CSS.
- Os elementos SVG animados elásticos são um tutorial sobre como integrar e animar um componente SVG.
- A apresentação Art of UI Animations de Mark Geyer usa animação para explicar os conceitos.
- ”15 principais ferramentas HTML5 para criar animação avançada” é uma excelente etapa e lista de ferramentas de nível superior, se você já conhece o básico.
- O kit de sobrevivência do animador ensina princípios básicos que se aplicam a todas as formas de animação.
Conclusão
Quando se trata de animação, a regra geral é a seguinte: uma boa animação tornará a experiência do usuário melhor. Isso pode ocorrer na forma de uma conexão emocional - como uma experiência divertida e positiva - ou tornar o site mais fácil de usar.
A animação é uma técnica divertida que se tornou muito mais padrão para uma variedade de aplicações. Se você estiver procurando por inspiração, volte a este artigo e clique nos links para os exemplos visuais, visite os sites e brinque com os recursos animados nele. Diverta-se!
