Navigation

Toutes les catégories

Voir les derniers articles

Web design : 5 façons d’utiliser les animations

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

Publié par Charlotte Chollat

À 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é.

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

  • Être divertissante
  • Être captivante
  • Se charger rapidement

 

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.

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.

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.

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 :

  • La navigation
  • Une timeline
  • Les images et illustrations

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.

Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

Système de grille : comment l’utiliser pour créer un logo ?

Dans un précédent article je vous avais vanté les mérites d’un système de grille pour vos créations graphiques. Mises en pages ou...

Publié le par Charlotte Chollat
Graphisme

10 bonnes raisons d’utiliser une imprimerie en ligne

Au moment d’imprimer vos documents ou vos créations graphiques, deux grandes possibilités s’offrent à vous : choisir un imprimeur...

Publié le par Leo Chatillon