A fundamental shift is happening in the approach to designing cross-platform applications. Designers are moving away from focusing on individual styles, restricted grids and fixed components for singular platforms. Instead, we are focusing on sharing flexible design systems. These easily accessible online repositories include design principles to follow, responsive grid systems, reusable components and style guides with examples of what and what not to do.
In the old days, designers typically worked on isolated screens in a single context and sometimes created unique style guides for each product created. As technology has advanced, it has become clear that designers must consider the needs of all users across many platforms in different contexts. This has led to the rise of robust design systems to achieve broader goals of creating consistency across products and platforms. The new design systems are much larger and more powerful than what used to be in a typical style guide or pattern library.
How We Got Here
This type of modular and flexible componentry is not completely new. Frameworks containing functional component libraries like the Yahoo User Interface (YUI) appeared around 2006 and were shortly followed by grid frameworks like Blueprint and 960.gs. These frameworks and libraries provided a foundational structure for user interface code, but lacked style and did not consider real end user needs.
Twitter pushed this idea further with Bootstrap, which blends the components of the YUI with the flexibility of a responsive grid framework. Bootstrap makes it easy to jump in and customize a deep component library, but it lacks style (on purpose) and does not thoroughly consider the context of end users. It’s a starting point for common components in a responsive grid framework, but simply jumping in and making something in Bootstrap will not guarantee people will enjoy it. You need to empathize with people to understand their needs in order to create something useful for them.
The New Design Systems
Recent trends in the way we approach design systems advocate a unified user experience within and across products. Imagine a mini-Bootstrap made specifically for the purposes of creating consistency across your suite of products. Decisions and ideas are based on unique user needs, preferences and tastes, delivered in an easy to read instruction manual. It’s a world where well-defined design principles and a bespoke component library in a flexible grid framework can allow a dispersed team to march to the same drum.
One example of this is Material Design, a design system created by Google that is intended to educate people on best design practices. Material Design provides a framework to achieve consistency across Google products and does a great job of explaining the principles to employ and what not to do.
Intuit’s Harmony and Salesforce’s Lightning design systems are also great examples. Each show how components can consistently appear on desktop and mobile devices, without referencing a specific application or product. They define a unique framework for dispersed teams to design within. Unlike Bootstrap and YUI, they keep their respective company’s business and user needs in mind. To provide accountability and governance over the content, Intuit’s Harmony system displays the author’s name and date-stamp on each page. Salesforce takes it further by supplying code examples, each of which ties to a code repository on Github. The “Holy Grail”, as some refer to it, is to have the code in the design system sync with production code. I would argue that we are not far away from this auto-magical world.
Why Robust Design Systems Matter
There are obvious benefits to establishing a robust design system across your products. For example, imagine five teams across five regions have been tasked with designing the same components for three different devices. A unified design system could help them maintain consistency, avoid redundant work and allow people to quickly get up to speed with minimal training. A sound design system also enables faster speed to market while making it easier to coordinate and collaborate. Keeping an online and easily accessible reference for your team is the fastest path toward a unified user experience.