HANDBOOK:

Introduction to building
a design system
Table of Contents

Introduction to building a design system 3

What is a design system? 4

A brief history 4

Design systems vs. front-end frameworks 5

Examples of design systems 5

Material Design

Atlassian

Polaris by Shopify

Lightning by Salesforce

The steps to build your design system 10

1. Assess the state of current design practice

2. Get organisational buy-in

3. Build a multidisciplinary design systems team

4. Establish rules and principles

5. Create a visual design language

6. Create a reusable components library

7. Adoption

Experiences from design systems 15

Takeaways 16
INTRODUCTION TO BUILDING
A DESIGN SYSTEM
Building new design elements is great, but do you know what’s even
better? Automating the practice for the next person. That’s exactly
what a design system does. These shared, integrated patterns and
principles make up a brand and product identity, and provide a
blueprint for the whole team to create consistent, replicable and
seamless look and feel across the whole digital experience.

No wonder so many big names are rushing to build their own, and even
better, share them with the rest of us. In fact, design systems have
become such an integral part of the industry that in 2017-18, up to
69% of organisations either used one or were currently working on
one.

With so much information out there and experience to draw

from, it’s easy to get overwhelmed. So we’ve brought
together the best advice and practice from industry leaders to
help guide you through the process of building the right design
system for your organisation.

3
WHAT IS A DESIGN SYSTEM?
A design system maintains the visual and functional elements of an
organisation in one place, in order to fulfil its brand principles through
design, realisation, and development of products and services.

In other words, it brings order to chaos. Incorporating everything from

a Sketch library and style guide to a pattern library and organisation
principles, an organisation’s design system is like its brand blueprint.
Except unlike a traditional style guide, these components and
patterns are integrated into an organisation’s
processes and seamlessly implemented into product
code. The result is consistent design across the whole
digital experience that can be replicated long after the
creator has let go of the reigns.

A BRIEF HISTORY
At the beginning (i.e. 1991), there was HTML. Three short years later,
and CSS was born. The foundations for web design were laid, but
frustratingly, the potential to design a website that looked great
across all browsers was still the bane of any developer’s life. Enter
pattern libraries. These libraries corralled the most used design
elements on a site and defined how they behaved and how they were
coded.

The early days of pattern libraries gave way to the Middle Ages of
web 2.0. As new front-end frameworks and UI technologies began to
appear in the late aughts and early 2010s, developers were able to
take advantage of Bootstrap and Jquery (for the JavaScript part) to
build responsive digital experiences.

4
And then came the Renaissance. Frameworks like React, Angular and
Vue allowed organisations to create design frameworks that closely
bonded with the development framework. This all adds up to the
richer, more responsive web experiences that we know and love today.

DESIGN SYSTEMS VS.

FRONT-END FRAMEWORKS
Front-end frameworks have exploded in
popularity over the last five years. The rise of Vue, Angular and React
has made it easier for developers to create rich user experiences that
are packed full of functionality.

But what exactly are front-end frameworks? In short, they let you
implement the structure, design, behaviour, and animation of every
element you see on-screen when you visit and interact with websites,
web applications. Written in JavaScript, these frameworks are like the
car engine to your digital experiences.

Design systems, on the other hand, control the car interior and exterior
– basically, everything that you can see, feel and touch.

EXAMPLES OF DESIGN SYSTEMS

Many of the biggest global brands have made their design systems
public, allowing designers to learn from and adopt their ideas and
processes. These systems illustrate how hugely successful brands
created a UI language that was scalable and replicable.

5
Material Design

Developed in 2014 by Google, Material is an open source code-backed

design system that helps teams build digital experiences.

6
Atlassian

Atlassian has created an end-to-end design language composed

of design patterns, code components, and a library of UI assets in
Sketch. Helpfully, the ADG website describes the logic behind each of
the choices.

7
Polaris by Shopify

E-commerce vendor Shopify launched its own design system to help

customers get the most out of the platform.

8
Lightning by Salesforce

Lightning contains brand and product design guidelines, design

patterns and component blueprints for the creation of unified UI in the
Salesforce ecosystem.

9
THE STEPS TO BUILD YOUR DESIGN SYSTEM

1. Assess the state of current design practice

First things first, assess the design elements that are used
throughout your digital experience and communications. This visual
audit can include anything from banners and websites to PowerPoint
templates and newsletters. Remember that this inventory will be
a powerful tool when it comes to getting the organisation onboard,
so be thorough. As well as listing all the colours and text-styles in
your digital experiences, take screenshots of UI patterns and then
categorise them according to their purpose.

Do you need a design system?

Take a look at the list of design elements. Do they appear a lot over
different digital channels, or are they mostly confined to physical
brochures? If it’s the latter, a simple design handbook will probably do
the job.

The next step is to do a UI inventory. Analyse your different websites

and applications, do they share common components and design
elements? If you feel they could benefit from reuse and a unified
branding or tone of voice, chances are that a design system is the way
forward.

10
2. Get organisational buy-in
So you’ve figured out you need a digital system? Now’s the time to get
the decision makers onboard. The people most likely to benefit from
the design system include the CMO, Digital Manager, and development
team, so make sure to clearly communicate the specific benefits for
each party. Thankfully, the benefits are pretty undeniable: it saves time
and money, leads to better user experiences, and allows for the reuse
of components.

Of course, not all design systems are created equal. While a large,
complex organisation might benefit from a multi-layered system, for
small operations, a set of visual guidelines might be all it takes. By
doing a thorough audit, you should have a clear idea of what you need
and plenty of evidence to back up your pitch.

11
3. Build a multidisciplinary
design systems team
Prepare to assemble your team. Design system teams come in all
shapes and sizes, but you’ll probably want to include at least:

UX designers
UX designers have to take into consideration both the brand profile
and the user experience in their designs. They should also be able to
deliver HTML and CSS to the developers.

Web developers
Web developers will work on implementing CSS, reusable components
and documentation. They should also be able to implement designs
using CMS templating and popular UI frameworks, so it’s important
that they’re trained and certified on the CMS.

Accessibility and SEO experts

To make sure your content is seen by as many people as possible,
accessibility and SEO is an important consideration. Look for an
expert who’s well-versed in the WCAG standard, as well as SEO best
practices.

Testers
Testing expertise will help make sure the final solution is secure,
accessible and fulfils all of its functional requirements, as well as
being free of any bugs before launch.

12
4. Establish rules and principles
Before diving headfirst into the project, establish the rules and
principles that will be at the heart of your brand system. These
principles should be shaped by your objectives for the project; are you
looking for speedier implementation? More consistent results?
Or more accessibility? Once you’ve got these design principles in place,
consider the development rules. This includes creating guidelines for
how you commit, review and document code.

Remember that your design system is a living organism that will grow
over time. Making sure you start off right is key to success over time.

5. Create a visual design language

Your design system should unite your team around a common visual
design language. As with any product design process, think about the
end user when creating your visual language. Who will be using your
design system? Doing your research upfront will ensure you create a
system that can be integrated into the workflow of other teams.

Some of the things that you’ll want to standardise are:

Find out more about how to standardise each of these elements here.

13
6. Create a reusable components library
Once you’ve pinned down the visual language, start adding your
reusable components and patterns to the shared library. The idea is
to minimise the designer-developer handoff and make it easier for all
stakeholders to work together throughout the development lifecycle,
resulting in a ton of time saved and a more consistent product.

A component can be anything – a drop-down menu, icon, button

or something more complex. The most important thing is that it
combines elements that solve a particular problem in your digital
experience. Remember that this job never really ends – you should
figure out a solution to keep the library
versioned, documented, maintained and
supported to ensure each component is
up-to-date.

7. Adoption
So you’ve developed a design system, now
you just have to ensure your whole organisation makes the most of it.
For a quick win, use the design system on new projects first to test its
full potential. Then comes the trickier part: introducing it to the rest
of your organisation and devising a strategy to encourage ongoing
participation.

Once you’ve figured out how to make the system available, begin the
process of teaching and education. Live documentation can be super
helpful here. Make sure to record what each component is and when
to use it. Samples, sites, examples and starter kits can all bring the
system to life and ensure the whole team uses it on any subsequent
projects.

14
EXPERIENCES FROM DESIGN SYSTEMS
There’s no right way to build a design system, but there are definitely
ways to improve the process. Here are some of our tips from
hard-earned experience.

Avoid over-design
It can be tempting to play around with technically detailed variants
of a design, but try to keep it simple. Sharing a thousand scenarios
for button functionality in different contexts is going to lead to
inconsistent design and a fed-up team.

Always include a design system rep in projects

To ensure your design system stay up-to-date, include a design
system project member in every project.

Find a good tool

There’s no use investing money into a tool if you haven’t invested time
in making sure it ticks all the boxes. When choosing your tool, consider
how it will support the development of a design system that fits your
organisation.

Make it open source

An open source design system will keep your developers excited, not
least because it enables them to showcase their work (as well as
motivate them to keep on producing brilliant stuff.)

Start from scratch

Retro-applying your design system to old projects can be tricky, so
embrace the quick win by using it on your new projects first.

15
TAKEAWAYS
There’s a reason why the world’s fastest growing companies have
implemented their own design systems: they supercharge user
experience while making life easier for designers and developers
alike. But that’s not to say building your own is easy. Developing a
design system is like turning your organisation’s design principles into
software that all your developers can use.

Because creating a design system from scratch isn’t always feasible

(or necessary), don’t be afraid to take inspiration from an open source
design system that fits the bill. And remember that the building
process doesn’t end once you’ve introduced your team to the system.
Just as your organisation evolves, the best design systems are living
projects too, so put systems in place to keep it going strong long into
the future.

FREE DEMO OF ENONIC XP

Get a free demo and

test Enonic in the cloud.

REQUEST DEMO
16