Brutal design, Interfaces vocales, Inclusive design ou encore Broken Layouts sont autant d’indicateurs de tendances qui se retrouvent aujourd’hui au coeur des projets de webdesign et UX/UI.

Qu’ils soient déployés à plus ou moins grande échelle, dans des cas concrets ou non (portfolios, proof of concept, redesign..), ces mouvements graphiques s’inscrivent désormais et de manière plus ou moins durable, dans les usages et habitudes du côté des internautes (particuliers, marques, annonceurs).

Mis à jour le 23 mai 2019 à 6:11

Cet article est un article invité rédigé par Fatiha Elmouktafi (@Fatihae sur les internets). Digital Creative & Chef de projet numérique, je décortique les innovations web et les interfaces de demain. Webdesigner à la retraite, mais je me soigne . #UX/UIMELANCOLIE. . Vous aussi, prenez la parole sur le Blog Du Wedesign.

Comme leurs prédécesseurs, ces nouveaux paradigmes redéfinissent alors les rapports entre concepteurs et consommateurs d’interfaces.

Gagnez du temps dans vos créations graphiques !

+ 1,6 millions de ressources (photos, mockups, themes Wordpress etc.) premium à votre disposition pour livrer plus rapidement.

D’une année sur l’autre, on challenge l’aptitude des webdesigners à innover tout en optimisant le niveau attendu par tous, en terme d’utilisabilité, de compatibilité entre les différents supports (desktop, mobile..), mais aussi de résultats visuels et de techniques.

C’est d’ailleurs autour de ce besoin d’interaction que s’est consolidée la tendance favorisant les micros-animations dans les pages d’un site et ses contenus ou d’une application. Mais en partie seulement, étant donné que l’explosion des usages et temps passés sur mobile par les internautes a considérablement ouvert la voie à l’animation, via la logique du mobile first, créant des très nombreuses possibilités, de points et types d’interactions.

Focus sur l’une de ces tendances, peut-être la plus exploitée en Webdesign pour l’année en cours : les micro-animations.

Insuffler un mouvement naturel à l’interface

Aérer le regard et la navigation puis dynamiser la structure d’une page. Ou pour simplement appuyer les apparitions des différents blocs et sections de contenus : c’est l’un des aspects clefs des micro animations.

Rydoo

Par Barthelemy Chalvet 

Landing page de UI Motion Kit

Par Jakub Antalík 

Landing Page

Par Volha Douban

Je me domicile

Par Barthelemy Chalvet

Screen Transition

Par Anthony Maneschijn

Guider l’utilisateur, accompagner une action

Donner des informations complémentaires sur l’action en cours ou à réaliser puis accompagner l’internaute dans sa navigation.

Ce type d’animation est très utile pour s’assurer la compréhension d’un ou plusieurs écrans clefs et guider les internautes au sein d’un parcours utilisateur spécifique (Création d’un compte utilisateur, Fiches produits interactives, Funnel..).

Micro-animations et transition

Par Nathan 

Dashboard Micro Interactions

IKEA Online Experience Concep

Par Pawel Kontek

Feed micro-animation

Par Andrei Ponivesc

One Hour UI Challenge

Par Krenskiy Dmitriy

Toolbar animation

Par Cuberto

Pour donner du corps au contenu et illustrer l’expérience

Appuyer le propos, apporter de la profondeur au contenu et une expérience de lecture plus agréable, plus efficace.

Les animations au coeur des pages de textes et même au sein des illustrations permettent de multiplier les points de contact visuels et de créer un lien entre les zones ou données que va concrètement lire l’internaute et celles qu’il va survoler ou deviner. Elles renforcent la compréhension de l’ensemble du sujet et laissent une trace plus durable dans les mémoires.

Qonto

Par Barthelemy Chalvet

Express Explorer

Par Cosmin Capitanu

Billion Delivery

Par Taras Migulko

Always data

Par Barthelemy Chalvet