12 tutoriais gratuitos de AE para profissionais de UX
Design web moderno envolve muitas partes móveis, como design de conteúdo, ícone de trabalho e Estratégias de design UX . Uma tendência mais recente é o uso de microinteractions em projetos web e móveis.
Eles ficam ótimos no projeto final, mas não são tão fáceis de fazer com um modelo estático. Assim, os designers estão pegando programas de animação como o After Effects para criar modelos baseados em movimento.
Se você está tentando aprender esse conjunto de habilidades, recomendo vivamente esses vídeos gratuitos no YouTube. Eles não vão te ensinar tudo, mas eles vão cobrir o básico e dar-lhe uma base sólida para avançar seu conjunto de habilidades.
1. Botão UI Animated
Isso mesmo breve animação da interface do usuário tutorial é perfeito para iniciantes com pouca experiência em AE. Isso requer alguma paciência para trabalhar através da interface, mas as instruções são cristalinas.
Você aprenderá a criar um pequeno efeito de animação de botão que pode funcionar muito bem para websites ou aplicativos para dispositivos móveis.
Isso não é nada de espetacular, mas no final você terá uma compreensão muito mais forte sobre esse conceito.
2. Protótipo de Movimento
Outra animação simples que você pode fazer é um menu deslizante como Neste vídeo . Ele ensina como animar um menu no After Effects e como trabalhar com camadas individuais no software.
É um tutorial bastante longo com mais de 40 minutos de orientação passo a passo. Mas vale a pena se você conseguir enxergá-lo até o fim.
3. Animação de ícone AE
Animações de ícones pequenos não são adicionadas diretamente à interface, mas podem aprimorar a experiência do usuário. Esses movimentos de ícone estão relacionados às pequenas microinterações mencionadas anteriormente.
E este ícone de animação tut fala sobre microinterações com instruções fáceis de seguir. Você pode até baixar ícones grátis no formato PSD / AI e use aqueles para a animação.
Mas isso também é útil para projetistas de ícones que criam seus próprios ícones do zero e querem animá-los para produção.
4. Cursores Animados de UI / UX
Muitos designers criam animações UX para mostrar como uma interface deve funcionar. Isso incluiria naturalmente cliques / furtos do mouse, pois você deseja ver como o conteúdo se move pela página.
Se você quiser adicionar movimentos de cursor para seus modelos, então este tutorial é para você. É um guia bastante curto, com apenas 15 minutos de duração, mas as informações são super valiosas e relevantes para os designers de dispositivos móveis e web.
5. interface do usuário do aplicativo para iPhone
Outro bom exemplo de uma animação focada no usuário é este seguindo uma entrada típica do aplicativo para iPhone. Você está criando o caminho de um usuário por meio de um aplicativo do iPhone preenchendo campos de formulário individuais.
Por si só, isso pode não parecer muito, já que as pessoas sabem como é esse processo.
Mas se você estiver criando uma página da Web ou um aplicativo que tenha um fluxo exclusivo, isso ajuda a mostrar que todo o comportamento do usuário insere informações no login e talvez mais.
6. App Page Swipes
Os designers de aplicativos para dispositivos móveis podem utilizar furtos de páginas para interfaces com várias páginas. Estes funcionam muito bem para galerias e para efeitos paginados.
Dentro este breve tutorial Você aprenderá a criar animações de furto de página com o After Effects usando alguns modelos existentes. Este vídeo vem livre de UX in Motion onde eles têm uma tonelada de tutoriais semelhantes e workshops privados.
O tema do movimento de UX não é coberto muito na web, mas esses caras são um dos poucos bons realmente investigando os detalhes. Confira todo o canal do YouTube se você quiser saber mais.
7. Jelly UI Animations
Você provavelmente já viu menus estranhos de gelatina líquida em aplicativos para Android ou mesmo em toda a web. Não são muito comuns porque são difíceis de recriar em código, mas com este tutorial Jelly UI você pode, pelo menos, construir as animações do zero.
É outro brinde da UX in Motion e só totaliza cerca de 5 minutos.
Mas você aprenderá muito sobre o After Effects e o processo geral de animação UX. Especificamente, como importar vetores e trabalhar com esses arquivos em uma linha do tempo - na verdade, apenas os fundamentos do trabalho de animação de interface.
8. Desdobrando Animação
Embora eu não possa dizer que essa animação afeta diretamente a interface, é algo legal que você pode adicionar ao logotipo do seu site. Desdobrando animações são usados principalmente em intros de vídeo para criar um visual brandable.
Mas os sites também podem ter animações de desdobramento semelhantes usando Gráficos SVG e animações JS básicas.
Mesmo que você não queira criar animações de logotipo, este tutorial ainda poderá guiá-lo por um fluxo de trabalho de interface AE simples. Perfeito para aprender as cordas sem muito estresse.
9. Animações básicas de prototipagem da interface do usuário
Os menus de aplicativos para dispositivos móveis vêm em muitos estilos diferentes com diferentes técnicas de animação. Este tutorial de interface do usuário ensina como animar o menu do ícone de balão desdobrável.
Isso foi creditado pela primeira vez no aplicativo Path, mas desde então se tornou uma tendência comum para dispositivos Android e iOS.
Ao longo deste vídeo de 20 minutos, você obterá ideias para animação de ícones e design de menu. É bastante simples de trabalhar e você pode usar ícones pré-desenhados para o fluxo de trabalho para economizar tempo.
10. Divisões de camadas 3D
As animações de apresentação são valiosas para o trabalho do cliente ou para compartilhar suas ideias na frente de uma equipe. Isso e onde essa animação da camada 3D tutorial pode ajudar.
Ele ensina como dividir diferentes elementos da camada e separá-los da interface completa. Você pode até mostrar elementos de página diferentes para exibir como o aplicativo / site deve funcionar.
Eu não posso imaginar isso seria valioso para o trabalho pessoal, mas é um ótimo efeito para aprender especialmente para shows comerciais.
11. iOS 8 Switches
Os botões de animação on-off apareceram pela primeira vez nas primeiras versões do iOS e, desde então, se espalharam para sites Android e gerais.
Os melhores switches de interface do usuário têm animações personalizadas e você pode construir o seu próprio, seguindo este tutorial de 25 minutos . Ele assume que você já tem os gráficos de comutação, mas também pode fazer o download um PSD grátis e use isso em vez disso.
Além disso, você pode redirecionar essa animação para qualquer tipo de switch que você criar no futuro. Um ótimo tutorial para alguém que está entrando no After Effects para UI / UX.
12. Animações de ícones suaves
O último da minha lista é este ícone detalhado movimento tut usando algumas formas vetoriais diferentes. É um guia bastante detalhado, totalizando pouco mais de 30 minutos e abrangendo algumas técnicas diferentes.
Depois de conhecer o After Effects, você pode aplicar essas ideias a outros estilos de ícones. É por isso que este tutorial é tão bom para iniciantes; ensina como trabalhar na interface AE com técnicas específicas para designers UI / UX.
Mas qualquer um desses tutoriais melhorará suas habilidades de animação UX, portanto, certifique-se de marcar qualquer um que chamar sua atenção.
