Reunir a galera em eventos talvez seja a melhor maneira de manter-se atualizado e trocar conhecimento: você conhece pessoas que fazem a mesma coisa que a gente, soluciona dúvidas, pode discutir novas abordagens em torno de um tema e ainda reforça o network.
Neste artigo no Tableless, quero compartilhar a experiência de participar de um Meetup e comentar sobre a palestra do Zeh Fernandes sobre Motion UI.
Excelente ferramenta para manter-se informado sobre os eventos que acontecem perto da sua cidade e com temas relacionados ao seu interesse, o Meetup mescla site e aplicativo, permitindo a qualquer pessoa organizar e divulgar eventos e encontros em torno de qualquer tema. Eu já conhecia o site, mas só recentemente passei a acessá-lo com frequência. Foi quando descobri o Meetup CSS SP, comunidade organizada por Raphael Fabeni e Felipe Fialho que promove encontros para discutir assuntos do mundo front-end, com foco principalmente na linguagem de marcação CSS.
Zeh Fernandes
Na 8ª edição do Meetup CSS SP, realizada no começo de junho de 2015, o tema foi a palestra do Zeh Fernandes sobre Motion UI com estilos. O Zeh pode ser definido, segundo ele mesmo, como um designer zen. Seus trabalhos podem ser vistos na revista Cliche, na rede colaborativa de troca de tempo Blive e nas criações da produtora digital **D3.do, **que cedeu o local para que o encontro acontecesse. O Zeh já havia apresentado a mesma talk na Conferência CSS Brasil realizada em São Paulo, mas a experiência em um Meetup é mais interessante, pois só quem se interessa especificamente pelo assunto participa do encontro, e ainda rolam conversas e debates após a apresentação (o que é muito produtivo para trocar experiências).
No fim deste artigo, você pode conferir os slides da apresentação feita pelo Zeh, além do vídeo com a gravação realizada pelo Matheus Marsiglio e algumas fotos do encontro. O propósito deste texto não é transcrever a palestra, mas apenas reforçar os pontos principais apresentados.
A morte do Flash e o nascimento do Flat Design
Desde que os sites feitos em Flash desapareceram, a web carecia de animação. Seu fim parecia estático, salvo pelos efeitos mouseovers que provocavam certo tipo de resposta para a interação, ou pelos gifs animados e vídeos, estes últimos, com sua utilização limitada.
O surgimento do flat design, em contrapartida com a era do esqueumorfismo, reforçava ainda mais a simplicidade da web. Eis que surge o HTML5 e o CSS3, trazendo novos recursos, dentre eles, as animações feitas principalmente com os elementos transform, transition e animation (confira este post do Rapahel Fabeni sobre transition e animation para saber mais).
Surgiram botões animados, sites com efeitos parallax, caixas animadas, animações de SVG, e tudo tomou vida novamente. Porém, assim como aconteceu com o Flash, alguns sites perderam o bom senso, usando os novos recursos apenas por usar, ou seja, apenas para dar aquela “animada” na página, muitas vezes, apenas cumprindo a demanda do cliente.
Animações com significado
A animação é uma camada que ajuda a interface a comunicar-se com o usuário.
Ela ajuda o cérebro a compreender como a informação deve ser entendida. Deve ser utilizada com cautela, com propósito e com significado. Alguns itens interessantes levantados pelo Zeh para o uso consciente de animações podem ser listados a seguir:
- Antecipar a ocorrência de determinado comportamento
- Chamar a atenção para conteúdo específico
- Oferecer contexto sobre o que está acontecendo
- Oferecer feedback sobre algo
- Reforçar a identidade da marca (branding)
Código e propriedades
Como dito anteriormente, os principais elementos utilizados pelo CSS3 para criar animações são as propriedades transform, transition e animation do CSS, com uso adicional dos keyframes. Javascript ou jQuery podem ser utilizados ocasionalmente, mas não são obrigatórios.
Para saber mais sobre o que faz cada uma destas propriedades, o Raphael Fabeni criou uma lista resumindo as possibilidade de animações do CSS3:
Já as principais propriedades de um elemento a serem modificadas por uma animação são Position, Transform, Opacity e Color.
Uma dica valiosa dada por Anand Sharma é:
Se você precisa utilizar mais elementos do que apenas opacidade e transformação, repense sua animação.
Performance
Outro fator importante a ser considerado ao utilizar animações é performance, e por isto a última dica é tão importante. Alterar propriedades como posição, cores e determinados efeitos dos elementos de uma página requer alto processamento e uso de memória animando as camadas Layout, Paint ou Paint Setup. Para isso, recomenda-se priorizar a utilização da camada Composite Layers. Ela é uma abstração das demais camadas do DOM, utilizada principalmente pelas propriedades transform e _opacity, _e não interfere nas demais, usando poucos processamento ao modificar os elementos da página.
As camadas e suas respectivas propriedades:
Este comparativo retirado da apresentação Performance em Animações do Hugo Bessa mostra o processamento exigido por cada cada camada alterada nas animações:
Easing e Timing
Duas variáveis importantes em qualquer animação são os efeitos da gravidade e suavidade (easing) e o tempo de duração das animações (timing).
O easing pode ser entendido como a aceleração ou desaceleração inicial ou final, comumente observada pela física nos movimentos tradicionais do nosso dia-a-dia. Por exemplo, os automóveis, ao saírem do lugar, começam a movimentar-se lentamente, e adquirem velocidade progressiva até que esta torne-se constante, para depois reduzirem o movimento de forma mais lenta ao frear. As bolas de futebol, por exemplo, não quicam no chão com a mesma velocidade que voltam para a mão de quem as lançou, sendo possível observar leve achatamento causado pela física ao chocarem-se com o chão. A aplicação deste conceito faz grande diferença na suavização dos movimentos das animações, tornando-as mais próximas do real, e comunicando melhor ao usuário o que a interface quer dizer.
O site easings.net oferece referências sobre os diversos tipos de efeitos de suavização:
Já o timing está relacionado ao tempo de duração das animações. Animações muito longas não provocam a sensação de realidade, por isso, prefira efeitos com pouco milissegundos, algo entre 0,2 e 0,6 segundos.
Ferramentas para trabalhar com animações
O Chrome e o Firefox já possuem ferramentas que permitem controlar as animações, depurar e mensurar a performance através do processamento gasto ao movimentar os elementos da página. Em breve, o Chrome DevTools promete disponibilizar uma ferramenta capaz de controlar a linha do tempo (timeline) igual a existente no Flash.
Aqui tem os slides da palestra do Zeh Fernandes:
E aqui a gravação no Meetup:
O que rolou após a palestra
O encontro contou com aproximadamente 25 profissionais entre designers, desenvolvedores front-end, back-end e UXs. Após a palestra, a discussão entre os participantes girou em torno das seguintes questões: as animações, devem ser pensadas antes, durante ou depois do processo de desenvolvimento? Quem deve ser o responsável por pensar seus significados e propósitos?
Vários pontos de vista foram levantados, e o que tornou o debate mais interessante foi a diversidade de profissionais presentes. As conclusões, resumidamente, podem ser enumeradas a seguir:
- Pensar as animações é atividade do UX, mas nem sempre este profissional está presente na equipe (principalmente em empresas pequenas). Desta forma, a responsabilidade é igualmente do designer web e do front-end, que devem trabalhar juntos com o objetivo de encontrar a melhor solução: a que comunica melhor o significado e propósito da animação, e a que oferece melhor performance (esta última, uma responsabilidade maior do front-end).
- Pensar as animações antes de desenvolver o código é mais produtivo, pois elas terão propósito semântico e comunicacional, informando o usuário sobre o que esperar da interface e como interagir com a mesma. Isto não exclui que, após a definição dos sketchs ou layouts, quaisquer dos profissionais envolvidos sugiram melhorias. Como dito anteriormente, a responsabilidade é de todos.
- Use animações com moderação. A atitude de criar a interface e somente depois de pronta receber resolver “dar uma animada” pode ser o maior dos erros. Interface não é circo, e a intenção é comunicar com propósito e significância. Planeje, pesquise, busque referências no mundo online e offline.
Em suma, os Meetups são excelentes oportunidades para conhecer profissionais que lidam com assuntos do seu interesse, aprender novas abordagens, solucionar problemas ou aumentar a rede de contatos.
Para quem achou interessante a proposta, cadastre-se aqui e fique ligado nos próximos encontros. Sugira temas, problemas do seu dia-a-dia e fomente discussões. Ofereça lugares na sua empresa para que as reuniões aconteçam. Crie Meetups na sua cidade. Esta é ferramenta de colaboração pode contribuir com o desenvolvimento da comunidade trazendo benefícios a todos.
