You're reading for free via Shane P Williams' Friend Link. Become a member to access the best of Medium.
Member-only story
Part 1: first things first
Building a design system — where to start?
Colour, space and typography — these elements are the building blocks for a solid design system. They are distinctive visual elements to focus on when building a brand, but first things first…
(Non Medium members can read this article for free here)
What we’ll be covering…
Part 1 — First things first
Part 2 — Colour
Part 3 — Size and spacing
Part 4 — Typography
Part 5 — Bonus elements
Design Systems
There have been a myriad of articles and content generated around design systems and their benefits, if you are a small startup or a large enterprise, it’s a great idea to start building one. A design system is an evolving ruleset governing the composition of a product and brand. They build consistent, cohesive visual experiences across devices and platforms, they also centralise and consolidate design efforts.
“A design system is a systematic approach that outputs the building blocks for designing in a scalable and sustainable way” ~ Shane Williams
I’m not going to try sell you on why you should use and build a design system, there are plenty of articles that do that. I’ll give some practical advice on where to start and what to focus on as you lay down the foundations.
There are great exercises you can do to get started that help provide clarity on what needs to be built — Nathan Curtis’s team activity is detailed in his article Picking Parts, Products & People and Brad Frost’s interface inventory exercise. But, the need to tackle space, colour and typography is essential to all design systems. These three focus areas are what create distinctive, recognisable and unique brands. When you’re ready to start, begin with these.
But, first things first…
Design tokens
Before getting started, the principle of using design tokens is an important concept to understand. Design tokens are the atomic elements we use to store design related variables that describe things like colour, animation, spacing, fonts, shadows etc.
“Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values […] in order to maintain a scalable and consistent visual system for UI development.” ~ Salesforce
Nathan Curtis does a great job of describing tokens in his article: Tokens in Design Systems — 10 Tips to Architect & Implement Design Decisions for Everyone
Louis Chenais writes about tokens in his article: Design tokens for dummies
Using design tokens to promote collaboration and maintainability of a design system is another article that talks about design tokens by Thibault Mahé. He put together this great presentation on the subject.
Make sure you understand the concept of design tokens before you start, these become the building blocks of the entire design system.
Principles
Good design is also hinged on principles. Principles serve as guidelines, something to adhere to when approaching your design system. Decide on the principles for your approach upfront. This will help illuminate ambiguity and guide you through the decisions you’ll make when building out a design system.
‘Defining brand design principles, a how to guide’ is a good place to start and will help guide you through this process.
“Design principles are the guiding light for any software application. They define and communicate the key characteristics of the product to a wide variety of stakeholders including clients, colleagues, and team members. Design principles articulate the fundamental goals that all decisions can be measured against and thereby keep the pieces of a project moving toward an integrated whole.” ~ Luke Wroblewski
Goals to aim for
I believe every design system should aim for these three goals to help govern the entire system you create:
- Semantic naming conventions that can be easily understood and applied.
- Designers and developers work together — The design system needs to be realised in code. If designers work alone, you’ll have a nice UI sticker sheet, not a design system. Developers will need to consume your design system to build out your product designs consistently.
- Be able to change it without breaking it — abstract hard values and concepts out to tokens, this will allow for flexibility should you decide to change something in the future without breaking everything.
Lets get going…
The 3 main areas we’ll focus on in setting up a design system are; colour, space and typography. Get these right and you’ll have the foundations for building something distinctive, recognisable, and unique to your brand.
Afterwards, we’ll look into a few other elements to expand your system further.
Part 2 — Colour
Part 3 — Size and spacing
Part 4 — Typography
Part 5 — Bonus elements
Further reading, resources and insights…
Deepen your understanding and knowledge before you begin.
