{"id":1743,"date":"2013-07-27T16:15:37","date_gmt":"2013-07-27T14:15:37","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1743"},"modified":"2017-11-19T16:38:31","modified_gmt":"2017-11-19T15:38:31","slug":"animations-et-transitions-dinterface-ou-trouver-linspiration","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/animations-et-transitions-dinterface-ou-trouver-linspiration\/","title":{"rendered":"Animations et transitions d’interface : o\u00f9 trouver l’inspiration ?"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 11 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Dans le design d\u2019interface et de site web, chaque petit d\u00e9tail compte de plus en plus. Les petites transitions et animations entre les \u00e9l\u00e9ments d\u2019interface avec lesquels l\u2019utilisateur va interagir au survol ou au clique sont aujourd\u2019hui une partie tr\u00e8s importante de l\u2019exp\u00e9rience globale qu\u2019il va avoir avec un service ou une application en ligne. L\u2019excellent article \u201cTransitional Interfaces\u201d<\/a> vous donnera de bons exemples de ce en quoi de simples petites animations peuvent am\u00e9liorer l\u2019exp\u00e9rience utilisateur.<\/p>\n

Penser, pr\u00e9voir et imaginer toutes ces petites animations fait donc aujourd\u2019hui partie int\u00e9grante de notre travail de designer web. Il n\u2019est pourtant pas forc\u00e9ment simple d\u2019imaginer ces interactions et de trouver un peu d\u2019inspiration. Il est \u00e9galement souvent compliqu\u00e9 de communiquer ce genre d’interactions \u00e0 l\u2019\u00e9quipe d\u2019int\u00e9grateurs 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\u00e9es et sans vie.<\/p>\n

Expliquer \u00e0 un autre \u00eatre humain ce que l\u2019on a imagin\u00e9 \u00e0 l\u2019int\u00e9rieur de sa petite t\u00eate pour l\u2019interaction de tel ou tel bouton peut donc parfois relever de l\u2019ordre du d\u00e9fis. Au cours de mes projets, je me suis rendu compte qu\u2019il est souvent plus facile de communiquer visuellement qu\u2019avec des mots avec l\u2019int\u00e9grateur et le client en lui montrant des exemples proches du type de rendu que l\u2019on souhaite mettre en place.<\/p>\n

Dans cet article je vous propose de vous donner quelques pistes pour trouver de l\u2019inspiration pour ces interactions, mais \u00e9galement quelques outils et Framework qui vous proposent des animations toutes faites et d\u00e9j\u00e0 cod\u00e9es. Je ne r\u00e9utilise pas forc\u00e9ment le code en l’\u00e9tat de ces Framework, mais il me sert souvent d\u2019inspiration et de base de travail pour montrer \u00e0 un client diff\u00e9rentes possibilit\u00e9s et \u00e0 l\u2019int\u00e9grateur ce que je souhaite obtenir comme r\u00e9sultat final.<\/p>\n

Derni\u00e8re mise \u00e0 jour : 19 janvier 2015<\/strong><\/p>\n

Inspiration d\u2019interactions et d’animations<\/h2>\n

Sixux.com<\/a> \"http:\/\/sixux.com\/\"<\/a><\/h3>\n

Ce tumblr propose des petites vid\u00e9os Vine de 6 secondes d\u2019animations et interactions.<\/p>\n

Le petit plus<\/em> : le site classe les animations par tags<\/p>\n

Le moins<\/em> : L\u2019auteur y film l\u2019\u00e9cran avec son Smartphone ce qui fait que les interactions en sont pas toujours tr\u00e8s visibles, mais il vous suffit de cliquer sur le lien pour voir le \u201cvrai\u201d site.<\/p>\n

\u00a0Hoverstat.es<\/a><\/h3>\n

\"Hover<\/a><\/p>\n

Ce tumblr propose des GIFs anim\u00e9s de diff\u00e9rents effets au survol, interactions et animations de site<\/p>\n

Le plus<\/em> : le site classe les interactions par cat\u00e9gorie et la pr\u00e9sentation GIF anim\u00e9 + \u201cfaux navigateur\u201d est propre et \u00e9pur\u00e9e<\/p>\n

Le moins<\/em> : les GIFS anim\u00e9s tournent en boucle et peuvent parfois \u00eatre lourds \u00e0 charger<\/p>\n

\u00a0Ui-animations.tumblr.com<\/a><\/h3>\n

\"UI<\/a><\/p>\n

Ce tumblr lui aussi propose des GIFs anim\u00e9s d\u2019interactions d\u2019interface<\/p>\n

Le plus<\/em> : il ne se contente pas d\u2019interactions de site web, mais \u00e9galement d\u2019applications natives iOS, OSX, etc.<\/p>\n

Le moins<\/em> : pas (encore?) de classement par tags ou cat\u00e9gories pour ce site.<\/p>\n

Capptivate.co<\/a><\/h3>\n

\"captivateco\"<\/a><\/p>\n

Cette galerie d’animations et transitions est tout sp\u00e9cialement d\u00e9di\u00e9e aux animations d’applications mobiles. Il vous suffit de survoler l’exemple pour lancer l’animation.<\/p>\n

Le plus:<\/em> les animations sont l\u00e0 encore class\u00e9es par type en diff\u00e9rents cat\u00e9gories<\/p>\n

Le moins :<\/em> vous ne trouverez ici que des animations d’applications mobiles, mais les effets sont tout \u00e0 fait transposables \u00e0 certains site web parfois<\/p>\n

useyourinterface.com<\/a><\/h3>\n

\"http:\/\/useyourinterface.com\/\"<\/a><\/p>\n

Voici un autre tumblr qui vous propose plusieurs captures de transitions et d’animations dans du design d’interface et de site web.<\/p>\n

Le plus :<\/em>\u00a0en plus des GIFs anim\u00e9s, vous trouverez \u00e9galement de courtes vid\u00e9os<\/p>\n

Le moins:<\/em>\u00a0aucune classification par cat\u00e9gories pour ce site\u00a0<\/del>Le site a \u00e9t\u00e9 mis \u00e0 jours depuis et propose une classification par cat\u00e9gories :)<\/p>\n

 <\/p>\n

Enfin, mes tendances de collectionneuse me poussent moi aussi \u00e0 r\u00e9cup\u00e9rer pleins de bouts d\u2019animation trouv\u00e9es sur le web. Je les ai pour le moment mis dans un iceberg<\/a> mais le service ne propose ni classement par tags, ni possibilit\u00e9 d\u2019ajouter un lien cliquable. Je ne suis pas convaincue que c\u2019est l\u2019endroit le plus adapt\u00e9, \u00e0 voir si je trouve mieux.<\/p>\n

Si vous avez d\u2019autres sites pour compl\u00e9ter la liste, n\u2019h\u00e9sitez pas \u00e0 m\u2019en faire part dans les commentaires.<\/p>\n

D\u00e9mos et Framework d\u2019animation et transition CSS<\/h2>\n

Je pr\u00e9cise avant de vous mettre les liens, que ces Framework contiennent des animations plus ou moins utilisables sur un \u201cvrai\u201d projet, c\u2019est donc \u00e0 vous de faire le tris. Le but n\u2019est pas d\u2019ajouter une animation \u201cpour le fun\u201d mais bien qu\u2019elle ai une r\u00e9elle valeur ajout\u00e9e \u00e0 l\u2019exp\u00e9rience de vos utilisateurs. Inutile de vous repr\u00e9ciser encore une fois que d\u00e8s que l\u2019on parle d\u2019animations CSS3, il faut tenir compte de la compatibilit\u00e9 navigateur :)<\/p>\n

Animate.css<\/a>\"Animate.css\"<\/a><\/h3>\n

 <\/p>\n

Ce Framework CSS propose diff\u00e9rentes animations CSS3 class\u00e9es par cat\u00e9gories. Elles sont dans la d\u00e9mo appliqu\u00e9es sur un \u00e9l\u00e9ment qui ressemble \u00e0 un bouton, mais l\u2019on peut tr\u00e8s bien imaginer les appliquer ailleurs.<\/p>\n

Le petit plus : animate.css propose un \u201ccustom bluid\u201d<\/a> qui vous permet de ne r\u00e9cup\u00e9rer pour votre projet que les animations dont vous aurez besoin.<\/p>\n

Magic-css3-animations<\/a>
\n<\/a><\/h3>\n

\"CSS<\/p>\n

Ce Framework, inspir\u00e9e d\u2019ailleurs d\u2019animate.css propose lui aussi diff\u00e9rents effets d\u2019animation class\u00e9s par cat\u00e9gorie, certaines plus r\u00e9utilisables que d\u2019autres. Chaque animation peut-\u00eatre appliqu\u00e9e sur le petit \u00e9l\u00e9ment en cliquant sur le bouton.<\/p>\n

La r\u00e9cup\u00e9ration du code se fait via github. De base le Framework est \u00e0 utiliser avec jQuery, mais on peut facilement imaginer adapter le code pour des :hover en CSS par exemple ou d\u00e9clencher les animations en VanillaJS<\/p>\n

\u00a0ElementTransition.js<\/a>\"Element<\/a><\/h3>\n

 <\/p>\n

Bas\u00e9 sur l\u2019article \u201cPage Transitions\u201d<\/a> de Codrops, ElementTranstions a modifi\u00e9 ces transitions pour les appliquer sur diff\u00e9rents \u00e9l\u00e9ments HTML (pas uniquement des pages). L\u00e0 encore, m\u00eame si vous n\u2019allez sans doute pas forc\u00e9ment r\u00e9utiliser le code en l\u2019\u00e9tat, le site propose une grande galerie d\u2019animations et transitions possibles sur des blocs et \u00e9l\u00e9ments de design.<\/p>\n

Effeckt.CSS<\/a>\"Effeckt\"<\/a><\/h3>\n

Cette galerie rassemble l\u00e0 encore diff\u00e9rents \u00e9l\u00e9ments glan\u00e9s sur Codrops, CSS Tricks et d\u2019autres blogs renomm\u00e9s. Vous y trouverez entre autre des exemples d\u2019animation de modale, de boutons, d\u2019ajouts d\u2019\u00e9l\u00e9ments de liste et de listes d\u00e9roulantes, de survol d\u2019image ou encore de navigation hors champ (off-canvas).<\/p>\n

Cette galerie est en constante \u00e9volution et vous pouvez m\u00eame y proposer vos contributions. Le but ici n\u2019est clairement pas de proposer des \u00e9l\u00e9ments \u201cjolis\u201d (toutes les d\u00e9mos sont gris\u00e9es), mais de mettre l\u2019accent sur les animations et les transitions.<\/p>\n

CSS3 Animations Cheat Sheet<\/a><\/h3>\n

\"CSS3<\/a><\/p>\n

Celui-la vous\u00a0propose lui aussi une jolie petite galerie d\u2019effets d\u2019animations que vous pourrez tester sur une petite t\u00eate sympa. Les animations sont l\u00e0 aussi applicables en CSS3, mais ce Framework vous propose une option suppl\u00e9mentaire : avec une surcouche jQuery vous pourrez d\u00e9clencher les animations au moment o\u00f9 l\u2019utilisateur aura fait suffisamment d\u00e9fil\u00e9 la page pour qu\u2019elles apparaissent. Une petite d\u00e9monstration de l\u2019effet<\/a> est propos\u00e9e en ligne.<\/p>\n

Hover.css<\/a><\/h3>\n

\"https:\/\/ianlunn.github.io\/Hover\/\"<\/p>\n

Celui-ci est un repository git d\u00e9di\u00e9 uniquement aux animations et transitions au survol de boutons. \u00a0class\u00e9es par th\u00e9matiques (2D, arri\u00e8re plan, etc.)<\/p>\n

Et la liste continue…<\/h3>\n