Align Motion Patterns with Salesforce Kinetics Guidelines
Learning Objectives
After completing this unit, you’ll be able to:
- Identify key considerations for designing custom animation.
- Define Cascading Style Sheets (CSS).
- Define mock-up.
- Describe design tools for creating animated mock-ups.
- Define transitions.
Kickoff, in Motion
With her motion brief ready, Camila shares her design concept with the engineering team to discuss implementation considerations, kicking off the collaboration process. She shares how the new design concept demonstrates Salesforce Kinetics System goals and uses the visual model to outline how she envisions animation within it.
During their initial meeting, they discuss:
- Salesforce scalable Kinetic patterns, referenced from Kinetics Pattern Prototypes
- Kinetic styling hook values
- Salesforce Kinetics System guidelines for accessibility
- Animation needs for the custom design experience
Salesforce Scalable Kinetic Patterns, Referenced from Kinetics Pattern Prototypes
Kinetics Pattern Prototypes provide an interactive reference for design system—a collection of repeatable design patterns and reusable code—components and Salesforce Kinetics System best practices for choreography—storytelling through sequenced motion. Camila confirms she can use the patterns referenced in Kinetics Pattern Prototypes for ripple and spotlight animation for the custom navigation menu panel.
Kinetic Pattern Prototypes as seen on the Lightning Design Systems site.
Kinetic Styling Hook Values
Kinetic styling hook values use Cascading Style Sheets (CSS)—a type of coding language—custom properties that make it easy to customize component styling for a specific design project. Camila learns she can mimic the values of the recommended Kinetics styling hook values and scale Salesforce Kinetics System animation for panel components into the custom panel component.
Salesforce Kinetics System Guidelines for Accessibility
Camila and the engineering team also discuss how prioritizing functionality—a key motion guiding principle—is vital. This includes using functionality to drive the use of Salesforce scalable Kinetics patterns to create a custom design experience, including animation that helps users maintain their flow, draws their attention to any changes on-screen, and increases the perceived speed of a task.
Functionality is built-in to Salesforce scalable Kinetics patterns, and animation for custom design experiences should also reflect this principle. In addition, creating an accessible experience involves accommodating users' preferences to turn off animation, offering that option system-wide. It’s also vital to follow specific Web Content Accessibility Guidelines (WCAG) to reduce the chance of seizures in users with vestibular disorders—disorders like vertigo and dizziness that interfere with the body’s balance system.
To learn more about creating accessible motion design experiences, check out the Accessible Kinetics guidelines.
Animation Needs for the Custom Design Experience
Camila also discusses the need for custom animation within the custom double-panel component. She shares that this unique component requires motion design that enables users to access secondary menu buttons/options when interacting with the main navigation menu. On a broader note, when considering the need for animation within your custom design experience, it’s key to understand what Salesforce scalable Kinetics patterns work within your specific design system. Once you know this, think about what motion design you need for your design system or unique components.
With the initial consult and collaboration underway, Camila can develop her design concept using component blueprint guidelines for her team’s design system and interactive prototype examples the engineering team shares with her.
Mock-up Motion
Using these artifacts, Camila creates an animated design mockup–a visual representation of the look and feel of the final design. There are a variety of available tools to create design mockups for motion design, including:
- Principle: A design tool for Mac users to create animated and interactive user interfaces for web, mobile, and desktop
- Cavalry: A two-dimensional animation software tool for Mac and Windows that enables you to design in real-time for experiences like data visualization, web, and mobile
- Adobe After Effects: A software application for Mac and Windows that enables you to design motion graphics and special effects for video and web experiences
To learn about more tool options for designing your mockup, check out the Create and Refine Prototypes unit in this module.
Camila uses the UI motion design tool, Principle, to design a mockup of the animated UI. This visual model outlines what her UI looks like in the final form and helps her visualize the structure and layout of the web pages, including how users flow through them and interact with menu options.
Next, Camila checks back in with the engineering team, sharing her animated mockup.
Review and Feedback
During the check-in, Camila and the engineering team review the mockup to determine the technical feasibility of the proposed custom animation. This includes discussing the custom motion required for the double-panel component: a cascade effect. When users click a tab choice at the top of the homepage, menu options cascade vertically once the panel is open. The engineering team brings up that they may have to use a combination of CSS code and JavaScript (JS) to execute the cascade effect.
JS is the programming language that provides the dynamic and interactive functionality to an otherwise static document of a web page. As a result of this discussion, they unblock technical concerns, setting themselves up for a successful implementation process.
With this feedback, Camila can begin fine-tuning the animation for her design concept using styling hook values and best practices for designing transitions. Transitions occur anytime there's a change in the view state of a UI, like a menu panel entering into view or a complete view change on-screen. And best practices for designing transitions include considering what elements to emphasize on the screen to create polished choreography of the UI motion.
To learn more about transition best practices in motion design, check out the Salesforce Kinetics System module on Trailhead.