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

AMBIENT INTELLIGENCE

tech days•

2015

#mstechdays techdays.microsoft.fr

Motion of steelLe 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 GAUDEBERTResp. solution .net Ai3 Sud-Ouest

www.ai3.fr

LE « DESIGNER » AXEL NEMETHConsultant 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


HomeDashboard

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 DE MICKEY

#02

LES BONNES PRATIQUES

#03


01-L’animation depuis la nuit des temps

???

1978

MOTION DESIGN (MOTION GRAPHICS 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


#02


#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 POSE TO 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



SECONDARY ACTIONS

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 !!!



L’ORDRE DU JOUR


L’ANIMATION ?

#01


#02


#03


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’EXPERIENCE UTILISATEUR

QUANTITE PRESENCE+ +

=




DUREE QUANTITE PRESENCE+ +

+

EASING FUNCTIONS: DEMO





EASING FUNCTIONS



LE FLUX DE PROD : COMPLET

Brainstorm

échangeConcept

After

Effects

PrototypesCorrections

Proto final

Motion to

code

Validation

technique

Impossible

Dév


CCU



LE FLUX DE PROD : PRAGMATIQUE

Brainstorm

échangeConcept

GIF Animés

sur base

des écrans

Validation

techniqueCorrections

Dév

Motion of steel – Le retour du GIF animé et bien plus encore

CCU



LE FLUX DE PROD : BASIQUE

Brainstorm

échangeConcept Dév

Validation

animsCorrections


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 : [email protected] Nemeth : @AxelNemeth, [email protected]

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

Technology

motion design interventions

motion design lanimation

motion design splash

motion design notif

motion design staging

ambient intelligence

motion design planning

motion design straight