Intro— duc— tion

Laying the Foundations covers what design systems are, why they are important, and how to get stakeholder buy-in to create a design system. It introduces you to a simple model, and two very different approaches to creating a design system. What’s unique about this book is its focus on the importance of brand in design systems, and creating documentation. It’s a comprehensive, practical guide that’s simple to follow and easy on the eye.

I’ve been designing and building websites, working on products, and creating design systems for over 15 years. During that time:

I’ve seen things go so wrong, so many times. I’ve learned from those experiences, and worked with others to fix the problems we’ve encountered.

I’ve spent a lot of time learning, assimilating, and distilling all that I’ve learned down to its simplest form. I’ve sold the value of simple system design thinking, models, terminology, and values to designers, developers, and stakeholders.

After years of this, I’m left with dozens of Keynote decks, Google Docs, design systems docs, style guides, design files, code, scars, bruises, lessons learned, enemies, friends, and a head full of thoughts.

I decided to do something meaningful with all that experience. I sincerely hope you enjoy this book, and that it helps you and your team! :)

This is real talk about creating design systems. No jargon, no glossing over the hard realities, and no company hat. Just good advice, experience, and practical tips.

Real talk

Perhaps my “real talk” approach is because of my roots: I was born and raised in the industrious north of England, where people value hard work and plain speaking. Or perhaps it’s all my experiences — good and bad — that have shaped the way I think and talk about designing and building websites and digital products.

I don’t like jargon. I like to keep things simple. Nowhere is this more important than in system design, where communication and collaboration are essential. The simpler you keep things, the more successful you’ll be. This is a theme throughout this book, from the design system model and terminology, to practical steps, to working with your team.

I could tell you how to design, build, and document a design system for yourself, as a personal project. It would be awesome, but I doubt that’s a reality for many people reading this book. Chances are you work on, or lead a team at a company... Or you plan to.

The realities of working in-house at companies — especially large companies — are often very different from the rosy perspectives we read about on Medium and company blogs, and hear about in design talks. These stories are told by people wearing a company hat, who can only say generally positive things about their experience. They don’t talk about office politics and other hard realities. I don’t work for anyone but myself. I’ll tell you — honestly — how to navigate the challenges of working in-house, with stakeholders, deadlines, legacy problems (design, code, and people!), and all the other fun challenges we encounter along the way.

I’ve been in the creative trenches, fighting for the designers and developers on my team, the brand, and the users. I’ve defeated the odds to create beautiful and meaningful work. It’s not always easy. In fact, it’s often very hard, and very tiring. Sometimes it even feels hopeless, but perseverance and the arsenal of knowledge you’ll learn in this book will set you in good stead to create the best work of your career!

Who is this book for?

This book is definitely more design-focussed, but we’ll be delving into the whole process — which involves much more than just design.

Selling, managing, and advocating are key to the success (or failure) of a design system. You can design a system in a matter of days, but you won’t get much further without the support and collaboration of developers, product managers, and other stakeholders. This book will help you reach and collaborate with these stakeholders.

We’ll cover brand and digital guidelines, and how to create, document and roll out a design system. This book will also prepare you for how to build your team, and set your system up for success.

Building, integrating, and launching a design system is arguably the lion’s share of the work. We won’t be covering development processes or writing (much) code, but we’ll certainly look at the overlap of design and development. It’s important that design and engineering teams work together, which is a theme throughout this book.

The role of development in design

A design system will go nowhere without developers. A beautifully designed library of design components is useless if it lives only in design software and documentation. It has to be built, deployed, maintained, and scaled. Do you want to create a design system? Developers are your new best friends (if they’re not already, which they should be).

Development should always be part of the design process. Designers and developers working in silo — or even physically separated from each other (in the workplace) — is bad for team culture, as well as the quality and efficiency of the work.

With any form of digital design — but especially system design — I encourage you to discard this (lazy) notion of ‘the developers will figure it out’. Involve developers. Get them interested in building the system with you, not after you’ve finished designing it. We’ll talk about this more throughout this book.

Technology moves too fast for print

This book intentionally avoids referencing specific tools or software, save for a few exceptions. Technology evolves so fast that anything I reference may be obsolete by the time you read this! (Hello, it’s 2018/19 as I write this).

That said: the supporting website for this book includes links to design system tools, resources, and articles relating to system design. They, at least, will remain current.

System design is not a scary thing

A good place to start is to discard this notion that system design is a scary process, or an exclusive club for the design elite. System design is nothing new. Unlike responsive design, Sass, CSS Grid, or Flexbox — nobody invented system design. It’s just a term our industry has given to cover the processes and habits that lead to the most efficient digital design, development, and management. That’s all.

Feel better? Good :)

Systematic design

It might be easier to view system design as ‘a systematic approach to design’.

What is system design?

System design is about not tackling design problems in isolation, or as one-offs. It’s about considering versatile solutions that can be used repeatedly and consistently throughout a product. It’s about not creating a different way to solve the same or similar problem every time you come across it.

What is a design system?

A design system is the end result of a systematic approach to design. It’s the harmonious package of design, code, guidelines, and documentation that’s used to build consistent, on-brand, and efficient websites and products.

The sobering reality

Here’s the thing — and, sorry, this is the brutal and honest truth: if you’re a designer working on websites, products or apps, and you’re not designing (at least somewhat) systematically — you’re doing more harm than good.

Every time you design a different (unnecessary) solution, you’re adding more complexity to the code. This leads to legacy problems. Future edits will be harder to make. Shipping new features or iterations will take longer. Page load times will increase. The user experience can be diminished. You get the picture.

You’re halfway there!

The good news is, you may already be designing systematically without even realising that’s what you’re doing.

...and stick* to those design choices — you’re designing systematically.

If you design systematically, you’ll be a better digital designer for it. You don’t necessarily have to create a design system, to ‘do’ system design! Not every project requires a design system. We’ll get into this more throughout this book, but just keep in mind: even if you don’t need a design system, don’t currently have one, or your company won’t grant you the time to create one, you should still take a systematic approach to design.

* To clarify: by “stick”, I don’t mean permanently. All design choices are subject to change and iteration.

This book will help you and your team

This book is about levelling up as a digital designer by taking those extra steps to go from designing systematically to creating a design system.

This book will help you formulate and document the design choices you and your team make. After all, a system wouldn’t be much of a system without rules. Remember: the systematic design choices you make are no good just in your head — especially if you’re working with a team.

We’ll look at the importance of brand in system design — first by creating digital brand guidelines, then building design systems upon those solid foundations.

You’ll learn about creating a design library of system elements that will enable your design team to work quickly, efficiently, and consistently.

I’ll coach you on how to adjust your design system pitch to different stakeholders at your company in order to gain the support and momentum you need to succeed.

You can design a system in a matter of days, but you won’t get much further without the support and collaboration of developers, product managers, and other stakeholders.

We’ll talk (a lot) about the importance of finding your team, and working together to identify the problems in your product and processes — and practical things you can do to fix them. We’ll even look at two different approaches to these problems: an ‘iterative’ approach, and a ‘wholesale’ approach.

And throughout this book, I’ll share lots of real examples of design work, documentation, and best practices to illustrate the concepts covered.

Interested to read more? Buy the book here

Buy the book