Une introduction à l'animation dans la conception Web
L'animation n'est plus réservée aux 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. Avec la plupart des utilisateurs sur des connexions à haute vitesse et la facilité de créer quoi que ce soit, de simples mouvements ou un gif stupide à plusieurs minutes d'action, les animations sont devenues des outils de conception Web pratiques et utiles.
Explorez Envato Elements
Bases de l'animation
L'animation se produit lorsque quelque chose créé sous forme immobile ou bidimensionnelle est «amené à la vie» 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 dessin animé parcourt l'écran ou comment une icône d'application rebondit comme une balle pendant qu'elle se charge sur le bureau de votre Mac.
Disney est l'un des mots presque synonymes d'animation. Au début des années 80, deux des meilleurs animateurs de l'entreprise ont écrit un livre détaillant les 12 principes de l'animation. «L'illusion de la vie: animation Disney» de Frank Thomas et Ollie Johnston fournit encore aujourd'hui le cadre de l'animation.
- Squash et stretch
- Anticipation
- Mise en scène
- Action en ligne droite et Pose to Pose
- Action de suivi et de chevauchement
- Ralentir et ralentir
- Arc
- Action secondaire
- Horaire
- 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 à une vidéo en plein écran ou une image d'arrière-plan. Comme avec toute autre technique de conception, les animations peuvent être subtiles ou peuvent être en face et difficiles à éviter.
Tendance émergente de 2017
L'animation dans la conception web est quelque chose que nous commençons à faire tous les jours. La clé de l'animation comme tendance de conception est la modération. Les petites animations simples sont attrayantes et intéressantes; l'utilisateur pourrait même ne pas penser du tout à être une animation. Les animations à grande échelle peuvent être un visuel intéressant qui vous entraîne dans la conception. Mais si vous commencez à mélanger trop d'effets mobiles différents, cela peut provoquer un chaos complet.
Ce qui rend l'animation à la mode, c'est le réalisme. Dans le paysage du design d'aujourd'hui avec autant de designs de style plats et minimaux, les utilisateurs ont besoin de plus d'indices pour leur dire quoi faire. De simples morceaux d'animation peuvent guider l'utilisateur sans changer l'esthétique. Il permet d'ajouter des instructions et de l'ordre aux schémas de conception qui peuvent être trop simples visuellement pour fournir suffisamment de directives aux utilisateurs. Dans ce cas, l'animation crée un juste milieu entre simplicité simplifiée et facilité d'utilisation.
L'autre facteur contribuant à cette tendance est l'accès aux outils à 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 de s'arrêter.) Cela peut être accompli de plusieurs autres manières. Les animations d'aujourd'hui ne gênent pas les sites Web ou les serveurs Web, ce qui rend les effets rapides à charger pour les utilisateurs et, avec des animations d'accès Internet à haut débit, ne sautez pas de rester coincé au milieu du cycle de l'événement.
Grandes et petites animations
Lorsqu'il s'agit d'animer pour le Web, il se divise en deux catégories tout aussi faciles à comprendre: les grandes et les petites. (Vous pouvez probablement deviner à quoi cela ressemble.)
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 occupent 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. Souvent, les utilisateurs ne doivent effectuer aucune action pour voir l'animation en mouvement. Si vous regardez attentivement dans le site Studio Meta, chacune des grandes images zoome lorsque 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 stationnaires, de minuscules morceaux d'ornementation ou de guides ou d'outils d'utilisation. Les petites animations sont un accent qui contribuent à l'esthétique globale, mais ne sont probablement pas au centre de la conception. Dans le site d'Henry Brown, l'animation simple est que si vous regardez de près, les yeux de l'illustration clignotent.
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 excellent petit truc pour votre trousse d'outils de conception, mais pas pour chaque projet. L'animation doit être fluide et transparente, pas nerveuse ou mécanique. Il doit servir un objectif pour l'utilisateur et ne pas entraver le contenu.
La principale raison d'utiliser l'animation est d'augmenter la convivialité. Les animations simples peuvent être d'excellents outils de guidage pour aider les gens à comprendre sur quels boutons cliquer ou où aller ensuite sur 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 comprend tout, depuis une simple icône de rebond ou des mots qui apparaissent et disent «faites défiler vers le bas».)
La convivialité se présente sous plusieurs formes:
- Fonction de communication ou comment utiliser un site Web
- Afficher les modifications, comme remplir correctement un formulaire ou souligner qu'un élément est cliquable
- Créez un flux ou dirigez les utilisateurs vers une incitation à l'action
La deuxième raison d'utiliser l'animation est d'ordre esthétique. L'animation peut être une excellente «décoration». Parfois, l'objectif d'un élément animé est purement visuel et c'est une utilisation acceptable. Cette animation décorative peut aider à raconter une histoire ou à créer un lien émotionnel entre l'interface et l'utilisateur. Le but d'une animation peut être de susciter un intérêt visuel et de maintenir un utilisateur engagé avec votre site pendant une période plus longue.
Lors de la création d'une animation purement visuelle, considérez ce qu'elle est censé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 être partagé? Même un visuel pur devrait avoir un objectif.
Ressources
Prêt à commencer l'animation? Voici quelques ressources pour une lecture plus approfondie et des outils pour vous aider à démarrer.
- La vidéo Illusion of Life montre chacun des 12 principes d'une manière facile à comprendre.
- «L'animation Web au travail» de A List Apart est une excellente ressource sur ce qui fait que l'animation fonctionne.
- L '«Introduction du débutant à l'animation CSS» vous montre comment transformer un carré en cercle à l'aide des propriétés CSS.
- Éléments SVG animés élastiques est un tutoriel sur la façon d'intégrer et d'animer un composant SVG.
- La présentation Art of UI Animations de Mark Geyer utilise l'animation pour expliquer les concepts.
- «Les 15 meilleurs outils HTML5 avec lesquels créer une animation avancée» est une excellente étape de niveau supérieur et une liste d'outils si vous connaissez déjà les bases.
- Le kit 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'une connexion émotionnelle - telle qu'une expérience amusante et positive - ou en facilitant l'utilisation d'un site.
L'animation est une technique amusante qui est devenue beaucoup plus standard pour une variété d'applications. Si vous cherchez de l'inspiration, assurez-vous de parcourir cet article et de cliquer sur les liens vers les exemples visuels tout au long, visitez les sites et jouez avec les fonctionnalités animées qui s'y trouvent. S'amuser!
