Salesforce has their beautiful, frontend design framework called the Lightning Design System. It has been wowing users with its modern, friendly interface. This interface is a huge upgrade from the Classic or ‘Aloha’ interface that was commonly associated with Salesforce.
At CodeScience, we have the great opportunity to support our clients with custom applications that are integrated within Salesforce. Sometimes these applications need a custom look and feel, but many times we are supporting clients that want their application to blend seamlessly into the new Lightning Design System look and feel. So, it’s super handy to have the Lightning Design System to reference.
The Lightning Design System is a true design framework. You understand ‘the why’ behind interface decisions from color to typography to accessibility. At Dreamforce this year they handed out a fantastic sticker which stated ‘Easy to do the right thing, hard to do the wrong thing’. This is absolutely true in reference to the Lightning Design System. You have all the core tools you need to make good design decisions when creating applications to go within Salesforce.
Six reasons why the Lightning Design System is awesome from a designer’s perspective:
1. It comes with a Sketch file
Yes. It. Does. I have been a huge fan of Sketch for designing digital products for a few years now. It is a super lightweight design program that is built for digital. Salesforce has created a design file to use so when you need to mockup some design ideas before building, it is super fast and you are sure to have the correct colors, fonts and sizing. I cannot express how great this is.
Check out the design file on this page.
2. It has a custom typeface
You know a company takes design seriously when they have a custom typeface. Salesforce developed a typeface called Salesforce Sans to be used in the Lightning Design System. It is a clean, humanist typeface that makes the interface clean and easy to scan and read. This is a huge plus because we all know Salesforce applications are chock full of data, letters and numbers. The easier to scan, the happier your users will be.
Read all about their typeface here.
3. Color
Need a purple? Need a blue? Need a green – no wait, you need teal! No worries, you are covered. This design system comes with just about every color you need for a successful interface. The best part about the color choices is that they all makes sense. Colors flow together and have similar tone and value to them. Color can be a very delicate subject and it is smart that Salesforce decided it for you. Time and thought has been put into their color decisions – all you need to do is follow their lead.
Look at the Lightning Design System rainbow here.
4. It has a very defined sizing structure
No need to guess about font sizes, padding, or margins; just reference their Utilities section and understand their spacing theories. I get pretty OCD about spacing. When something is not even or looks off, it makes my right eye twitch. Lightning Design System keeps those twitches at bay.
Take a look at their spacing section, but fish around and learn about their other utilities.
5. Icons for days
Usable interfaces take icons seriously. Icons are a universal visual language. The Lightning Design System has an extensive library of icons to help make your interfaces even more simple to use. You will also notice these icons have a fluid style to them – single, full color with soft edges. This detail informs you that the people behind this system know their stuff. I love that they take even those little details very seriously.
Take a look at all of their icons here.
Also, check out an older post we did about SLDS icons here. It has some good information about SVG icons and also using font icons as another option
6. Need a component? Take your pick
Lightning Design System has an extensive component library to search and get snippets of designs from. Need an activity timeline? You got it. Need form styling? No worries. You can pull exact examples from the component library but you can also gain some really great inspiration if you need to build a custom component for a client as well. You have great bones to use as your visual inspiration that will flow nicely with the Lightning look and feel.
Browse through the components here.
Summary
These are just a few of the top reasons why I love the Lightning Design System when I am helping to design custom applications at CodeScience. It allows us to quickly build concepts and vet out usable interfaces. Not only does it speed up our design time but it also simplifies the development process. Our frontend developers are equipped with the framework to replicate our design ideas to the T. When you have quite an eye for design detail, having this kind of vetted framework is very powerful. You get usable, beautiful interfaces that delight your users, and make their lives (and yours!) much easier.
Put our design team to work for you! Learn more at www.codescience.com/services.
