À plusieurs reprises nous vous avons fournis des exemples d’animations à réutiliser pour le design de votre site web ou de votre application mobile.

Mais concrètement, où et comment les utiliser ? C’est ce que nous allons voir dans cet article. Vous allez découvrir les différentes possibilités qui s’offrent à vous pour intégrer les animations sur votre site.

1. Des animations sur le loader

Le loader (ou barre de chargement) est un élément qui est très régulièrement doté d’une animation. Et ce n’est pas que pour faire joli.

Utilisée sur un loader, l’animation a pour but de faire patienter le visiteur. Si vous n’arrivez pas à diminuer le temps de chargement de votre site à un délai convenable, l’animation vous sera d’une grande utilité.

Source – Wanda Arca sur Dribbble

Faire patienter un internaute n’est pas gagné d’avance. Votre animation devra donc :

2. Des animations sur votre logo

C’est un peu moins courant, pourtant un logo animé permet de se démarquer de la concurrence. L’animation lui donnera un look moderne et dynamique.

Et puis c’est certain, votre logo va attirer tous les regards.

Vous pouvez apposer votre logo animé sur les réseaux sociaux, dans une vidéo et même si votre site.

Pour qu’il soit réussi, veillez à ce que l’animation ne soit ni trop longue, ni trop rapide. Il faut trouver le juste milieu.

Source : Ramotion sur Dribbble

3. Des animations sur vos call-to-action

Vous vous dites peut-être que placer une animation sur un call-to-action tout le monde le fait déjà. Certes.

Pourtant vous devez aussi doter vos boutons d’animations.

Cela permet d’indiquer clairement à l’internaute que l’élément en question est interactif et qu’il peut cliquer dessus. Une fois l’action réalisée, l’animation permet également de lui montrer la progression de la tâche en cours.

Source : Hoang Nguyen sur Dribbble

De manière plus générale, vous pouvez placer des animations sur l’ensemble des éléments qui peuvent être cliqués, tel que du texte comportant un lien.

4. Des animations pour aider votre utilisateur

Si votre site ou votre application est dotée de fonctionnalités spécifiques, il est recommandé de fournir à l’utilisateur une courte présentation du fonctionnement.

Les animations peuvent être utilisées au sein d’une pop-up pour rendre l’explication moins ennuyante.

Source : James G. sur Dribbble

Gardez aussi en tête que sur mobile les utilisateurs n’ont pas cette notion de hover. Pour leur indiquer qu’une action a bien été exécutée vous pouvez là encore prévoir une animation.

5. Des animations pour le storytelling

Je suis certaine que votre marque à une histoire à raconter. Pour embarquer vos visiteurs il n’y a rien de mieux que les animations.

Les animations peuvent accompagner votre storytelling et être utilisées dans votre webdesign via :

Source : Eugene Paryhin sur Dribbble

Finalement, vous pouvez prendre plus de libertés et utiliser les animations « pour le fun ».

Mais où que vous les utilisiez, veillez à ce que les animations ne déservent pas la qualité des informations.