Où trouver de l’inspiration pour vos animations ?

Avez-vous déjà remarqué à quel point les animations sont devenues un composant essentiel au cœur des interfaces utilisateur ? Pour en tenir compte dans vos projets futurs et vous inspirer, découvrez quelques sites et outils de référence à connaître.

Aujourd’hui, l’animation n’est plus réservée à des sites de jeux, pour des expériences interactives poussées ou simplement des applications mobiles. Grâce au support étendu de CSS3, du WebGL, de SVG, de la vidéo et grâce au développement des librairies Javascript, les animations font partie intégrante de nos sites web. Elles permettent à l’utilisateur d’avoir une expérience agréable, d’avoir des repères dans l’espace et souvent de comprendre l’organisation des éléments.

Les traditionnels blocs plats, « sans vie » et en 2D prennent vie avec des mouvements « réalistes » qui suivent les lois de la physique du monde réel. Certains sites utilisent un simple effet soulignement original par exemple, tandis que d’autres placent l’animation au cœur de leur expérience. Pour un rendu le plus naturel possible, votre animation doit être minimale et réfléchie avant d’être implémentée dans votre projet web.

« Une animation bien réussie est celle que l’utilisateur ne va pas remarquer »

La clé d’une animation réussie réside dans sa justesse. Aussi paradoxal que celui puisse paraître, les petites animations simples et engageantes ne vont pas donner à l’utilisateur le sentiment d’être face à une animation. Celle-ci va juste se contenter de soutenir la navigation, faire apparaître des éléments et améliorer l’expérience sur l’interface. Les animations à plus grande échelle peuvent être amenées dans un visuel d’introduction par exemple. Tenter de mettre trop d’éléments animés risque de provoquer le chaos le plus complet dans votre interface.

Pour avoir une animation qui fonctionne, pensez au réalisme de celle-ci avant tout. Évitez les effets trop rapides ou étranges, restez « smooth » avant tout. Dans les interfaces actuelles plutôt flat, les utilisateurs ont besoin de nouveaux points de repères pour se servir de votre interface. Google l’a très bien compris avec son Material Design par exemple. Au-delà de tout le principe graphique, les animations subtiles utilisées sur mobile permettent de comprendre quel bouton toucher, comment passer à l’étape suivante, etc. L’animation nous rend ainsi capables d’amener une couche d’expression supplémentaire, sans surcharger graphiquement une interface.

Des galeries pour trouver l’inspiration :

Les bonnes pratiques sont dans la nature et encore plus dans de belles galeries à bookmarker sans plus attendre. En voici quelques-unes :

UI Movement

Commençons par UI Movement, un site de référence compilant les meilleures animations / interactions. Un excellent répertoire avec de nouveaux exemples publiés tous les jours.

animation

User Interfaces

Le compte User Interfaces propose une mise à jour quotidienne de nouvelles vidéos Instragram présentant d’intéressants interaction. Hélas le projet n’est plus mis à jour depuis quelques mois, mais il n’en reste pas moins très intéressant et complet.

animation

Use Your Interface

UYI est une galerie regroupant des centaines d’idées pour vos interfaces.

animation

Codepen Patterns

Attention, c’est du lourd. Le très bon site Codepen met à disposition des centaines de patterns pour divers assets de sites web. Il ne sont pas forcément tous animés, mais la galerie peut-être un très bonne source d’inspiration pour vos projets.

animation

Des ressources pour créer vos animations :

Atomic

Atomic est une intéressante web app pour créer de belles interactions. Pratique pour prototyper rapidement un principe d’animation sur un site, un mobile, une montre connectée etc.

animation

Invsion

Le mastodonte de l’outil de prototypage, de collaboration et de workflow propose lui aussi des outils pour simuler rapidement des animations dans vos interfaces. Une bonne idée pour des simulations rapides.

animation

Code My UI

Toute une collection d’éléments d’animations CSS et JS prêtes à être utilisées dans vos interfaces.

animation

Facebook Origami

Un outil gratuit mis à disposition par les équipes de Facebook. La bibliothèque proposée à l’air vraiment impressionnante, il reste juste à voir comment vous allez vous en servir.

animation

Motion UI

Mis à disposition par Zurb, Motion UI est une librairie basée sur CSS pour gérer les transitions et animations de manière simple.

animation

Web Animation at Work

Un article de 2014 sur l’utilisation de l’animation sur le web de manière réelle.

animation

5 ways to animate responsibly

Comme son nom l’indique, quelques bonnes pratiques pour animer de manière juste.

animation

 

Pour conclure :

Si je devais isoler la principale raison d’utiliser l’animation, je dirai que son rôle est d’augmenter la facilité d’utilisation de votre interface. Des animations simples peuvent être d’excellents outils d’orientation pour aider les gens à comprendre comment utiliser votre interface. Évitez à tout prix les animations volontairement très (trop) lourdes pour rester simple, efficace et ne pas transformer votre UI en film Disney. Si votre animation est purement visuelle, réfléchissez à ce qu’elle est censée apporter à l’utilisateur. Est-ce purement du divertissement ? Sont rôle est-elle d’effectuer une manoeuvre de fonctionnement majeure ? Ne perdez pas de vue le fait que votre interface est supposée raconter une histoire. L’animation est là pour soutenir ce lien émotionnel entre l’interface et l’utilisateur.

Bref, utilisez toujours l’animation dans un but bien précis et non pas juste pour « donner vie à votre interface ».

Et vous, comment utilisez-vos les animations dans vos projets ?

6 commentaires

Répondre Webdesign - lisavillaret | Pearltrees Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*