Download as PDF, PPTX
Uploaded bySalesforce Developers
Choreographed Animations with Salesforce's New Lightning Design System
The document discusses Salesforce's new Lightning Design System, focusing on the choreography of animations and user experience design, including principles, guidelines, and design tokens. It addresses forward-looking statements and potential risks associated with the development and delivery of new functionalities. The document emphasizes the importance of purposeful animation in guiding user workflows and the technical aspects of implementing these designs.
More Related Content
Similar to Choreographed Animations with Salesforce's New Lightning Design System
Choreographed Animations with Salesforce's New Lightning Design System
- 1. Choreographed Animations with Salesforce’sNew Lightning Design System Amy Lee UX Engineer Lead @amster Adam Doti Principal Product Designer @doti
- 2. Safe Harbor Safe harborstatement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
- 3.
- 4.
- 5. #designsystem UX Amy Lee UX EngineeringLead @amster Prototyping Supporting Engineering Design System Adam Doti Principal Product Designer @doti Designing UIs, assets Validating with Researchers Design System
- 6.
- 7. #designsystem engineers designers Code snippets CSSframework Design Tokens Vocabulary Icons, font Open source Design patterns Guidelines, principles Design Tokens Vocabulary Icons, font Color palettes Design Language
- 8. #designsystem engineers designers Code snippets CSSframework Design Tokens Vocabulary Icons, font Open source Design patterns Guidelines, principles Design Tokens Vocabulary Icons, font Color palettes Design Language
- 9. #designsystem Why motion &animation?
- 10.
- 11.
- 12.
- 13.
- 14. #designsystem Sharp (2°) Fovea centralis ContrastContrast 6.4 M 120 M120 M http://webvision.med.utah.edu/book/part-xiii-facts-and-figures-concerning-the-human-retina/
- 15. #designsystem Sharp (2°) Fovea centralis ContrastContrast MovementMovement Detail + Color
- 16.
- 17.
- 18. #designsystem lightningdesignsystem.com > Resources > DesignTokens Timing Design Tokens Named Programmatic Values
- 19. #designsystem lightningdesignsystem.com > Resources > DesignTokens Timing Design Tokens Named Programmatic Values
- 20. #designsystem .someDiv { top: 0; transition:top 0.4s linear; } .someDiv.on { top: 100px; } Sass Design Tokens Using the Sass CSS preprocessor
- 21. #designsystem Sass Design Tokens Usingthe Sass CSS preprocessor
- 22. #designsystem Sass Design Tokens Usingthe Sass CSS preprocessor
- 23. #designsystem Sass Design Tokens Usingthe Sass CSS preprocessor
- 24. #designsystem @import “design-tokens.scss”; .someDiv { top:0; transition: top $duration-slowly linear; } .someDiv.on { top: 100px; } Sass Design Tokens Using the Sass CSS preprocessor
- 25. #designsystem @import “design-tokens.scss”; .someDiv { top:0; transition: top $duration-quickly linear; } .someDiv.on { top: 100px; } Sass Design Tokens Using the Sass CSS preprocessor
- 26.
- 27. #designsystem Creating the TimingDesign Tokens 1.0s0s 2.0s 60 frames0 frames 120 frames 6 12 18 24 30 90 0.1s aligns on a frame boundary, 60 fps
- 28. #designsystem Creating the TimingDesign Tokens 1.0s0s 2.0s 30 frames0 frames 60 frames 3 6 9 12 15 45 0.1s aligns on a frame boundary, even for 30fps
- 29.
- 30. #designsystem — RACHEL NABORS,WEB ANIMATION ENGINEER Purposeful animation can be used to guide users through a workflow in the same way that good typography should underscore the hierarchy of information in a document.” “
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. #designsystem The sequence ofsteps and movements. “choreography”
- 41. #designsystem + Components onthe screen + Sequence of motion and animation + Specific CSS properties + Timing values from Design Tokens = Choreography
- 42.
- 43. #designsystem Motion Effects fade in fadeout color grow
- 44. #designsystem fade in -fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. #designsystem Chatter Choreography New postopening animation 1. User mouses onto the text field
- 54. #designsystem 1. User mousesonto the text field 2. User clicks Chatter Choreography New post opening animation
- 55. #designsystem 1. User mousesonto the text field 2. User clicks 3. Field expands down Chatter Choreography New post opening animation
- 56. #designsystem 1. User mousesonto the text field 2. User clicks 3. Field expands down 4. Share button’s color fades out Chatter Choreography New post opening animation
- 57. #designsystem 1. User mousesonto the text field 2. User clicks 3. Field expands down 4. Share button’s color fades out 5. To: and tools fade in Chatter Choreography New post opening animation
- 58. #designsystem 1. User mousesonto the text field 2. User clicks 3. Field expands down height 0.4s 4. Share button’s color fades out background color 0.5s, top 0.1s 5. To: and tools fade in opacity 0.4s Chatter Choreography New post opening animation
- 59. #designsystem 1. User mousesonto the text field 2. User clicks 3. Field expands down height 0.4s 4. Share button’s color fades out background color 0.5s, top 0.1s 5. To: and tools fade in opacity 0.4s Chatter Choreography New post opening animation
- 60. #designsystem 1. User mousesonto the text field 2. User clicks 3. Field expands down height 0.4s 4. Share button’s color fades out background color 0.5s, top 0.1s 5. To: and tools fade in opacity 0.4s 0.4s 0.4s+0.1s 0.1s 0.4s Chatter Choreography New post opening animation
- 61. #designsystem 1. User mousesonto the text field 2. User clicks 3. Field expands down height 0.4s 4. Share button fades to color background color 0.5s, top 0.1s 5. To: and tools fade in opacity 0.4s $duration-slowly $duration-slowly + $duration-quickly $duration-quickly $duration-slowly Design Tokens Chatter Choreography New post opening animation
- 62. #designsystem + Components onthe screen + Sequence of motion and animation + Specific CSS properties + Timing values from Design Tokens = Choreography Chatter Choreography New post opening animation
- 63.
- 64. #designsystem Lightning Design System DesignGuidelines CSS Framework Resources Tutorials & Documentation lightningdesignsystem.com/resources/downloads
- 65.
- 66.
- 67. #designsystem Design HQ Come tothe 2nd floor of Moscone West to chat with some of the world’s best designers, researchers, and UX engineers.
- 68. Share Your Feedback,and Win a GoPro! 3 Earn a GoPro prize entry for each completed survey Tap the bell to take a survey2Enroll in a session1
- 69. #designsystem Before you leave,get your Quest stamp!
- 70.