5 étapes pour maîtriser l’animation Web

5 étapes pour maîtriser l’animation Web

6 novembre 2016 Non Par stephanie

La dessinatrice et la développeuse interactive,  Rachel Nabors nous montre comment se lancer dans l’animation Web.

C’est un époque excitante pour l’animation Web. Les designers de l’interface et les développeurs d’interaction de plus en plus compétent dans la gestion des multi-écrans, l’animation web doit venir dans les prochaines années  améliorer expériences utilisateur en ligne.

Mais par  où allez-vous commencer?  CSS, JavaScript ou flash?  Quels outils utiliser et comment vous faire un prototypes interactifs pour les développeurs?

Que vous soyez un illustrateur qui cherchent à prendre vos compétences en ligne ou un concepteur espoir de maîtriser un nouveau marché rentable, dessinateur primé et développeur d’interaction Rachel Nabors actions de précieux conseils pour débuter dans le monde passionnant de l’animation Web.

image001

  1. Mise en route

Le meilleur endroit pour commencer l’apprentissage animation web est http://codepen.io/. Ce site permet aux gens de jouer avec CSS, JavaScript et HTML, partagent leurs exemples, et de faire des copies de l’œuvre de chacun. Il est un excellent endroit pour trouver l’inspiration et percez au Code tout en apprenant.

Il est très important d’apprendre le CSS et le JavaScript. JavaScript est nécessaire pour l’animation de pointe avec l’animation API Web, Canvas, WebGL, GSAP. Je recommande de commencer avec le livre A book to turn a JavaScript library user into a JavaScript developer livres en Anglais.

  1. outils d’animation Web

Pour tous ceux qui veulent percer dans le dessin numérique, je recommande Manga Studio et un stylet Bamboo.  Je suis sûr qu’il y a d’autres produits mais cette combinaisons offre l’avantage d’être abordable pour s’offrir de belles lignes.

  1. Storytelling : la naration dans un site internet

Comme pour incorporer la narration sur le web, Je vous conseil de lire des  livres sur le cinéma, l’écriture, la caricature, de l’animation, des livres qui ont «histoire» dans leurs titres et les descriptions. Prenez un comme un passe-temps, et bientôt vous verrez qu’il forme une boucle de rétroaction avec votre travail plus technique.

  1. Prototypage

Les animateurs et les concepteurs Web UI je connais envoient leurs matériaux aux équipes de développement de petits films de la façon dont ils devraient regarder en action. Ils utilisent souvent les outils dont ils ont le plus à l’aise avec la conception de mouvement dans: After Effects et même flash!

Je l’ai rencontré d’autres équipes qui envoient motion précise et coordonne le calendrier pour les développeurs ainsi. Et d’autres faire une bonne quantité de prototypage interactif dans des outils comme Framer ou Bord Animate.

  1. Web API d’animation

L’animation significative exigera toujours une certaine quantité de JavaScript. Vraiment animation interactive nécessitera paraisons de celui-ci. Web Animations API va faire deux choses importantes: ouvrir le moteur de rendu du navigateur pour les navigateurs et les développeurs d’extensions pour construire de meilleurs outils dans le navigateur pour les animations de manipulation, et de donner aux développeurs de la bibliothèque d’animation accès à l’accélération matérielle actuellement disponible uniquement à l’animation de CSS. Prise en charge complète ne peut pas venir assez vite!