Intro to Salesforce’s lightning design system


With the recent release of Salesforce’s own style guide, Lightning Design System, we thought we would write up a brief overview of the guide and show how style guides can be really useful for creating awesome apps fast. First things first…

So what is a style guide?

Essentially a style guide is a reference point. A point where, through collaboration usually, a brand can present its styling in a consistent way.

With the term’s origin in writing this has evolved over the years to encompass much more than that and is used in a much broader sense for the web.

What a modern style guide does is set the tone with a list of styles to be used within the brand schema and present all of this in a modular fashion for ease of use, pulling out components and using them straight inside your app.
A good comparison for this particular style guide would be Zurbs Foundation, or Twitter’s Bootstrap frameworks. But for Salesforce apps.

“With the Design System you can build custom applications with a look and feel that is consistent with Salesforce core features.”

Sounds great right?

How can we use this?

If you’re building apps to be used with the Salesforce platform (and if you’re using MobileCaddy to do this already, kudos) then this style guide is perfect. Utilizing design patterns that fit in with the Salesforce UI, you can make sure your app is consistent with its look and feel. And with apps, consistency is key.

Just like Foundation and bootstrap you can download the style guide here

With that you get all the icons, the fonts and the CSS framework to get going.


As well as being well documented, the style guide is also platform agnostic as well as device agnostic, meaning you can use it with whichever stack you prefer, for whichever device your users require (be it Android or IOS). This is always a really nice touch.

So using the Salesforce style guide we get a modular, reusable set of components straight out of the box for use in Salesforce apps, all great things, leading to making great apps. A methodology close to our hearts here at MobileCaddy.

Wrap up

If you would like to learn more about style guides we really recommend this podcast. Hosted but Anna Debenham and Brad Frost this is great podcast series and with some really cool guests. The website has tons of resources to be picked over too. In particular this episode with Jina Bolton, Senior Product Designer with the Salesforce UX team. Very insightful.



Lean UX in the Enterprise: Agility through cross-functional collaboration



A few nights ago Todd and myself went to a great talk a short walk from St Pancras station, London. There was one talk, a solid Q&A section, all followed by a prize draw (we didn’t win unfortunately, maybe next time).

Jeff Gothelf was the speaker, who has co-written a book on Lean UX  (I have since ordered this).

He is also someone I had seen (via YouTube) a little while ago giving a talk which I really enjoyed, However I didn’t realize it was the same person before attending so was very pleased to find this out and knew we were in for a real treat.



Increase shared understanding and communication.

So you may have already heard of agile development but what about agile design? And how would we implement this approach? Back in 2011 Jeff wrote an excellent blog for Smashing Mag that is well worth reading.

A quote from which best sums up Lean UX:

“Inspired by Lean and Agile development theories, Lean UX is the practice of bringing the true nature of our work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.”

By Increasing the shared understanding and communication within a team, by constantly showing the working out and gaining validation we can move to the next step quickly. Whether that’s making a sketch, heading to the whiteboard, or creating a basic base wireframe we can try out ideas see what works, see what fails and move on.

“What is the smallest thing we can make/do to test our assumptions?”

This way communication is regular, feedback is fast and everyone is kept informed on the decisions made. And from here we can work on iterating on our ideas…

Iteration, iteration, iteration.

From here we can begin to turn our assumptions into solutions. Iterating our ideas, focusing on outcomes not features, getting to a working prototype as quick as possible.

By reducing the effort and time needed to get a “hands on” prototype, we free up time for more ideas, more avenues to follow, more dead ends to sniff out, and ultimately make a better user experience because of it. MVP_info

We at MobileCaddy love this approach…

So all in all we really enjoyed this talk (and the pint afterwards), cannot wait to read more about Lean UX, and will be keeping an ear to the ground for more talks like this one. Also big thank you to Front Endgineers London for organizing in conjunction with Agile UX Meetup and of course to Jeff Gothelf! Good stuff.