Design systems: everything you need to know

[Rss Bot 1]

Anyone working within digital design is bound to have heard the term 'design systems' by now; you might not be sure what it means, though. In which case, we're here to help. 

In this article, we'll define exactly what a design system is, the reasons for using one, how to create one and what tools you'll find useful. On page 2, you'll find a deep dive into the history of the web to find out where design systems came from. 

• The best design style guides, to inspire you

What is a design system?

A design system is a single source of truth that designers and developers create, reference and develop together. It’s a matrix of rules comprised of a library of symbols – fonts, icons, colours, shapes, grids, animations, tone of voice or more – that carry different meanings, determined by their function and hierarchical relevance. 

It’s essentially a living organism made of elements that evolve from fulfilling pre-existing requirements to newly defined ones as the product grows in complexity. These elements are translated into development-ready components that can be picked up and used immediately in a live environment.

Who defines a design system?

Designers and developers work closely together with an agile approach to establish the rules of a design system. Designers define all aspects of visual communication – UI, branding and user experience – while working with developers to transform those properties into coded components, by iterating them consistently until they perform technically and stylistically in a self-contained manner.

Why have a design system?

Though a design system is a foundational requirement for any digital products that scale, at its core are principles that apply to any design work. The most important aspect is to put in place a set of rules that, when repeated over and over again, will consistently return the same principles. 

In the same way responsive web design is considered a modular approach in terms of how blocks of content behave on a web page in different viewports, a design system follows an atomic approach by addressing each particular element that defines the properties of a component.

The purpose of setting up a system is having a library of tried and tested components that can be reused consistently and expected to perform each time on all product dimensions – style, branding, behaviour, function and delivery. The biggest advantage of a design system is to be able to prototype efficiently and iterate both design and code symbiotically in a journey towards a high-quality product.

How do I develop a design system?

Now let's take a look at the steps you might take to put together a design system for a digital product project. 

01. Establish a clear product vision

First, you need to have a clear idea of the product you are developing. Here are a few essential questions to consider:

What does it do?

• What is the purpose of your product?
• What are the requirements for this product? 
• What sort of functionality will the product need in order to perform? 

Who is it for?

• Who is the audience for this product? 
• Does the user have any quirks that might affect how the product is received? 
• Why will the user engage with this product? What makes it unique? 
• Is the user familiar with similar products? 
• Is the product responding to an identified need or creating a new one? 
• Does it address accessibility?

Where will it live?

• Is this product a website? A web app? An app? Something else?
• Is it device agnostic?

Should it deliver the same experience cross-platform or focus on particular micro-experiences within specific contexts?

The purpose of a design system is to reduce complexity in development, by addressing known concerns as well as identifying new ones during the conception stage. It’s important to define the product mapping early on in the process, as it will help recognise potential hold-ups that can be avoided at the prototyping stage.

02. Work out your plan of attack

Secondly, you’ll need to assess the best approach. If you’re working on a new product, you’ll likely start with an MVP (minimum viable product), where the attention will be on validating functionality and learning users’ feedback. In those cases, it makes sense to use existing UI kits from established platforms, such as Google’s Material UI or Apple’s UI kit. 

Google’s Material UI is changing product development with its in-depth graphic exploration and open source code

If you’re past the MVP stage or creating a whole design system from scratch, your product mapping – which should include key aspects such as information architecture, a sitemap and user journeys – will inform you which basic functionality needs to be addressed first. 

For example, if your product is an ecommerce app, what elements do you need to have throughout the user journey to perform a purchase – from the homepage through to product page, checkout and order confirmation? Is it vertical or horizontal navigation? What do CTAs look like: are they icons, text only, have a coloured background? What image ratios are you considering: portrait, square, landscape? 

By addressing each element’s properties by hierarchical functionality, you’ll be able to lay solid foundations for progressive UI releases, thus building a consistently reliable system.

03. Choose the right tools

Thirdly, developing a product should always be an inclusive process that depends on all parties involved: designers, developers, product owner, client and users. Together, these individuals create an ecosystem, a testing ground that will shape the design system throughout the journey to the end product delivery.

As progress needs to be shared and, sometimes, worked on in real time, it’s important to choose the tools that best fit your workflow. Thankfully, we’re fairly spoilt for choice when it comes to design and prototyping tools.

Design+Code is the place to learn if you’re a designer looking to prototype in code

There are currently platforms that cater for slightly different file-sharing goals. Adobe XD is gaining strides with its latest release; InVision is a solid platform as well as a valuable design resource and Figma is breaking ground by bringing together desired features. Alternatively, if you’re one of those designers who enjoys writing code in order to push your work, you’ll love Framer X. Need an extra hand? Check out Design+Code, one of the best learning resources out there.

You should also consider the following tools:

Google Docs

Google Docs is a great starting point

While limited in its scope, Google Docs (within Google Drive) can be a great, simple and accessible tool for documentation or at least give you a solid start. 

Style Guides tools

Style Guides is packed with useful design system tools

There are many other tools to aid design system documentation and also the design, build and management of design systems. Style Guides is a good place to search for them. Just be wary of which tools you invest in. Your team is going to invest a lot of time in these tools, so you need to be confident they will still exist a year from now. 

Sketch

Sketch is an absolutely essential tool

When it comes to design, it's hard to go wrong with Sketch. Sketch's nested symbols, symbol overrides and Sketch Library are invaluable when working with a system and/or a team.

Developing a design system is a collaborative approach that relies on principles of teamwork and transparency. It’s a commitment between teams willing to make mistakes and learn from them, discover new ways of doing things, innovate together and, all-in-all, just get a kick for a job well done because the product works and exceeds expectations. Which is the best feeling in the world. 

Next page: the history of design systems

Digital design has been navigating uncharted waters for about 20 years, since the advent of mainstream internet. In the 1990s, any aspect of ‘design’ was in full control of the programmer – black backgrounds, bright web-safe colours in a highly pixelated 8 x 8 font, infamous vintage gradients that are now making a comeback and ASCII character drawings that made anything look cool.

ifindit.com is a late 1990s search engine that’s a real graphic gem and still live today

At the time, concerns about web layout, information architecture and user experience were secondary – or even tertiary – in relation to content. The more that could be dumped on a web page, the better. Whatever information you couldn’t include on the landing page would be signalled by hyperlinks to drive the user to additional pages – who can forget those long, heavy text lists of rainbow coloured, underlined hyperlinks? In some cases, there was a certain attention given to navigation but only by absolute logical need. Navigational consistency between pages was another matter. Early days.

The start of user journeys

When designers joined the web revolution, it was like a whole new world had been unveiled. Suddenly, content didn’t have to be static. You could not only hyperlink it by absolute meaning but also create an interrelation of meanings with other types of content within the same environment. 

Hyperlinks could be a full line of copy or just a couple of words, without any particular hierarchy. The groundbreaking innovation was that hyperlinks enabled the creation of more complex journeys – you could now tell a story. These were the early stages of what we now call user journeys, where web designers defined how and when the user would see and interact with content.

What was previously a new, fascinating world was becoming a limitless reality

Moving into the 2000s, technology developed rapidly and with it arrived a myriad of new devices, mediums and channels. As a relatively and recently acknowledged discipline, digital design had been limited to react in response to technical developments. Until then, it was merely adapting while playing catchup with technology rather than evolving and help defining it.

Suddenly, what was previously a new, fascinating world was becoming a limitless reality. Designers now had not only to worry about multiple screen resolutions but also endless device types. Questions of adaptive layout, hidden content on smaller screens and readability – just to name a few – came front and centre. 

With the complexity of new challenges and opportunities, design became a key element of web build. Aspects like information architecture, user journeys and overall user experience now complemented purpose, functionality and branding. Elements of cognitive science slowly but surely came into full play when designing a website.

A responsive game-changer

By the time touchscreen smartphones hit the mainstream market, companies started taking mobile design more seriously. Mobile web access, faster network speeds, higher image resolution and developments in secure online payments became highly persuasive arguments for companies to invest in additional touch points, rather than just sticking to a desktop experience.

In the early days of ecommerce, brands with the most economic foresight started developing dedicated mobile websites, leading other industries to follow. Market confidence grew and with it further investment in tech and design, which eventually led to the groundbreaking development of responsive web design – a term coined by Ethan Marcotte in 2010.

This approach was a complete game changer. It introduced a new way of coding that allowed for fluid grids and control of content display across any screen resolution regardless of device via media queries. A true innovation that put designers in control, it instantly elevated the quality of the output while allowing the focus and time to be spent on optimising a 360-degree user experience.

It’s easy to see how digital design as a discipline became more focused on execution back then. It had been intimately tied in with build since its infancy, having to compromise on the process of design thinking and problem-solving more often than not, due to the medium’s technical limitations.

Do first, think later

During this monumental leap forward, what was meant to be an exception ended up becoming the rule. Though executional knowledge thrived during the last decade, it also meant a reversed process took root as a standard workflow: ‘do first, think later’. This was a consequence of clients interpreting time to think as money wasted and thus something that had a negative impact on their own product development. 

Many have learned the hard way but it pays well to let designers do their job properly from the start. You need to let them analyse and understand the client’s problem and pain points first, then – and only then – propose a solution that works and delivers the desired outcome. It’s called a process for a reason – when essential steps are missed for the sake of a speedy delivery, it means foundational elements have been forcibly ignored and the chances of a successful output are reduced exponentially.

Many have learned the hard way but it pays well to let designers do their job properly from the start

Concurrently, as design tools matured into web development, it became easier to concentrate almost exclusively on the visual side of digital. This is a mistake and one many clients willingly take at face value. Just because it looks good, it doesn’t mean it works. Equally, just because something works doesn’t mean it’s right. That’s the distinction between good design and none at all, though in many cases it might appear otherwise. 

The combined learnings of the last two decades have brought the industry to a place where tech and design converge harmoniously. It’s finally possible to give due value to design thinking and process, while at the same time building products with an agile approach that benefits all teams involved, the client and, most importantly, the user.

As digital semantics becomes common language at a global scale, universal patterns of behaviour emerge, enabling shared thought structures to be immediately understood, across any physical borders or cultures. Elements on screen become symbols, associated with specific functions that are not limited or defined by a particular alphabet. They’re called design systems.

This article was originally published in net, the world's best-selling magazine for web designers and developers. Subscribe to net here.

Read more:

• Explore top companies' design systems
• 50 awesome new tools for developers in 2019
• The best web hosting services in 2019

View the full article