L'animation n'est plus seulement pour les dessins animés. Des images animées plein écran aux petits effets de survol, des touches d'animation apparaissent partout. L'animation est à la mode, amusante et conviviale.
Et les obstacles à l'utilisation de l'animation ont commencé à tomber. Les animations sont devenues des outils pratiques et utiles pour la conception Web.
Notions de base sur l'animation
L'animation se produit lorsque quelque chose de créé sous une forme immobile ou bidimensionnelle est «animé». et semble se déplacer d'une manière qui suit les lois de la physique. C'est la façon dont un personnage de bande dessinée traverse l'écran ou comment une icône d'application rebondit comme une balle lorsqu'elle se charge sur le bureau de votre Mac.
Un des mots presque synonyme d'animation est Disney. Au début des années 1980, deux des principaux animateurs de la société ont écrit un livre détaillant les 12 principes de l'animation. L'illusion de la vie: animation Disney? par Frank Thomas et Ollie Johnston fournit toujours le cadre pour l'animation aujourd'hui.
- Squash et stretch
- Anticipation
- Mise en scène
- Action directe et pose à poser
- Actions de suivi et de chevauchement
- Lent et lent
- Arc
- Action secondaire
- Timing
- Exagération
- Dessin solide
- Charme
Les animations Web sont souvent enregistrées au format GIF, CSS, SVG, WebGL ou vidéo. Il peut s'agir d'un simple soulignement qui apparaît lorsque vous survolez un mot avec une vidéo ou une image d'arrière-plan en plein écran. Comme avec toute autre technique de conception, les animations peuvent être subtiles ou peuvent être dans votre visage et difficiles à éviter.
Tendance émergente de 2017
L'animation dans la conception Web est quelque chose que nous commençons à voir chaque jour. La clé de l'animation en tant que tendance de conception est la modération. Les petites animations simples sont attrayantes et intéressantes; L'utilisateur peut même ne pas penser à être une animation. Les animations à grande échelle peuvent être un visuel intéressant qui vous attire dans la conception. Mais si vous commencez à mélanger trop d'effets différents, cela peut causer un chaos complet.
Ce qui rend l’animation à la mode, c’est le réalisme. Dans le paysage de la conception actuelle, avec de nombreuses conceptions de styles plats et minimaux, les utilisateurs ont besoin de plus d'indices pour leur dire quoi faire. Une simple animation peut guider l'utilisateur sans modifier l'esthétique. Cela aide à ajouter des instructions et un ordre pour concevoir des schémas qui peuvent être trop simples visuellement pour fournir assez de direction aux utilisateurs. Dans ce cas, l’animation crée un juste milieu entre simplicité simplifiée et facilité d’utilisation.
L’autre facteur qui contribue à cette tendance est l’accès aux outils situés à l’arrière et aux utilisateurs de la conception. Vous n'avez plus besoin de Flash pour des animations plus compliquées. (Et si vous construisez toujours dans Flash, il est temps d'arrêter.) Cela peut être accompli de différentes manières. Les animations actuelles ne gênent pas les sites Web ni les serveurs Web, ce qui accélère le chargement des effets pour les utilisateurs et les animations avec accès Internet haut débit évitent les blocages en cours d'événement.
Grandes et petites animations
En matière d’animation pour le Web, il s’agit de deux catégories également faciles à comprendre: grand et petit. (Vous pouvez probablement deviner à quoi ils ressemblent.)
Les grandes animations sont celles qui ont une échelle. Souvent sous la forme d'une vidéo avec une durée d'exécution, des animations à grande échelle remplissent une partie importante de l'écran et sont caractéristiques d'un court métrage. Ces animations servent de point focal dans la conception globale. Les utilisateurs n'ont souvent aucune action à effectuer pour voir l'animation en mouvement. Si vous regardez de près dans le Studio Meta site, chacune des grandes images s’agrandit au fur et à mesure que vous lisez la copie.
Les petites animations sont les petits morceaux que vous découvrez lorsque vous commencez à interagir avec un site Web. Ces divots peuvent prendre la forme d'états de survol, de minuscules éléments d'ornementation ou de guides ou d'outils d'utilisation. Les petites animations sont un accent qui contribue à l'esthétique générale, mais il est peu probable que ce soit au centre de la conception. Sur le site de Henry Brown, l'animation simple est que si vous regardez de plus près, les yeux de l'illustration clignotent réellement.
Quand utiliser l'animation
Le problème avec chaque tendance, y compris celle-ci, est de savoir quand l’utiliser. L’animation peut être un bon petit truc pour votre trousse d’outils de conception, mais pas pour tous les projets. L'animation doit être fluide et homogène, et non agitée ou mécanique. Il doit servir un objectif pour l'utilisateur et ne pas nuire au contenu.
La principale raison d'utiliser l'animation est d'augmenter la convivialité. Des animations simples peuvent constituer d'excellents outils de guidage pour aider les gens à comprendre sur quels boutons cliquer ou à quel endroit aller dans la carte d'un site Web. De nombreux concepteurs utilisant des effets de défilement complexes associent une animation simple à un outil utilisateur pour faire défiler ou cliquer. (Cela inclut tout, d'une simple icône qui rebondit ou des mots qui apparaissent et qui se prononcent? Faites défiler vers le bas.?)
La convivialité se présente sous quelques formes:
- Fonction de communication ou comment utiliser un site web
- Afficher les modifications, telles que remplir correctement un formulaire ou souligner qu'un élément est cliquable
- Créer un flux ou diriger les utilisateurs vers une incitation à l'action
La deuxième raison d'utiliser l'animation est esthétique. L'animation peut être une grande "décoration". Parfois, l'objectif d'un élément animé est purement visuel et constitue un usage acceptable. Cette animation décorative peut aider à raconter une histoire ou à créer un lien affectif entre l'interface et l'utilisateur. Une animation peut avoir pour objectif de susciter un intérêt visuel et de fidéliser un utilisateur avec votre site pendant une période plus longue.
Lorsque vous créez une animation purement visuelle, réfléchissez à ce qu’elle est supposée faire. Pensez à la connexion que vous souhaitez qu'un utilisateur ait.Est-ce censé être amusant ou surprenant? Est-ce un peu de contenu unique conçu pour le partage? Même un pur visuel devrait avoir un objectif.
Ressources
Prêt à commencer à animer? Voici quelques ressources pour des lectures complémentaires et des outils pour vous aider à démarrer.
- La vidéo Illusion of Life présente chacun des 12 principes de manière simple à comprendre.
- ? Animation Web au travail? from A List Apart est une excellente ressource sur ce qui fait fonctionner une animation.
- L'initiation du débutant à l'animation CSS vous montre comment transformer un carré en cercle à l'aide des propriétés CSS.
- Elastic SVG animated elements est un didacticiel expliquant comment intégrer et animer un composant SVG.
- La présentation de Mark Geyer intitulée Art of UI Animations utilise l'animation pour expliquer les concepts.
- 15 principaux outils HTML5 pour créer une animation avancée avec? est une excellente étape suivante et une liste d’outils si vous comprenez déjà les bases.
- La trousse de survie de l'animateur enseigne les principes de base qui s'appliquent à toutes les formes d'animation.
Conclusion
En matière d'animation, la règle générale est la suivante: une bonne animation améliorera l'expérience de l'utilisateur. Cela peut prendre la forme d'un lien affectif - tel qu'une expérience amusante et positive - ou en rendant un site plus facile à utiliser.
L'animation est une technique amusante qui est devenue beaucoup plus standard pour une variété d'applications. Si vous recherchez de l'inspiration, assurez-vous de consulter cet article et de cliquer sur les liens pointant vers les exemples visuels tout au long de votre visite, de visiter les sites et de jouer avec les éléments animés qui y figurent. S'amuser!