Dec 14, 2015 By Salesforce

The Lightning Design System, a UI Designer in Your Pocket

in App Cloud

The Salesforce app cloud is a powerful platform that developers have been able to extend to solve business challenges for almost a decade, and with new tools like Lightning Components and the Lightning Experience the platform is only getting more powerful with each release.

Developers are great at solving problems and innovating, and over the years they have built some very ‘innovative’ interfaces. Not always good interfaces, but definitely innovative (just google ‘bad UI’). The problem is that many developers have little or no training in user interface (UI) and user experience (UX) design, I know my computer science degree didn’t spend a lot of time on this topic. And assuming you are a developer that does have UI/UX strengths, the odds are high that in a few years your design will look dated - just take a look at how iOS has evolved apps such as the Voice Recorder.

So how can you build great looking and functional apps that will be as good tomorrow as they are today? You can use the Lightning Design System.

When building the new Lightning Experience, Salesforce built a platform - not just a new coat of paint on the old UI. In order to do this effectively the Lightning Design System was born to ensure our internal teams built the new applications consistently. By releasing the Lightning Design System to the community Salesforce is giving all developers a ‘designer in their pocket’ providing a beautiful framework to help any developer build visually appealing and consistent applications that blend seamlessly with Salesforce’s own UI.

A core part of the Design System is the CSS framework that provides you with a wealth of components to quickly make your application look like a million bucks. To give you a head start on building beautiful next generation interfaces there are dozens of examples, complete with sample code that you can copy and paste to get started fast.

The Lightning Design System is more than just a CSS framework, it also includes fonts and icons to ensure UI consistency with Salesforce, as well as Design Tokens. By using Design Tokens instead of hard coding styling choices such as colours it means as Salesforce evolves the UI, your app seamlessly evolves with it keeping the user experience consistent and modern.