Choreographed Animations with Salesforce's New Lightning Design System
-
Upload
salesforce-developers -
Category
Technology
-
view
705 -
download
2
Transcript of Choreographed Animations with Salesforce's New Lightning Design System
Choreographed Animations with Salesforce’s New Lightning Design System
Amy LeeUX Engineer Lead@amster
Adam DotiPrincipal Product Designer@doti
Safe HarborSafe harbor statement 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.
#designsystem
user experience
#designsystem
engineers designers
researchers
UX
#designsystem
UXAmy LeeUX Engineering Lead@amster
PrototypingSupporting EngineeringDesign System
Adam DotiPrincipal Product Designer
@doti
Designing UIs, assetsValidating with Researchers
Design System
#designsystem
#designsystem
engineers designers
Code snippets
CSS framework
Design Tokens
Vocabulary
Icons, font
Open source
Design patterns
Guidelines, principles
Design Tokens
Vocabulary
Icons, font
Color palettesDesign Language
#designsystem
engineers designers
Code snippets
CSS framework
Design Tokens
Vocabulary
Icons, font
Open source
Design patterns
Guidelines, principles
Design Tokens
Vocabulary
Icons, font
Color palettesDesign Language
#designsystem
Why motion & animation?
#designsystem https://en.wikipedia.org/wiki/Fovea_centralis#/media/File:Schematic_diagram_of_the_human_eye_en.svg
#designsystem
#designsystem
#designsystem
Sharp (2°)Fovea centralis
6.4 M
#designsystem
Sharp (2°)Fovea centralis
Contrast Contrast
6.4 M 120 M120 Mhttp://webvision.med.utah.edu/book/part-xiii-facts-and-figures-concerning-the-human-retina/
#designsystem
Sharp (2°)Fovea centralis
Contrast Contrast
MovementMovementDetail
+Color
#designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion
#designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion
#designsystem
lightningdesignsystem.com
> Resources
> Design Tokens
Timing Design TokensNamed Programmatic Values
#designsystem
lightningdesignsystem.com
> Resources
> Design Tokens
Timing Design TokensNamed Programmatic Values
#designsystem
.someDiv { top: 0; transition: top 0.4s linear;}.someDiv.on { top: 100px; }
Sass Design TokensUsing the Sass CSS preprocessor
#designsystem
Sass Design TokensUsing the Sass CSS preprocessor
#designsystem
Sass Design TokensUsing the Sass CSS preprocessor
#designsystem
Sass Design TokensUsing the Sass CSS preprocessor
#designsystem
@import “design-tokens.scss”;
.someDiv { top: 0; transition: top $duration-slowly linear;}.someDiv.on { top: 100px; }
Sass Design TokensUsing the Sass CSS preprocessor
#designsystem
@import “design-tokens.scss”;
.someDiv { top: 0; transition: top $duration-quickly linear;}.someDiv.on { top: 100px; }
Sass Design TokensUsing the Sass CSS preprocessor
#designsystem
$duration-instantly
0s
$duration-slowly
0.4s
$duration-quickly
0.1s
$duration-promptly
0.2s
Sass Design TokensUsing the Sass CSS preprocessor
#designsystem
Creating the Timing Design 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
#designsystem
Creating the Timing Design 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
#designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion
#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.”
“
#designsystem
Entrance & Exit
#designsystem
Entrance & Exit
PROTOTYPE
#designsystem
Emphasis
#designsystem
Emphasis
PROTOTYPE
#designsystem
Transitional
#designsystem
Transitional
#designsystem
Personality & Branding
#designsystem
Personality & Branding
#designsystem
Personality & Branding
#designsystem
The sequence of steps and movements.
“choreography”
#designsystem
+ Components on the screen
+ Sequence of motion and animation
+ Specific CSS properties
+ Timing values from Design Tokens
= Choreography
#designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion
#designsystem
Motion Effects
fade infade out
color grow
#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
-
#designsystem
Chatter Feed Example
#designsystem
#designsystem
#designsystem
#designsystem
#designsystem
#designsystem
#designsystem
#designsystem
Chatter ChoreographyNew post opening animation
1. User mouses onto the text field
#designsystem
1. User mouses onto the text field
2. User clicks
Chatter ChoreographyNew post opening animation
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
Chatter ChoreographyNew post opening animation
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
4. Share button’s color fades out
Chatter ChoreographyNew post opening animation
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
4. Share button’s color fades out
5. To: and tools fade in
Chatter ChoreographyNew post opening animation
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down height 0.4s4. Share button’s color fades out background color 0.5s, top 0.1s5. To: and tools fade in opacity 0.4s
Chatter ChoreographyNew post opening animation
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down height 0.4s4. Share button’s color fades out background color 0.5s, top 0.1s5. To: and tools fade in opacity 0.4s
Chatter ChoreographyNew post opening animation
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down height 0.4s4. Share button’s color fades out background color 0.5s, top 0.1s5. To: and tools fade in opacity 0.4s
0.4s0.4s + 0.1s0.1s0.4s
Chatter ChoreographyNew post opening animation
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down height 0.4s4. Share button fades to color background color 0.5s, top 0.1s5. To: and tools fade in opacity 0.4s
$duration-slowly$duration-slowly + $duration-quickly$duration-quickly$duration-slowly
Design Tokens
Chatter ChoreographyNew post opening animation
#designsystem
+ Components on the screen
+ Sequence of motion and animation
+ Specific CSS properties
+ Timing values from Design Tokens
= Choreography
Chatter ChoreographyNew post opening animation
#designsystem
Resources
#designsystem
Lightning Design System
Design Guidelines
CSS Framework
Resources
Tutorials & Documentation
lightningdesignsystem.com/resources/downloads
#designsystem
http://sforce.co/1FFAToW
#designsystem
dreamforce-ux.herokuapp.com
#designsystem
Design HQCome to the 2nd floor of Moscone West to chat
with some of the world’s best designers, researchers, and UX engineers.
Share Your Feedback, and Win a GoPro!
3 Earn a GoPro prize entry for each completed survey
Tap the bell to take a survey 2 Enroll in a session 1
#designsystem
Before you leave, get your Quest stamp!
Thank you
#designsystem