20 meilleurs cadeaux pour les aspirants concepteurs de mouvement UX

Les concepteurs d'interfaces s'intéressent de plus en plus à la conception UX avec des maquettes animées qui imitent les actions des utilisateurs. Ces maquettes UX compter sur le mouvement avec des effets animés pour définir comment une interface devrait répondre à l'entrée de l'utilisateur.

La plupart des concepteurs UX apprennent à utiliser un logiciel pour créer ces animations. Les deux choix les plus populaires sont Adobe After Effects et Principle (OS X uniquement). Vous pouvez maquettes d'interface de conception dans un programme comme Photoshop, et déplacez les interfaces utilisateur dans ces programmes pour l'animation.

Si vous êtes intéressé par l’animation UX, les freebies seront un atout considérable. Vous pouvez étudier le travail des autres et jouer avec leurs dessins pour voir comment tout cela fonctionne..

Ci-dessous, vous trouverez les meilleurs cadeaux pour les utilisateurs de Principle et AE uniquement entrer dans le motion design UX. Ils vont sûrement vous aider à comprendre comment fonctionne l'animation UX, et comment construire le vôtre.

1. Supprimer l'action

Glisser est une action très commune dans les applications mobiles à des fins diverses. L’action de glissement iOS par défaut est utilisée pour afficher d'autres options pour modifier / supprimer des éléments, et c'est exactement ce que vous obtenez dans ce billet de faveur créé par Ramil Derogongun.

Vous pouvez télécharger le fichier AEP gratuit pour After Effects et l’essayer vous-même. L’UI suit un schéma de base très filaire avec entrée utilisateur affichée comme un point bleu. Ces types de comportement des utilisateurs sont les meilleurs à montrer à travers l'animation car il donne aux développeurs une chance de voir comment l'interface devrait fonctionner.

2. Balayage de widget

Voici une autre maquette animée de balayage qui se concentre sur les articles du panier dans un diaporama. Conçue par Leon Wu, cette animation gratuite est accompagnée d'un fichier PRD conçu pour Principle.

L'animation est extrêmement simple et montre comment les éléments doivent se déplacer à l'écran. quand la pression est appliquée. Vous avez également une idée de la effet assouplissant chaque fois que l'action de balayage est libérée.

3. Interface utilisateur Dualshock

Voici un effet d'animation UX incroyablement dynamique partagé par Alexander Boychenko. Cette maquette est basée sur le PlayStation Controller pour une interface utilisateur d'application mobile. Il comprend un fichier Sketch and Principle que vous pouvez télécharger gratuitement..

Ce billet de faveur montre comment créer des transitions qui glisser entre les écrans. Mais vous pouvez également voir comment les éléments de la page s'animent à l'écran dans diverses directions.

4. Animation du menu Hamburger

Les icônes de hamburger font toujours fureur dans les interfaces mobiles. Cette icône de menu freebie montre comment animer l'icône à trois barres en "X".

C'est un animation répétée, de sorte que le "X" réanime également dans une icône de menu hamburger. C’est un billet de faveur pour en savoir plus sur manipulation de vecteur pour les éléments d'interface utilisateur.

5. Snapster

Cette maquette gratuite est destinée à une application mobile appelée Snapster. Cela met l'accent sur l'écran d'accueil / d'accueil où les utilisateurs peuvent voir des démos de l'application et apprendre comment elle fonctionne réellement.

Il s’agit d’un fichier PRD; malheureusement, cela ne fonctionne pas très bien avec After Effects; seuls les utilisateurs de Principle peuvent en bénéficier..

6. Chargement des filateurs

Voici un freebie AEP After Effects pour fileuses de chargement mobiles. Ces types de GIF animés sont devenus très populaires lorsque Ajax a fait son entrée dans le développement Web classique.

Maintenant, ces chargeurs mobiles sont à la pelle, et ils peuvent même être fortement personnalisé pour s'adapter à certaines interfaces. Ce billet de faveur est livré avec un fichier AEP et un fichier Sketch pour modifier les vecteurs si vous souhaitez les modifier..

7. Transition Lecture / Pause

Effets de transition semblent souvent très simples mais nécessitent en réalité une bonne quantité de travail. Cette animation de lecture / pause créée par Alex Pronsky en est un excellent exemple..

Avec ce billet de faveur, vous pouvez examiner comment animer diverses icônes de lignes minces. en formes et symboles. Une fois que vous avez appris le programme, il devient beaucoup plus facile de faire ce type de choses, il est donc utile de disposer de cadeaux pour la recherche..

8. maquette de l'iPhone

Alors que ce billet de faveur ne contient pas directement d'animation, il est destiné à être utilisé pour le travail de production sur les applications iPhone. C'est un fichier AEP gratuit pour iPhone 5S à utiliser dans After Effects en tant que modèle pour iPhone..

Importez simplement votre maquette d'interface et créez les animations dans After Effects. Ensuite, vous pouvez le brancher sur cette maquette iPhone pour le partager avec votre équipe..

9. Modèle iPhone

Ceci est un autre modèle After Effects personnalisé avec un conception plus moderne d'iPhone. Le billet de faveur est disponible sur cette page à l'adresse UX in Motion..

Tout dans le modèle est super facile à personnaliser. Sur la page de téléchargement, vous trouverez également une section intitulée "Instructions vidéo" où vous pourrez apprendre à animer l'application..

10. Micro Animation

Même les plus petites animations d'applications peuvent avoir un impact important sur l'expérience utilisateur. Ce billet de faveur affiche un "J'aime" la micro animation chaque fois qu'un utilisateur "aime" un message.

L'icône du coeur a sa propre animation avec la photo de profil de l'utilisateur ajoutée à la pile de «j'aime». Cette gratification est uniquement pour Principle et vous avez également un .mov fichier à télécharger si vous le souhaitez.

11. App portefeuille

Les portefeuilles numériques sont de plus en plus populaires et ce billet de faveur facilite leur conception. Vous obtenez un fichier Sketch avec tous les éléments vectoriels bruts, ainsi qu'un fichier PRD gratuit pour l'animation Principle.

Ce billet de faveur a été conçu par Sergey Bykov comme un petit projet amusant. Mais cela peut être très instructif si vous le démontez et travaillez avec l'animation pas à pas..

12. commutateur iOS

Avec iOS 7 d'Apple, le monde entier s'est doté d'un commutateur fraîchement conçu pour les étiquettes activées / désactivées. Cela a conduit à de nombreux effets différents, y compris une animation gratuite qui imite le commutateur natif on / off.

Dans ce fichier, vous obtenez un effet d'animation très simple avec un soulagement de base. Le commutateur se déplace et l'arrière-plan devient vert, puis revient en arrière lorsque le commutateur est désactivé.

13. App Ritter

Voici un autre billet de faveur publié par Sergey Bykov pour ce qu'il appelle l'application Ritter. Cela inclut un fichier Sketch gratuit pour l'interface vectorielle, ainsi qu'un fichier PRD gratuit pour l'animation Principle.

Tu auras beaucoup d'animations différentes dans ce billet de faveur, donc je pense que ce serait plus utile pour un concepteur intermédiaire à avancé. Les débutants peuvent aussi apprendre beaucoup de choses, mais peuvent avoir une courbe d'apprentissage abrupte.

14. Inviter des amis

Nous connaissons et aimons tous le menu déroulant icône Plus de Google. Jardson Almeida a créé un menu Invitation d'amis basé sur un concept simple: Material Design.

Tout a été conçu dans Sketch et importé dans Principle pour l'animation. Vous obtenez les deux fichiers en freebies à télécharger et à jouer avec.

15. Glissement de carte

Voici un autre billet de faveur général, créé uniquement pour les utilisateurs Principle. C'est un interface de balayage de carte créé pour les diaporamas d'usage général ou les interfaces utilisateur d'applications natives.

Je pense que ceci est le billet de faveur parfait pour un débutant qui commence à entrer dans Principle. Ce n'est pas si compliqué de se sentir perdu, mais ce n'est pas si simple de se sentir banalisé.

16. Chat sur la carte

De nombreux concepteurs utilisent encore Photoshop pour les interfaces, et il en va de même pour ce billet gratuit sur carte. Vous pouvez télécharger un fichier PSD pour l'interface et un fichier PRD pour l'animation Principle.

C'est une animation étonnamment apprivoisée pour le style, mais elle a quand même une belle apparence et fonctionne exactement comme on peut s'y attendre dans une application de cartes / géolocalisation simple.

17. Chargement de l'application

Les applications mobiles utilisent souvent écrans de chargement pour dire aux visiteurs que quelque chose se passe dans le backend. Un de mes cadeaux préférés dans cette collection est cette animation de chargement créée par Roman Wagner.

Il charge des éléments individuels l'un après l'autre une fois l'écran de chargement terminé. Cette animation est très fluide et totalement crédible dans le domaine de la conception d'applications mobiles..

18. Cartes d'intégration

Utilisateur onboarding est une étape cruciale pour chaque nouvelle application mobile. Il est toujours agréable d'inclure des animations à ce stade. C'est pourquoi ces animations de carte d'intégration peuvent être très utiles pour les concepteurs d'applications..

Ceci a été créé par Austin Baird et publié gratuitement pour être utilisé sur n'importe quel projet UI / UX..

19. Démos de principe

Au fur et à mesure que vous approfondissez Principle, vous apprendrez de nombreuses techniques de flux de travail avancées. L'un des meilleurs cadeaux pour aller plus loin est celui-ci créé pour l'équipe créative de Yalantis.

Il s'agit d'une ressource entièrement gratuite que les utilisateurs de Principle peuvent télécharger et utiliser. Il couvre quelques astuces montrant comment devenir un pro de l’animation Principle.

20. menus déroulants

Les menus déroulants utilisent souvent des animations loufoques pour capter notre attention. Ce billet de faveur After Effects utilise un animation d'escaliers sur le menu des éléments individuels pour les faire tomber comme des escaliers.

Cela n’est peut-être pas utile pour tout le monde, mais c’est un excellent moyen d’en savoir plus sur l’animation d’interface After Effects..

Mots finaux

Toutes ces ressources sont entièrement gratuites à télécharger et à utiliser dans vos propres projets. Si vous êtes nouveau dans l'animation UX, je vous garantis que vous en apprendrez beaucoup en étudiant ces cadeaux. Si vous connaissez d’autres ressources intéressantes, n'hésitez pas à déposer des liens dans les commentaires..