📢 Attention Salesforce Certified Trailblazers! Maintain your credentials and link your Trailhead and Webassessor accounts by April 19th. Learn more.
close
Start tracking your progress
Trailhead Home
Trailhead Home

Understand Key Principles Behind the Design System

Learning Objectives

After completing this module, you’ll be able to:

  • Describe what the Salesforce Lightning Design System is and what it’s used for.
  • Describe the key design principles that the Design System is based on.

Introducing the Lightning Design System

The Salesforce User Experience team has been working hard to bring Enterprise UX into the 21st century, and is proud to present the Lightning Design System. The Design System makes it easy for you to build applications that comply with the new Salesforce Lightning look and feel without reverse engineering the UI as custom CSS. In fact using the new Design System markup results in pages which have the Lightning look and feel without writing any CSS. Interested? Excited? We are! Read on.

Lightning Design System website

Lightning Design System is quite a mouthful, so we’re referring to it here as the “Design System”.

You might have used other similar design systems, such as Twitter Bootstrap or Foundation for building websites. The key benefits of this Design System are:

  • It’s tailored for building Salesforce apps. Using the Design System markup and CSS framework results in UIs that reflect the Salesforce Lightning look and feel. The focus on building applications is an important one to keep in mind. The Design System does not over-enforce defaults such as padding and margins, in contrast to some other frameworks which are focused on building marketing pages. The Design System lets you easily specify the exact layouts you require, whilst conforming to the new Lightning UI.
  • It’s continuously updated. As long as you’re using the latest version of the Design System, your pages are always up to date with Salesforce UI changes.
  • Accessibility is baked in to the CSS framework behind the components.
  • The CSS is fully namespaced with the slds- prefix and scoped with the slds-scope class to avoid CSS conflicts.

The Design System bundles four types of resources to help you build applications.

  • CSS framework — Defines the UI components, such as page headers, labels, and form elements, a grid layout system, and a single-purpose helper classes, to assist with spacing, sizing, and other visual adjustments.
  • Icons — Includes PNG and SVG (both individual and spritemap) versions of our action, custom, doctype, standard, and utility icons.
  • Font — Typography is at the core of our product. We’ve designed the new Salesforce Sans font from the ground up to give our product a distinct visual voice and personality, and we’re making it available to you as part of the Design System.
  • Design Tokens — These design variables allow you to tailor aspects of the visual design to match your brand. Customizable variables include colors, fonts, spacing, and sizing.

The Design System is built around the capabilities of modern browsers and has some minimum browser requirements. Modern versions of Chrome, Safari, and Firefox are fully tested. For Microsoft Internet Explorer (MSIE), the Design System supports only version 11 as well as Microsoft Edge. Users of earlier versions of MSIE might encounter issues such as missing icons.

Core Design Principles

The Lightning Experience UI, which the Design System represents, was crafted using four core design principles. We encourage you to keep them in mind as you develop your applications.

  • Clarity — Eliminate ambiguity. Enable people to see, understand, and act with confidence. The new UI has reduced clutter so that users can easily find the information they need.
  • Efficiency — Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster. For instance, the new Lightning UI buttons improve the prominence of calls to action.
  • Consistency — Create familiarity and strengthen intuition by applying the same solution to the same problem. For example, the new UI enforces one button style across all contexts.
  • Beauty — Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship. Can a UI ever be beautiful? We think so!

Where You Can Use the Design System

The new Design System makes it straightforward to build Lightning-compliant Salesforce apps across a range of technology stacks.

  • Visualforce pages accessing Salesforce data via remote objects or JavaScript remoting. The Design System is not yet compatible with <apex> tags, but watch this space.
  • Lightning pages and components made available to Salesforce and Lightning Experience
  • Mobile apps accessing Salesforce through the Mobile SDK or another API
  • Standalone web apps served by Heroku or a similar platform

Module Prerequisites

The rest of the module includes some fun hand-on technical work. Before you dive in, review the following prerequisites:

  • You must have access to a Salesforce Developer account.
  • The example pages assume that you have some knowledge of web development (HTML, CSS, JavaScript) and Salesforce administration.
  • The module focuses on using the Design System within Visualforce pages, so it’s beneficial to have some experience with that technology. But although the code examples are specific to Visualforce, you can reuse them in other stacks with minor customization.

Resources

retargeting