HANDBOOK:Introduction to buildinga 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

3

INTRODUCTION TO BUILDINGA DESIGN SYSTEMBuilding 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.

4

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 HISTORYAt 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.

5

WHAT IS A DESIGN SYSTEM?

A BRIEF HISTORY

DESIGN SYSTEMS VS.FRONT-END FRAMEWORKSFront-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 SYSTEMSMany 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.

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.

6

Material Design

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

design system that helps teams build digital experiences.

7

Material Design 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.

8

Polaris by Shopify

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

customers get the most out of the platform.

9

Polaris by Shopify 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.

10

THE STEPS TO BUILD YOUR DESIGN SYSTEM

1. Assess the state of current design practiceFirst 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.

11

1. Assess the state of current design practice

2. Get organisational buy-inSo 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.

12

3. Build a multidisciplinarydesign 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 designersUX 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 developersWeb 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 expertsTo 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.

TestersTesting 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.

13

3. Build a multidisciplinarydesign systems team

4. Establish rules and principlesBefore 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 languageYour 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.

14

6. Create a reusable components libraryOnce 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. AdoptionSo 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.

15

6. Create a reusable components library

7. Adoption

EXPERIENCES FROM DESIGN SYSTEMSThere’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-designIt 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 projectsTo ensure your design system stay up-to-date, include a design

system project member in every project.

Find a good toolThere’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 sourceAn 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 scratchRetro-applying your design system to old projects can be tricky, so

embrace the quick win by using it on your new projects first.

16

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 andtest Enonic in the cloud.

REQUEST DEMO