12 tutoriels AE gratuits pour les professionnels de l'expérience utilisateur
La conception Web moderne implique beaucoup de pièces mobiles telles que la conception de contenu, le travail sur les icônes et Stratégies de conception UX . Une nouvelle tendance est l'utilisation des microinteractions sur des projets web et mobiles.
Celles-ci ont fière allure dans le projet final mais ne sont pas si faciles à réaliser avec une maquette statique. Les concepteurs ont donc choisi des programmes d’animation comme After Effects pour créer des maquettes animées.
Si vous essayez d’acquérir ces compétences, je vous recommande vivement ces vidéos gratuites sur YouTube. Ils ne vous apprendront pas tout mais ils couvriront les bases et vous donneront une base solide pour faire progresser vos compétences.
1. Interface utilisateur du bouton animée
C'est très brève animation d'interface utilisateur tutoriel est parfait pour les débutants avec une expérience AE peu ou pas. Il faut un peu de patience pour travailler sur l'interface, mais les instructions sont claires.
Vous apprendrez à créer un petit effet d'animation de bouton qui peut parfaitement fonctionner pour les sites Web ou les applications mobiles.
Ce n'est pas quelque chose de spectaculaire, mais à la fin, vous comprendrez beaucoup mieux ce concept.
2. Motion Prototype
Une autre animation simple que vous pouvez faire est un menu glissant comme Dans cette vidéo . Il vous apprend à animer un menu dans After Effects et à utiliser des calques individuels dans le logiciel.
C'est un tutoriel assez long avec plus de 40 minutes de conseils étape par étape. Mais cela en vaut la peine si vous le voyez jusqu’à la fin.
3. Animation d'icône AE
Les petites animations d'icône ne s'ajoutent pas directement à l'interface, mais elles peuvent améliorer l'expérience utilisateur. Ces mouvements d'icônes se rapportent aux petites microinteractions mentionnées plus haut.
Et cette icône animation tut parle de microinteractions avec des instructions faciles à suivre. Vous pourriez même télécharger icônes gratuites en format PSD / AI et les utiliser pour l'animation.
Mais c'est également pratique pour les concepteurs d'icônes qui créent leurs propres icônes à partir de zéro et souhaitent les animer pour la production.
4. Curseurs UI / UX animés
De nombreux concepteurs créent des animations UX pour montrer comment une interface doit fonctionner. Cela inclurait naturellement les clics / glissements de souris car vous voulez voir comment le contenu se déplace sur la page.
Si tu veux ajouter des mouvements de curseur à vos maquettes, ce tutoriel est pour vous. C'est un guide assez court, seulement 15 minutes, mais les informations sont très précieuses et pertinentes à la fois pour les concepteurs de mobiles et de web.
5. Interface utilisateur de l'application iPhone
Un autre bon exemple d'une animation centrée sur l'utilisateur est celui-là suite à une entrée typique d'une application iPhone. Vous créez le chemin d'accès d'un utilisateur via une application iPhone remplissant des champs de formulaire individuels.
En soi, cela peut ne pas sembler beaucoup puisque les gens savent à quoi ressemble ce processus.
Mais si vous concevez une page Web ou une application qui possède un flux unique, cela aide à montrer l'intégralité du comportement de l'utilisateur, de la saisie des informations à la connexion, et peut-être plus.
6. Balayage de la page d'application
Les concepteurs d'applications mobiles peuvent utiliser les balayages de pages pour les interfaces à plusieurs pages. Ceux-ci fonctionnent très bien pour les galeries et pour les effets paginés.
Dans ce bref tutoriel Vous apprendrez à créer des animations de balayage de page avec After Effects en utilisant quelques maquettes existantes. Cette vidéo est libérée de UX in Motion où ils ont une tonne de tutoriels similaires et des ateliers privés.
Le sujet du mouvement UX n'est pas très abordé sur le web, mais ces gars-là sont l'un des rares bons dans les détails. Découvrez toute leur chaîne YouTube si vous voulez en savoir plus.
7. Animations Jelly UI
Vous avez probablement vu des menus bizarres de gelée liquide dans les applications Android ou même sur le Web. Celles-ci ne sont pas très courantes car elles sont difficiles à recréer en code, mais avec ce tutoriel Jelly UI vous pouvez au moins créer les animations à partir de zéro.
C'est un autre billet de faveur de UX in Motion et il ne totalise que 5 minutes.
Mais vous en apprendrez beaucoup sur After Effects et sur le processus d’animation UX. Spécifiquement, comment importer des vecteurs et travailler avec ces fichiers sur une ligne de temps, et pas seulement les bases de l'animation d'interface.
8. Déroulement de l'animation
Bien que je ne puisse pas dire que cette animation affecte directement l'interface, c'est quelque chose de cool que vous pouvez ajouter au logo de votre site Web. Déroulement des animations sont principalement utilisés dans les présentations vidéo pour créer un visuel de marque.
Mais les sites Web peuvent également avoir des animations dépliantes similaires en utilisant Graphiques SVG et animations de base JS.
Même si vous ne souhaitez pas créer d'animations de logo, ce tutoriel peut toujours vous guider à travers un simple flux de travail d'interface AE. Parfait pour apprendre les cordes sans trop de stress.
9. Animations de base de prototype d'interface utilisateur
Les menus des applications mobiles se présentent sous différents styles avec différentes techniques d'animation. Ce tutoriel sur l'interface utilisateur vous apprend à animer le menu de l'icône de la bulle.
Cela a été crédité pour la première fois sur l’application Path, mais est devenu depuis une tendance commune pour les appareils Android et iOS.
Au cours de cette vidéo de 20 minutes, vous trouverez des idées pour l'animation par icônes et la conception de menus. Il est assez simple de travailler avec et vous pouvez utiliser des icônes préconçues pour le flux de travail afin de gagner du temps.
10. Splits de couche 3D
Les animations de présentation sont précieuses pour le travail du client ou pour partager vos idées devant une équipe. C'est là que cette animation de couche 3D tutoriel peut aider.
Il vous apprend à briser différents éléments de la couche et à les séparer de l'interface complète. Vous pouvez même présenter différents éléments de page pour afficher le fonctionnement de l'application / du site Web.
Je ne peux pas imaginer que cela serait précieux pour le travail personnel, mais c'est un effet cool à apprendre en particulier pour les concerts commerciaux.
11. Commutateurs iOS 8
Les commutateurs d'animation marche / arrêt sont apparus pour la première fois dans les premières versions d'iOS et se sont depuis répandus sur les sites Web Android et généraux.
Les meilleurs commutateurs d’interface utilisateur ont des animations personnalisées et vous pouvez créer vos propres ce tutoriel de 25 minutes . Il suppose que vous avez déjà les graphiques de commutation, mais vous pouvez également télécharger un PSD gratuit et l'utiliser à la place.
De plus, vous pouvez réutiliser cette animation pour tout type de commutateur que vous concevez à l'avenir. Un excellent tutoriel pour quelqu'un qui s'intéresse à After Effects pour UI / UX.
12. Animations des icônes lisses
Le dernier sur ma liste est cette motion détaillée de mouvement d'icône en utilisant quelques formes vectorielles différentes. C'est un guide assez détaillé totalisant un peu plus de 30 minutes et couvrant différentes techniques.
Une fois que vous connaissez votre chemin, After Effects vous permet d'appliquer ces idées à d'autres styles d'icônes. C'est pourquoi ce tutoriel est si génial pour les débutants; Il vous apprend à travailler dans l'interface AE avec des techniques spécifiques pour les concepteurs UI / UX.
Mais l'un de ces tutoriels vous permettra d'améliorer vos compétences en animation UX, alors assurez-vous de mettre en signet tout ce qui attire votre attention.
