Futur of Web design London 2015

par Michèle Vos le 1 juin 2015

Les 27, 28 et 29 avril, l’équipe des joyeux formateurs web du Cepegra est partie Outre-Manche pour explorer le futur du web design et vous rapporter le fruit de ses découvertes. Trois jours de workshops et de conférences captivantes, de rencontres enrichissantes uniquement dans la langue de Shakespeare et du Web (l’occasion de parfaire son accent ). Thème récurrent de l’année : le designer doit coder!

Futur of web design london 2015

Think like a motion designer

Le lundi 27 était consacré à 4 workshops que nous nous sommes partagés. Pour chacun, une quarantaine de participants venant de tous les pays, motivés par l’envie d’enrichir leurs compétences de web designer. Parmi ces workshops parfois très techniques, j’avais choisi de me plonger dans l’animation avec la dynamique Val Head ( Philadelphie – valhead.com), web designer et auteur de nombreux articles, livres et tutoriels, que j’avais eu la chance de voir à Multimania (Kortrijk) l’année passée.

En tant que designers, notre métier a fort évolué. Plus question de produire des images statiques d’interfaces et laisser l’intégrateur faire le reste.
Les interfaces que nous concevons doivent évidemment s’adapter aux multiples écrans mais aussi inclure des effets permettant d’améliorer l’expérience de l’utilisateur.

Leur capacité à communiquer est maintenant considérablement augmentée par la dimension du temps. Pas question ici d’utiliser l’animation de manière gratuite comme souvent à l’époque de Flash ou des transitions parallaxes prêtes à vous rendre malade. L’animation est utilisée de manière subtile pour améliorer les interactions de l’utilisateur avec vos interfaces, rendre les actions plus compréhensibles, et l’expérience plus agréable. Un formulaire qui apparaît ou s’étend
de manière fluide, une action enregistrée qui vous fait clairement comprendre que la validation est en cours… tout est une question de juste moment et de style.

L’évolution des CSS nous a ouvert de très nombreuses possibilités d’animation mais, en tant que designer, nous n’avons pas toujours les bases nécessaires en « motion design » pour rendre avec précision l’effet désiré. Les concepts du « material design » demandent de pénétrer dans la dimension du temps et de la profondeur (3D). google.com/design/spec/what-is-material/environment.html

En matière d’animation, la référence reste toujours l’ouvrage « The Illusion of life » des animateurs de Disney et, surtout, les 12 principes qui en sont tirés, posant les bases de l’animation. Accélération, anticipation, décélération, compression, étirement…

Illusion of Life

vimeo.com/93206523

Le juste timing permet de créer des ambiances, de donner l’illusion que vos animations obéissent aux lois de la physique. Les délais, accélérations, ralentissements, actions secondaires… même appliqués à des petits éléments de votre interface aident à les rendre plus simples et agréables à utiliser parce qu’elle parle aux émotions des utilisateurs.

Les propriétés d’animation CSS : timing-function, duration, delay et leurs attributs : reverse, steps, ease-in-out, cubic-bezier plus une petite pincée de JavaScript et parfois, une touche de SVG seront nos outils pour y arriver. Le web designer se doit de les connaître et les mettre en œuvre. Il lui faut aussi apprendre à les utiliser à propos. Ces compétences font partie intégrante de la démarche UX du designer d’interface.

Commentaires fermés sur Futur of Web design London 2015

Partager >