Le retour du GIF animé et bien plus encore : le motion design

AMBIENT INTELLIGENCE
tech days•
2015
#mstechdays techdays.microsoft.fr

Motion of steel
Le retour du GIF animé et bien plus
encore : le motion design
Loïs Gaudebert / Axel Nemeth
www.ai3.fr

tech.days 2015#mstechdays
LES INTERVENANTS
Le retour du GIF animé et bien plus encore : le motion design
LE « DEV » LOÏS GAUDEBERT
Resp. solution .net Ai3 Sud-Ouest
www.ai3.fr
LE « DESIGNER » AXEL NEMETH
Consultant UI/UX Ai3 Sud-Ouest
@AxelNemeth
www.ai3.fr
Ai3
Paris
Toulouse
Aix
Nantes

tech.days 2015#mstechdaysMotion of steel – Le retour du GIF animé et bien plus encore

tech.days 2015#mstechdaysLe retour du GIF animé et bien plus encore : le motion design
Splash
Bon ben c’est un splash

Home
Dashboard
Intervention
A faire
Point
Planning
Et…
Chat

Interventions
Le tinder des
interventions

Planning
C’est dans le nom

Notif
Pour les interventions
urgentes

L’ORDRE DU JOUR
LE MOTION?
#01
LES 12 REGLES DEMICKEY
#02
LES BONNESPRATIQUES
#03

01-L’animation depuis la nuit des temps
???
1978
MOTIONDESIGN(MOTIONGRAPHICS DESIGN)
L’art de donner vie à des éléments
statiques en utilisant l’animation
Contrôles interactifsPONG

1987 Animation simple d’éléments dans l’UIGIF
1989 Eléments d’UI interactifsJAVASCRIPT
1993 Moteur d’animationFLASH

1995 Page web interactiveJavaScript
1999 Application web interactiveAjax
2006 Fabrication d’UIWPF

2008 Animation web nativeHTML5+CSS3
2015 Interaction via les gestes, interfaces
« naturelles »….Kinect,leapmotion

L’ORDRE DU JOUR
L’ANIMATION ?
#01
LES 12 REGLES DEMICKEY
#02
LES BONNESPRATIQUES
#03

SQUASH & STRETCH
n°1
Aucun objet n’est indéformable, simule
le poids et le volume
02-LES 12 REGLES DE MICKEY

ANTICIPATION
n°2
Préparation d’un objet à faire un
mouvement

STAGING
n° 3
Mise en avant de l’élément principal

STRAIGHT AHEAD AND POSETO POSE
n° 4
Instants clefs ou bien action en continu

FOLLOW TRHOUGH & OVERLAPPING
n° 5
Les différentes parties d’un objet
bougent indépendamment

SLOW IN SLOW OUT
n° 6
L’accélération c’est important

ARCS
n° 7
Un déplacement se fait selon un
mouvement courbe

SECONDARYACTIONS
n° 8
Une animation secondaire met en avant
la principale

TIMING
n° 9
Un objet doit sembler obéir aux lois de
la physique

EXAGERATION
n° 10
Présenter la réalité plus « sauvage » et
« extrême »

SOLID DRAWING
n° 11
Les animations se font dans un monde
en 3D

APPEAL
n° 12
Le charisme !!!

ACTION UTILISATEUR
Action Transition
03-LES BONNES PRATIQUES

SANS ACTION
Chargement Focus visuel/FeedbackNotification (intrusive)

Une balance doit être trouvée entre ces trois paramètres
DUREE
IMPACT SUR L’EXPERIENCEUTILISATEUR
QUANTITE PRESENCE+ +
=

DUREE QUANTITE PRESENCE+ +
+
EASING
FUNCTIONS: DEMO

EASING FUNCTIONS

LE FLUX DE PROD : COMPLET
Brainstorm
échange
Concept
After
Effects
PrototypesCorrections
Proto final
Motion to
code
Validation
technique
Impossible
Dév
CCU

LE FLUX DE PROD : PRAGMATIQUE
Brainstorm
échange
Concept
GIF Animés
sur base
des écrans
Validation
technique
Corrections
Dév
Motion of steel – Le retour du GIF animé et bien plus encore
CCU

LE FLUX DE PROD : BASIQUE
Brainstorm
échange
Concept Dév
Validation
anims
Corrections
CCU

Une animation est liée à des mouvements que l’on connait dans notre
monde > apporte plus de signification à l’expérience
R U D E S
REELLE

Une animation est liée à des mouvements que l’on connait dans notre
monde > apporte plus de signification à l’expérience
REELLE

Une animation pour un type d’usage ou d’interaction > cela facilite la
compréhension de l’application
R U D E S
UNIQUE

Une animation pour un type d’usage ou d’interaction > cela facilite la
compréhension de l’application
UNIQUE

Une animation est un vecteur différenciant pour votre application >
trouvez un gimmick à répéter
R U D E S
DIFFERENCIANTE

Une animation est un vecteur différenciant pour votre application >
trouvez un gimmick à répéter
DIFFERENCIANTE

Une animation vient améliorer un usage pas le supplanter > ne créez des
animations que si nécessaire
R U D E S
EFFICACE

Une animation vient améliorer un usage pas le supplanter > ne créez des
animations que si nécessaire
EFFICACE

Une animation doit rester simple et courte > le contraire donnerait trop
d’importance à l’anim et pas assez à ce que vous voulez mettre en avant
R U D E S
SIMPLE

Une animation doit rester simple et courte > le contraire donnerait trop
d’importance à l’anim et pas assez à ce que vous voulez mettre en avant
SIMPLE

Loïs Gaudebert : lois.gaudebert@ai3.fr
Axel Nemeth : @AxelNemeth, axel.nemeth@ai3.fr

Le retour du GIF animé et bien plus encore : le motion design

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Le retour du GIF animé et bien plus encore : le motion design

Semelhante a Le retour du GIF animé et bien plus encore : le motion design (20)

Mais de Microsoft

Mais de Microsoft (20)

Le retour du GIF animé et bien plus encore : le motion design