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