Salesforce Lightning Design System
Lightning Experience Everywhere
The Lightning Experience is the name of the beautiful new Salesforce User Experience unveiled two weeks ago. This new experience is built on a set of UI components, patterns and guidelines known as the Lightning Design System.
The Lightning Design System is run as an open source project and is available to everyone. While other CSS toolkits are generally agnostic in terms of the type of application you build, the Lightning Design System is focused on business apps. Therefore, in addition to traditional components, it provides specialized components that are useful when manipulating data: activity timeline, data tables, record headers, etc. And more importantly, in addition to UI components, it provides UI patterns to solve the common problems you face when building data-driven apps.
One thing that’s particularly exciting about the Lightning Design System is that it enables a unified User Experience across otherwise disconnected pieces of Enterprise Applications. Let’s break that down into three important points…
1. Beautiful is Standard
The Lightning Experience provides a clear, efficient, consistent, and beautiful experience out-of-the-box. Delivering a clean and intuitive experience is a challenge for any application, but doing it at scale for a huge, metadata-driven, and entirely customizable system is an extraordinary accomplishment. Historically, companies have often resorted to custom development to put a better User Experience on top of parts of their Enterprise system. With the Lightning Experience, there is no need for custom development to get a beautiful, uncluttered, and intuitive experience: it’s the standard.
2. Extend Beautifully
Developers building on top of Enterprise systems often have to choose between mimicking their Enterprise system’s UI at the risk of delivering a subpar experience, or providing a better UI at the risk of confusing users with a disconnected experience. Luckily, with the Lightning Design System, you no longer have to make that lose-lose choice. The default experience is beautiful, and if you need to extend it with custom code, no need to try to mimic the native experience: you have access to the application’s underlying design system; the same style sheets, icons, fonts, patterns, etc. You can leverage the Lightning Design System in Visualforce pages and in Lightning Components.
To demonstrate how to extend the Lightning Experience with the Lightning Design System, I built a custom Lightning Component for a Real Estate company. The component provides a custom experience to find properties matching specific criteria. Even though the component is custom, it is fully integrated in the Lightning Experience: the user isn’t exposed to any disconnect in the experience when transitioning between native features and custom extensions.
3. Integrate Beautifully
One of the characteristics of Enterprise systems is that they are heterogenous: made of different pieces accumulated over the years for a variety of reasons. As a result, users are often exposed to disconnected workflows and confusing experiences. If the user workflows span the boundaries of multiple systems, the Lightning Design System can provide a unified UX in front of these systems. The Lightning Design System is language, framework, and vendor independent. For example, you could easily build an app that exposes an integrated UX to the user but that has parts running in Salesforce and parts running in Java or Node.js on Heroku.
In the sample application below, financial advisors manage their customer relationships in Salesforce while keeping a close eye on the market using a specialized real-time trading system. The Lightning Design System made it possible to expose the trading system as an integral part of the Lightning Experience. This specific implementation of the Trader Desktop runs on Heroku and is built with React, Node.js and Socket.io.
The source code for this component is available here.
As another example of leveraging the Lightning Design System to unify the User Experience on top of different systems, here is a custom real estate application running on Heroku and built with React, Node.js and Postgres. This is a good example showing how to integrate an existing application into a unified experience. However, if this was a new application you have to build, you could get the same result, without code, using standard Salesforce features and the new Lightning Experience. Remember: beautiful comes standard.
The source code for this application is available here.
Summary
The new Lightning Experience is clear, efficient and beautiful and sets a new standard for User Experience in Enterprise applications. What also sets it apart is that its underlying design system (the Lightning Design System) is available to everyone to provide a unified experience when extending existing features or integrating with external systems. The end result is a unified User Experience across system and streamlined workflows within Salesforce and across system boundaries.
Follow us at @SalesforceUX.
Want to work with us? Contact uxcareers@salesforce.com
Check out the Salesforce Lightning Design System
