Animations et transitions d’interface : où trouver l’inspiration ?

Animations et transitions d'interface : où trouver l'inspiration ?
Ce contenu a été rédigé il y a 5 années. Il se peut qu'il ne soit plus à jours.

Dans le design d’interface et de site web, chaque petit détail compte de plus en plus. Les petites transitions et animations entre les éléments d’interface avec lesquels l’utilisateur va interagir au survol ou au clique sont aujourd’hui une partie très importante de l’expérience globale qu’il va avoir avec un service ou une application en ligne. L’excellent article “Transitional Interfaces” vous donnera de bons exemples de ce en quoi de simples petites animations peuvent améliorer l’expérience utilisateur.

Penser, prévoir et imaginer toutes ces petites animations fait donc aujourd’hui partie intégrante de notre travail de designer web. Il n’est pourtant pas forcément simple d’imaginer ces interactions et de trouver un peu d’inspiration. Il est également souvent compliqué de communiquer ce genre d’interactions à l’équipe d’intégrateurs qui va se charger de transformer nos jolies maquettes (PSD, FW, etc.) en pages web HTML/CSS/JS. Beaucoup de galeries regroupes des screenshots de sites, mais ces captures restent des images figées et sans vie.

Expliquer à un autre être humain ce que l’on a imaginé à l’intérieur de sa petite tête pour l’interaction de tel ou tel bouton peut donc parfois relever de l’ordre du défis. Au cours de mes projets, je me suis rendu compte qu’il est souvent plus facile de communiquer visuellement qu’avec des mots avec l’intégrateur et le client en lui montrant des exemples proches du type de rendu que l’on souhaite mettre en place.

Dans cet article je vous propose de vous donner quelques pistes pour trouver de l’inspiration pour ces interactions, mais également quelques outils et Framework qui vous proposent des animations toutes faites et déjà codées. Je ne réutilise pas forcément le code en l’état de ces Framework, mais il me sert souvent d’inspiration et de base de travail pour montrer à un client différentes possibilités et à l’intégrateur ce que je souhaite obtenir comme résultat final.

Dernière mise à jour : 19 janvier 2015

Inspiration d’interactions et d’animations

Sixux.com http://sixux.com/

Ce tumblr propose des petites vidéos Vine de 6 secondes d’animations et interactions.

Le petit plus : le site classe les animations par tags

Le moins : L’auteur y film l’écran avec son Smartphone ce qui fait que les interactions en sont pas toujours très visibles, mais il vous suffit de cliquer sur le lien pour voir le “vrai” site.

 Hoverstat.es

Hover States

Ce tumblr propose des GIFs animés de différents effets au survol, interactions et animations de site

Le plus : le site classe les interactions par catégorie et la présentation GIF animé + “faux navigateur” est propre et épurée

Le moins : les GIFS animés tournent en boucle et peuvent parfois être lourds à charger

 Ui-animations.tumblr.com

UI animations

Ce tumblr lui aussi propose des GIFs animés d’interactions d’interface

Le plus : il ne se contente pas d’interactions de site web, mais également d’applications natives iOS, OSX, etc.

Le moins : pas (encore?) de classement par tags ou catégories pour ce site.

Capptivate.co

captivateco

Cette galerie d’animations et transitions est tout spécialement dédiée aux animations d’applications mobiles. Il vous suffit de survoler l’exemple pour lancer l’animation.

Le plus: les animations sont là encore classées par type en différents catégories

Le moins : vous ne trouverez ici que des animations d’applications mobiles, mais les effets sont tout à fait transposables à certains site web parfois

useyourinterface.com

http://useyourinterface.com/

Voici un autre tumblr qui vous propose plusieurs captures de transitions et d’animations dans du design d’interface et de site web.

Le plus : en plus des GIFs animés, vous trouverez également de courtes vidéos

Le moins: aucune classification par catégories pour ce site Le site a été mis à jours depuis et propose une classification par catégories :)

 

Enfin, mes tendances de collectionneuse me poussent moi aussi à récupérer pleins de bouts d’animation trouvées sur le web. Je les ai pour le moment mis dans un iceberg mais le service ne propose ni classement par tags, ni possibilité d’ajouter un lien cliquable. Je ne suis pas convaincue que c’est l’endroit le plus adapté, à voir si je trouve mieux.

Si vous avez d’autres sites pour compléter la liste, n’hésitez pas à m’en faire part dans les commentaires.

Démos et Framework d’animation et transition CSS

Je précise avant de vous mettre les liens, que ces Framework contiennent des animations plus ou moins utilisables sur un “vrai” projet, c’est donc à vous de faire le tris. Le but n’est pas d’ajouter une animation “pour le fun” mais bien qu’elle ai une réelle valeur ajoutée à l’expérience de vos utilisateurs. Inutile de vous repréciser encore une fois que dès que l’on parle d’animations CSS3, il faut tenir compte de la compatibilité navigateur :)

Animate.cssAnimate.css

 

Ce Framework CSS propose différentes animations CSS3 classées par catégories. Elles sont dans la démo appliquées sur un élément qui ressemble à un bouton, mais l’on peut très bien imaginer les appliquer ailleurs.

Le petit plus : animate.css propose un “custom bluid” qui vous permet de ne récupérer pour votre projet que les animations dont vous aurez besoin.

Magic-css3-animations

CSS magic

Ce Framework, inspirée d’ailleurs d’animate.css propose lui aussi différents effets d’animation classés par catégorie, certaines plus réutilisables que d’autres. Chaque animation peut-être appliquée sur le petit élément en cliquant sur le bouton.

La récupération du code se fait via github. De base le Framework est à utiliser avec jQuery, mais on peut facilement imaginer adapter le code pour des :hover en CSS par exemple ou déclencher les animations en VanillaJS

 ElementTransition.jsElement Transition JS

 

Basé sur l’article “Page Transitions” de Codrops, ElementTranstions a modifié ces transitions pour les appliquer sur différents éléments HTML (pas uniquement des pages). Là encore, même si vous n’allez sans doute pas forcément réutiliser le code en l’état, le site propose une grande galerie d’animations et transitions possibles sur des blocs et éléments de design.

Effeckt.CSSEffeckt

Cette galerie rassemble là encore différents éléments glanés sur Codrops, CSS Tricks et d’autres blogs renommés. Vous y trouverez entre autre des exemples d’animation de modale, de boutons, d’ajouts d’éléments de liste et de listes déroulantes, de survol d’image ou encore de navigation hors champ (off-canvas).

Cette galerie est en constante évolution et vous pouvez même y proposer vos contributions. Le but ici n’est clairement pas de proposer des éléments “jolis” (toutes les démos sont grisées), mais de mettre l’accent sur les animations et les transitions.

CSS3 Animations Cheat Sheet

CSS3 animation

Celui-la vous propose lui aussi une jolie petite galerie d’effets d’animations que vous pourrez tester sur une petite tête sympa. Les animations sont là aussi applicables en CSS3, mais ce Framework vous propose une option supplémentaire : avec une surcouche jQuery vous pourrez déclencher les animations au moment où l’utilisateur aura fait suffisamment défilé la page pour qu’elles apparaissent. Une petite démonstration de l’effet est proposée en ligne.

Hover.css

https://ianlunn.github.io/Hover/

Celui-ci est un repository git dédié uniquement aux animations et transitions au survol de boutons.  classées par thématiques (2D, arrière plan, etc.)

Et la liste continue…

Si vous avez d’autre librairies d’animations que vous utilisez qui quotidien que ce soit pour le code, pour simplement pour l’inspiration, n’hésitez pas à les partager dans les commentaires.

 

 

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

5 réflexions au sujet de « Animations et transitions d’interface : où trouver l’inspiration ? »

  1. Bonjour !
    merci pour cet article, les sites sont intéressants, le souci c’est que toutes les animations se chargent en même temps, du coup ça clignote de partout #malauxyeux :) Mais c’est cool pour avoir des idées
    Je ne connaissais pas iceberg.gs, c’est sympa, mais je ne vois pas trop la différence avec pinterest, qui propose des tableaux cachés et donc privés. Quels sont les avantages ?
    Bonne journée !

    • Effectivement ça clignote parfois :)
      Pour Iceberg, il permet de faire du drag & drop directement dans le navigateur pour uploader plusieurs images à la fois, mais également des fichiers texte, PDF, AI, PSD et « bookmarker » des sites directement.

  2. Ping : Des pixels et du code #73 - Stéphanie Walter, Graphiste - Designer web et mobile

  3. Merci pour cet article,
    Liste interessante. Connaissez-vous EWC Presenter ?
    Un outil pour faire des presentations graphiques, transitions, animations, tous type de contenus interactifs.
    Assez complet et facile d’utilisation.
    Dites moi ce que vous en pensez ?