Salesforce

Beautiful UX Using Lightning Design System

Bob Hartung

One of the more interesting sessions I attended this year at Dreamforce was a hands on exercise using the Lightning Design System. The Lightning Design System (LDS) is a user experience framework that allows developers to create custom applications that match the look and feel of the new Salesforce Lightning Experience.

The Lightning Design System is basically a CSS framework for Salesforce. The LDS is similar to other CSS frameworks such as Twitter Bootstrap, but the difference is that it is customized to meet common requirements of applications built for Salesforce. When developers use the new design system, they will no longer need to write their own custom CSS in order to match the look and feel of Salesforce. By using the built-in functionality of the LDS, applications will have a consistent look and feel even as the new Lightning Experience changes over time. This is a big time saver as far as maintenance goes.


The LDS adheres to the following design principles:
(Source: https://www.lightningdesignsystem.com/design/overview)

  • Clarity - Eliminate ambiguity. Enable people to see, understand, and act with confidence.
  • Efficiency - Streamline and optimize workflows. Intelligently anticipate needs to help people
    work better, smarter, and faster. 
  • Consistency - Create familiarity and strengthen intuition by applying the same solution to the
    same problem. 
  • Beauty - Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.


Where should you use the Lightning Design System? Everywhere.


The LDS can be used for Visualforce pages, Lightning pages and components, Mobile apps, and even standalone web applications that are external to Salesforce. This flexibility enables the capability to provide users with a consistent experience following the principles of the LDS even if they are accessing an application outside of Salesforce. In order to accomplish this, the CSS framework can be downloaded directly to your development environment or you can install the unmanaged package on your Salesforce org.  The following page contains instructions for downloading the framework:  https://www.lightningdesignsystem.com/resources/downloads.

In addition to supporting a wide range of technology stacks, the LDS provides developers with an extensive set of tools to create great user interfaces. The system can accomplish tasks such as data entry, record lists, navigation, discussion feeds, activity feeds, and much more. There is also an extensive set of components and icons that are available to make your applications look professional.

To learn more about the Lightning Design System, you can visit the LDS home page at http://www.lightningdesignsystem.com or take a look at the following Trailhead exercises.

Bob Hartung
ABOUT THE AUTHOR

Technical Consultant