How to Integrate Your Design System with Your CMS
featureArticle.chapters
featureArticle.introduction
Learn how you can integrate your CMS with your design system in this handy guide. Including your build process, integration points, and front-end vs. back-end rendering of UI components.
authorBox.aboutVegard Ottervig
Vegard Hovland Ottervig holds a Master's degree in film studies and has worked with journalism and marketing since 2010. He loves cycling, philosophy, gaming, and writing.
Chapter 1
The Essential Parts of a Design System
A design system brings together the visual and functional elements of your organization in one place. With everything from pattern libraries and style guides together under one roof, you can keep your brand and communications consistent. No matter how varied your digital experiences are.
The shape of your design system will vary depending on your digital experiences, communications, and team, but it will most likely include a:
- Sketch library
- Pattern library
- Style guide
- Organization principles
- Templates
- Best practices
- UI Components delivered as a code piece (i.e HTML, CSS and other front-end frameworks)
Chapter 2
The Design System is a Part of Your Build Process
Different design systems offer different options. With some you need to import all the code into your project, and others enable you to include the parts you need. The latter option is the best when it comes to creating a slimline system that isn’t bloated with unnecessary code.
We won’t dig into the nitty gritty in this guide. But popular tools to look out for when focusing on front-end development include Webpack, LESS, Sass, Babel, and Nodejs.
Chapter 3
How to Couple the CMS to the Design System
The link between a CMS and a design system is the HTML. This means that to couple your CMS with your design system you must adapt HTML in the CMS templating where it is needed.
In which scenarios does the CMS need to be flexible? Let’s work through some examples.
- Your design system supports multiple columns and responsiveness. How can this be adapted to your CMS?
- Your design system supports optional use of padding. How can this be configured in your CMS without hardcoding?
- Your design system may handle advanced interaction, i.e. form validation. How can the CMS form builder adapt to this without changing the design system?
- Server vs. client rendering. Does the CMS support fluid transitions for a fast initial response and rich user experience on the client side?
Chapter 4
The Integration Points
Header, Footer, Menu
The header, footer and menu make up the shell of your site and must be integrated to fit with the design system. Once these are customized for your CMS, you will be able to dynamically build the menu content and specific parts of the footer and header.
Layouts
Layouts are used to organize the structure of the various component parts on a page. They are configurable, which means you can adjust padding, background, number of columns, and distribution (like 70/30).
It is great if your CMS has support for layouts. If not, you will have to hardcode and make more page templates. Just bear in mind that hardcoding will limit flexibility for content editors.
Page Templates
Your CMS might be where you code and manage your page templates. In that case you will get even more flexibility if the CMS has dynamic page templates that can be configured by content editors.
And don’t forget that templates can be combined with layouts to produce different results without having to code.
Page Components
Made up of elements and widgets, page components can be inserted into your layout or page templates. These might be helpful functions like a calculator, article list, or calendar.
It’s these components that go deep into the design system, connecting the UI with functionality in the form of buttons, animation, or interactive elements.
Most of your design system integration will come in the form of these page components. The page components might be built using React or other front-end frameworks.
Forms
To make online forms work well with your design system, you need a flexible form builder that allows for customization of the HTML output.
Plus, to make sure they fit the design system, the component itself might have to be adapted. Remember that error handling, form layout, and validation are essential to the form too.
Chapter 5
Front-end Frameworks and Performance
Finally, you should consider the alternative between front-end vs. back-end rendering in relation to your design system. Popular front-end frameworks include React, Angular, and Vue. Which one you should choose depends on the technology used in your design system.
Today more and more of the user experience is delivered in the browser, which can often have a negative impact on performance, especially initial loading.
You must decide if all functionality will be placed in the front-end or if you should opt in for a mixture where you deliver back-end rendered markup and handover to front-end frameworks after loading. The latter will give better response time for users.
It is possible to pull this off if your CMS supports server-side JavaScript. Then you will be able to generate markup servers-side, using for instance React, and pass this to the client for a smooth handover.
We mention this because relying on pure front-end delivery will affect performance and search engine indexing, which in turn will impact SEO scoring and accessibility.
Chapter 6
Bonus: 5 Quick Tips for Building a Design System from Gjensidige
Gjensidige is a Norwegian mutual insurance company that has built a dedicated design system for their digital channels.
We asked digital editor in chief, Torstein Aas-Hansen, to share the company's experiences and best practices for building a design system.
Here are their five essential quick tips:
- Put time and effort into working with the design system. Collaborate across functions and departments.
- Find inspiration from others, but make a design system that suits you.
- Start modestly, with a design system that is easy to build and can be used by many people in different settings.
- Create a roadmap, telling you where you want to be in six months and what you have to do to get there.
- Ensure a multidisciplinary ownership to the design system in the entire design and developer environment.