Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
  motion IN DESIGN SYSTEMS 
AUGUST 3. 2019
@BENNOLOEWENBERG
  �IKE SOUN� …  
Source: Google
Source: Google
@BennoLoewenberg
therefore often not part of a Design System
  … G�NE WHEN DON�  
Alps, Alta, Anatomy,	
Archipelago, Argon, Apex, Aurora, 	
Axiom,
Backpack, Base, Binary, Bloom,
Blueprint,
Boundless, Buil...
@BennoLoewenberg
+ Design debt reduction (cohesive brand & UX)
+ More focus on UX & specialties (no redundancies)
+ Speedi...
@BennoLoewenberg
+ Express the brand
+ Inform and guide the user
  �URPOSE & US� 
Source: Caleb Barclay
Visual Modularity
Animation Modularity
@BennoLoewenberg
  C�TCHING 
		   THE HAS�Y 
+ Timing curves
+ Usage types (brand, UX)
+ Choreography patterns (objects & interplay)
+ Effects (size, visibility)
+ Flo...
  �NIMATION �UDI� 
Source: Alla Kholmatova
  �NIMATION �UDI� 
Source: Alla Kholmatova
  �NIMATION �UDI� 
Source: Caleb Barclay
@BennoLoewenberg
  �EFINING 
		  THE TRANSIEN� 
@BennoLoewenberg
Expressing brand values and brand personality
with meaningful motion …
  �RAND TO EXPERIENC� 
Source: Google »Material«
Source: IBM »Carbon«
Source: Salesforce »Lightning«
  ASP�CTS 
Source: FutureLearn
  A��LICATIONS 
Source: Alla Kholmatova
@BennoLoewenberg
  �UILDING 
  THE NONPERMANEN� 
@BennoLoewenberg
+ Animation durations
+ Easing values
+ Named effects
+ Choreography & rhythm
  �UILDING B�OCKS 
modifiers
duration
easing
applicable to
Source: Caleb Barclay (commented)
Motion Scale
Typopgrafic Scale
Source: Caleb Barclay
Source: Caleb Barclay
Source: Puralsight
Source: Salesforce »Lightning«
@BennoLoewenberg
 SPE��ING 
  THE GLIMPS� 
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
Source: Caleb Barclay (commented)
Key stages
Easings
Choreography
Source: Caleb Barclay (commented)
Tech spec
Motion comp
(or interactive
click dummy)
@BennoLoewenber using Hype
( Live demo )
@BennoLoewenberg
 STATICS 
  FOR ANIMATIO� 
( Live paper prototyping session )
  S�RY→BOAR� 
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
@BennoLoewenberg
 MOMENTUM 
  FOR M�TION 
Source: Google »Material«
 WH�T 
Source: Google »Material«
  �OW 
“ A combination of both motion principles
and implementable examples provides
the most effective combination
for teams bui...
  @�ENNO�OEWENBERG 
 LINKEDIN / XING / TWI�ER
http://
Talks & Workshops
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
What to Upload to SlideShare
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

Partager

Motion in Design Systems (english) #UXcampHH

Télécharger pour lire hors ligne

Motion is a key part pf UX and brand: animation supports the product UX and expression of the brand personality.

Due to it's intagible nature, too often motion becomes an afterthought and therefore neglected in design (systems), despite it's fundamental nature.

This tangible talk shows what good UI animation consists of and how to successfully implement motion into a design system.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Livres audio associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à aimer ceci

Motion in Design Systems (english) #UXcampHH

  1. 1.   motion IN DESIGN SYSTEMS  AUGUST 3. 2019 @BENNOLOEWENBERG
  2. 2.   �IKE SOUN� …   Source: Google
  3. 3. Source: Google
  4. 4. @BennoLoewenberg therefore often not part of a Design System   … G�NE WHEN DON�  
  5. 5. Alps, Alta, Anatomy, Archipelago, Argon, Apex, Aurora, Axiom, Backpack, Base, Binary, Bloom, Blueprint, Boundless, Build, Bouy, Bolt, Canvas, Carbon, Cedar, Chameleon, Chrome, Cirrus, Clarity, Clay, Comet, Connect, Cosmos, DressCode, Eos, Evergreen, Fabric, Feather, Feelix, Fiori, Fishtank, Fleet, Float, Fluent, Foundation, Forma, Frontier, Fuse, Fusion, Garden, Gel, Gestalt, Glu, Glue, Gravity, Grommet, Harmony, Hedwig, Helix, Honeycomb, Horizon, Indigo, Janus, Keirin, Kotti, Latitude, Lexicon, Lightning, Liquid, Luci, Luna, Material, Mayflower, Miui, Mind, Mineral, Mixtape, Momentum, Mosaic, Nachos, Nicollet, Northstar, Nova, One, Oneui, Opattern, Orbit, Origami, Otkit, Oxide, Patternfly, Photon, Plasma, Polaris, Precise, Predix, Primer, Protocol, Purple, Quik, Ratio, Recess, Ring, Rizzo, Sandcastle, Saphir, Scooter, Seeds, Skin, ShowCar, Snacks, Solar, Solid, SolidWork, Spark, Spectrum, tarling, Stitch, Swarm, ThingWorx, Thumbprint, nison, Unity, Ustyle, Vanilla, derblocks@BennoLoewenberg   DESIGN SYSTEMS 
  6. 6. @BennoLoewenberg + Design debt reduction (cohesive brand & UX) + More focus on UX & specialties (no redundancies) + Speeding up the processes (design, handover, code) + Increasing business value (maintainability, scalability)   GOA�S 
  7. 7. @BennoLoewenberg + Express the brand + Inform and guide the user   �URPOSE & US� 
  8. 8. Source: Caleb Barclay Visual Modularity Animation Modularity
  9. 9. @BennoLoewenberg   C�TCHING    THE HAS�Y 
  10. 10. + Timing curves + Usage types (brand, UX) + Choreography patterns (objects & interplay) + Effects (size, visibility) + Flows where motion is missing or too heavy   WHAT TO L�K FOR  @BennoLoewenberg
  11. 11.   �NIMATION �UDI�  Source: Alla Kholmatova
  12. 12.   �NIMATION �UDI�  Source: Alla Kholmatova
  13. 13.   �NIMATION �UDI�  Source: Caleb Barclay
  14. 14. @BennoLoewenberg   �EFINING   THE TRANSIEN� 
  15. 15. @BennoLoewenberg Expressing brand values and brand personality with meaningful motion …   �RAND TO EXPERIENC� 
  16. 16. Source: Google »Material«
  17. 17. Source: IBM »Carbon«
  18. 18. Source: Salesforce »Lightning«   ASP�CTS 
  19. 19. Source: FutureLearn   A��LICATIONS 
  20. 20. Source: Alla Kholmatova
  21. 21. @BennoLoewenberg   �UILDING    THE NONPERMANEN� 
  22. 22. @BennoLoewenberg + Animation durations + Easing values + Named effects + Choreography & rhythm   �UILDING B�OCKS 
  23. 23. modifiers duration easing applicable to Source: Caleb Barclay (commented)
  24. 24. Motion Scale Typopgrafic Scale Source: Caleb Barclay
  25. 25. Source: Caleb Barclay
  26. 26. Source: Puralsight
  27. 27. Source: Salesforce »Lightning«
  28. 28. @BennoLoewenberg  SPE��ING    THE GLIMPS� 
  29. 29. @BennoLoewenberg
  30. 30. @BennoLoewenberg
  31. 31. @BennoLoewenberg
  32. 32. @BennoLoewenberg
  33. 33. Source: Caleb Barclay (commented) Key stages Easings Choreography
  34. 34. Source: Caleb Barclay (commented) Tech spec Motion comp (or interactive click dummy)
  35. 35. @BennoLoewenber using Hype ( Live demo )
  36. 36. @BennoLoewenberg  STATICS    FOR ANIMATIO�  ( Live paper prototyping session )
  37. 37.   S�RY→BOAR�  @BennoLoewenberg
  38. 38. @BennoLoewenberg
  39. 39. @BennoLoewenberg
  40. 40. @BennoLoewenberg
  41. 41. @BennoLoewenberg
  42. 42. @BennoLoewenberg
  43. 43. @BennoLoewenberg  MOMENTUM    FOR M�TION 
  44. 44. Source: Google »Material«  WH�T 
  45. 45. Source: Google »Material«   �OW 
  46. 46. “ A combination of both motion principles and implementable examples provides the most effective combination for teams building internal design systems.” Source: Bryan Zavestoski
  47. 47.   @�ENNO�OEWENBERG   LINKEDIN / XING / TWI�ER
  48. 48. http:// Talks & Workshops

Motion is a key part pf UX and brand: animation supports the product UX and expression of the brand personality. Due to it's intagible nature, too often motion becomes an afterthought and therefore neglected in design (systems), despite it's fundamental nature. This tangible talk shows what good UI animation consists of and how to successfully implement motion into a design system.

Vues

Nombre de vues

88

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

0

Actions

Téléchargements

3

Partages

0

Commentaires

0

Mentions J'aime

0

×