The Salesforce User Interface (UI) has been constantly evolving for two decades now, with every release adding improvements to the overall experience.
The most notable change, the Lightning Experience, which was announced and launched in 2015, was not only a fresh look compared to Salesforce Classic but also introduced new features and functionality for Salesforce professionals to leverage further customizations. Fast forward to the Summer ‘24 release, and Salesforce has an enhanced UI to improve accessibility, responsiveness, and page performance.
In this article, we’ll share an overview of SLDS, the enhancements to the visual style, and what the changes mean for Salesforce Admins and Developers. The refreshed UI does not affect the Salesforce platform. Ultimately, this transition will help improve productivity.
Salesforce Lightning Design System
Would you like your custom components to be in line with the look and feel of the Salesforce platform? Then look no further than the Salesforce Lightning Design System (SLDS).
As an open-source collection of design patterns, best practices, and even components that Salesforce Designers and Developers can use to replicate the Lightning Experience, SLDS helps you and your team focus on the big picture while rapidly scaling your implementations with flexible, reusable, and accessible technology.
Anything from design guidelines to icons, component blueprints, and even an SLDS UI kit in Figma is right at your fingertips! Get started with SLDS here.
So… What’s Changing?
A refreshed Lightning UI style is coming in Summer ‘24, which Salesforce has developed to simplify the user experience with customer feedback and research in mind. With customer satisfaction and trust being the main goal for Salesforce as a company, the visual style of the platform is going to keep evolving as expectations in consumer technologies change.
Over the months of June and July 2024, Starter Suite, Pro Suite, and a subset of Sales Cloud customers will have the enhanced UI enabled by default, which they may disable under User Interface in Setup if desired. Note that while, for Starter and Pro Suites, the update will apply to both new and existing instances, for Sales Cloud, only new Professional and Enterprise instances will have the option available as part of this release.
Getting into the details of the actual change, keep in mind that these are by no means a platform change, as the Lightning platform features and functionalities will remain exactly as you know them. What’s happened in the background is that Salesforce updated the underlying CSS by defining new values for styling hooks, which brings a cleaner look to the UI without changing functionality. If you have an Experience Cloud site, you shouldn’t have any changes. For Lightning pages, you may have to uplift custom components.
The color, typography, border thickness, radii, and spacing of global styling hooks have new values, resulting in a fresh-looking and navigation-optimized experience. The circular motifs, inspired by none other than the Salesforce Cloud, help to separate sections of active engagement from the static content while conveying friendliness and simplicity through the round edges. Additionally, while the color palette is similar to what you are already familiar with, the improved brightness and contrast, along with the font changes, amplify legibility.
From an end-user perspective, the refreshed Lightning UI is meant to be approachable and intuitive so they can conduct their day-to-day tasks faster with simpler navigation and spend less time figuring out where key information is. The intentional use of a brighter color scheme, indicators, and button states can help reduce potential user errors while the removal of distracting elements ensures a clear focus and increased overall clarity.
While the changes are definitely noticeable in comparison with the current Lightning UI, the refreshed version could easily become a user favorite as it maintains the look and feel of the Salesforce Lightning Experience you have already become accustomed to.
Back to Best Practices
Following recommended best practices, customizing the Salesforce platform should always remain top of mind, regardless of any current or future UI changes. Writing clean code will never go out of style and will set you and your organization up for success from the get-go.
When designing or building solutions to satisfy your business requirements, continue to leverage the Lightning Design System – hacking code might help with short-term needs, but can easily turn into a headache down the line. Use base Lightning components to increase performance and development speed, as well as reduce deployment time.
As mentioned above, SLDS styling hooks allow you to rapidly transform the experience and individual components in accordance with your company’s brand guidelines and provide CSS custom properties that correspond with SLDS component blueprints and design variations.
Avoid anti-patterns throughout your implementation, such as overriding SLDS classes and styles. If you haven’t already, be sure to take a look over the Pattern & Anti-Pattern Explorer, where you can review the most common anti-patterns across the different dimensions of Salesforce Well-Architected and prevent them in your solutions.
What’s Next?
To make the adoption of these new changes as smooth as possible with the least amount of unforeseen impact, Salesforce is planning further updates to the available tools in upcoming releases.
Both the SLDS Validator for VS Code and Code Analyzer are to be aligned with the new enhancements, especially for developers or ISVs who may have customized components in unsupported ways – all to help identify the discrepancies and update accordingly.
Helpful Resources
This incoming transition, with its changes and recommendations, was announced by Salesforce in both the release notes as well as a dedicated enhanced Lightning UI blog post. Make sure you refer to the resources below to prepare and plan ahead:
- SLDS Architecture Updates FAQs
- What Developers Need to Know About the Lightning UI Enhancements
- Prepare Customizations for SLDS Architecture Updates
- New Global Styling Hook Guidance
- Styling Hooks Developer Guide
- Salesforce Brings New UI to Starter and Pro Editions
- Salesforce Starter Suite
Summary
All in all, with these CSS-based design system updates, Salesforce continues to adapt not only to enhance the overall experience and navigation across the platform but also to account for diverse user needs and accessibility considerations.
While these changes won’t be visible to most customers in Summer ‘24, make sure you stay up to date via the Salesforce Admin or Developer sites for future product innovations coming your way!