UI Design Systems Mastery v3 [3 ed.]

Citation preview

n o tt u B

n o tt u B

1 h h 2 h 3 s

le

b

a

ri

a v

UI Design

Systems Mastery Mastering Design Techniques to Stay on Top of the Market

Marina Budarina

Table of contents Version 3.0. Last Update: Jul 8, 2023.

Introduction

08

Part 1 - Introduction to Design Systems

18

History

19

What is a Design System

27

Definition

28

Parts of the system

30

Examples

40

Do you need a design system?

43

Benefits

44

Challenges

45

Signs that you need a Design System

46

What to consider?

47

Terms confusions

50

“Component” vs “Pattern” library

51

“UI kit” vs “Design system”

51

Part 2 - Preparation & setting of the base Important notes Audit

Table of contents

56 57 58

02

What is a design audit?

59

From where to start?

59

The ways you can do the audit

60

How to organize and categorize?

60

Audit checklist

65

Understanding problems and needs Setting goals and framing the system Design system team

67 69 72

How big should the team be?

73

Team roles

73

Team types

75

From where to start

76

Design system principles and rules

79

How to define principles?

80

Suggestions

81

Part 3 - Foundations

85

Tokens

86

What are design tokens?

87

When should you and shouldn’t use tokens?

90

Tokens’ benefits

91

Token types

93

Naming conventions

95

Table of contents

03

Naming conventions Theming: what and how

97

Do’s and don’ts

99

Tokens implementation Colors

101 103

Glossary of terms

104

Keeping branding in mind

105

Color psychology

106

Creating a base color palette

109

Creating tints and shades

113

Naming conventions

119

Creating color styles

121

Limiting Tint & Shade Quantity

123

Accessibility

126

Tokens

131

Light and dark themes using tokens

135

Typography

142

Choosing a typeface

143

Best typefaces

148

Size units

150

Building a type scale

156

Line height

159

Naming conventions

161

Building a typography system

162

Table of contents

04

Creating Figma text styles

166

Building a PRO typography system

169

Documentation

176

Spacing

180

Glossary of terms

181

Defining a spacing system

183

Naming conventions

186

Spacing Tokens

188

Spacing usage

189

Figma tips

191

Grids and layouts

194

Glossary of terms

195

Breakpoints

197

Grid types

199

Layout types

201

Creating grids

204

Complex layout grids

213

Grid Tokens

218

Part 04 - Components, patterns, templates What to consider before creating any component

222

Not so atomic approach. There is a hierarchy.

223

Naming conventions

227

Table of contents

05

Scalability

228

Connecting Tokens

229

Documentation

230

Components

232

Core and compound components

233

Component categories

234

From where to start

236

Creating components. Button. Method 1

237

Creating components. Button. Method 2

242

Testing components

247

Patterns & templates

254

What is a UI design pattern?

255

Common UI design patterns & how to apply them

255

How to create UI design patterns

259

Where to find existing UI design pattern libraries

260

Dark design patterns

261

Templates

262

How to create templates

263

Pages

264

Part 05 - Documentation

268

Documentation

269

Table of contents

06

Part 06 - Implementation & scaling

286

Adopt, Adapt or Create

287

Tips for freelancers

301

Part 07 - Variables

New Part

308

What are Variables?

310

Types of Variables

312

Types of Tokens

313

Organizing variables with collections, groups & modes

314

Tips for creating variables

316

Color variables

327

Number variables

335

Boolean variables

342

String variables

347

Simplifying components using variables: mixed modes.

349

How variables can be used

354

Outro - Final words

358

Copyright © 2023 Marina Budarina. All rights reserved.

No portion of this e-book may be reproduced in any form without permission from the publisher (Marina Budarina).

Introduction Hey there,

I am Marina Budarina - a digital product designer and creator of this e-book. First and foremost, thank you for trusting me and purchasing my content to be a part of this learning journey.

That’s me!

And here is my

Great to see you!

Instagram

@marina_uiux

Before we dig into the theory and practice, I want to tell you a little about my journey, the obstacles I have met, and my vision - to encourage you and give light on why I wrote this e-book.

My vision

First, I am from a small city in Kazakhstan.

Second, I am a software engineer - that is my initial degree.

Third, I am a self-taught designer.

I began my self-taught journey by gathering information from different sources, applying them in the form of practical solutions, and eventually spending hours and hours figuring things out on my Introduction own. It was

not easy, but I got through it.

08

Third, I am a self-taught designer.

I began my self-taught journey by gathering information from different sources, applying them in the form of practical solutions, and eventually spending hours and hours figuring things out on my own. It was not easy, but I got through it.

To make it less complicated and easier to navigate this field for many beginners and professionals alike, I conceptualized and brought this e-book to life. It aims to gather all the ideas and concepts that have profoundly helped me and that you can use in your design journey.

All your experience matters, and all of it will help you.

I have done many different things in the past, some just as a hobby, some I took very seriously. But all of it made me who I am. And if you think you are a zero at something - you may be wrong.

Experience Culture

Inter ests

Skills

You

≠

Zero

ies Hobb

Initially, I needed to gain experience in the design itself. Still, I did photography, knew Photoshop, had an eye on aesthetics, was creative, had communication skills, understood programming, learned psychology, etc.

Introduction

You do know something, and you do have skills. Let them be your

09

Initially, I needed to gain experience in the design itself. Still, I did photography, knew Photoshop, had an eye on aesthetics, was creative, had communication skills, understood programming, learned psychology, etc.

You do know something, and you do have skills. Let them be your strengths.

If you do something - be committed. Otherwise - quit.

If you are 100% sure that something will not be helpful or you do not want to do that, just quit. Because even if it is applicable, you have already decided, in your head, that it is not - you framed yourself.

For example: only go to a lecture or a masterclass if you are going to pay attention, if you are going to commit, and if you haven’t come just for the sake of being there.

During my university program, I was one of the best students. But you know what? I skipped classes that I did not find helpful or those that were giving low value to me. I did that not because I was lazy: I worked a lot, earned money, and learned things on my own. But in a better, more efficient way. I valued my time and effort and did not want to waste it.

As a result, I could do more, and I did it well. Teachers loved me, and I was happy.

Introduction

10

My design journey At the beginning of 4th year, in parallel with my university program, I got into design.

How it started: my friend asked me for “help” - to create designs for Instagram posts. After that, I began to explore design more, just for fun. I designed some websites and even posted some of my works on Instagram - initially, it was just a hobby.

Next, the same person asked me to design a taxi app. I have not been paid. However, that was a significant step, after which I gained some confidence and started to get some projects from Instagram.

After a while, I got into one of my first big projects - a start-up (SunnyPeople). We were creating a product for brands and influencers to run their business on Web3.

How did I land this job?

What helped me? Design skills - maybe, communication - mindset - perhaps. But it was all together, all my previous experiences, that made me who I am. That is what let me in.

But to use actual data and not rely just on my assumptions, I have asked the manager, and here is what he said:

“1. Ability to understand the product and customer and put yourself in the customer’s shoes.

Introduction

2. Proposing structure and steps rather than jumping straight into

11

But to use actual data and not rely just on my assumptions, I have asked the manager, and here is what he said:

“1. Ability to understand the product and customer and put yourself in the customer’s shoes.

2. Proposing structure and steps rather than jumping straight into UI and drawing.

3. Resourcefulness: You never design based on your knowledge, but you are resourceful and always see what other apps and products do and consider that.

4. Not afraid to push back and provide your opinion based on your intuition and experience. Junior people typically accept everything managers say and never offer their opinion. Managers (or any human!) can be wrong many times. You used to tell me. You disagreed and preferred another method/approach (of course, in a respectful way).

5. Coachable: You are very coachable, take feedback, adapt, improve, etc.

6. Kind: Last but not least, you were a nice and kind person who was pleasant to work with. We had fun, we joked, and you were a good team member. That is very important for me, too, and teams in general as well.”

So it was not so much about actual skills but all my knowledge, values, and experience that allowed me to think and act in a specific way.

So here my Introduction

idea or vision takes place:

12

values, and experience that allowed me to think and act in a specific way.

So here my idea or vision takes place:

No matter what you do, the more diverse your knowledge and experience are, the better.

That allows you to see problems from different perspectives, provide better results and grow faster.

This is why knowledge about design systems will be helpful not only to designers but to developers, managers, owners, etc.

So let’s keep going with the experience.

Most of the time, when you work freelance and in start-ups - you are the only designer in a team. That was the case. So I’ve started to work from 0, doing research, analysis, IA, wireframes, and eventually UI.

And here we get closer to the design system…

There are problems that you may not face in small projects or when you are a junior designing only several screens, but trust me, when a product is big and grows, the wrong approach and flawed system can create a lot of trouble.

Simple example: when there are a lot of the same screens, and if your team at some point decides to change one color, change a component, or add some tiny element - it will take you hours of tedious work to change it on all 100+ screens. Or if you did not agree at the beginning on how the pop-up should work or what Introduction happens on

bigger screens - it will require extra time,

13

communication, and energy, which you may not have at this point.

Simple example: when there are a lot of the same screens, and if your team at some point decides to change one color, change a component, or add some tiny element - it will take you hours of tedious work to change it on all 100+ screens. Or if you did not agree at the beginning on how the pop-up should work or what happens on bigger screens - it will require extra time, communication, and energy, which you may not have at this point.

If there is some complicated labeling system in the design, you may explain it once, but in a month, everyone will forget, you will have to repeat it, or even worse - you will forget. And if you will leave the project - this information will stay only in your head…

Do you see?

Instead of being a designer that creates a good product, you become a pixel mover.

There was a lot of work, and my time was limited. So from my side, I did everything to simplify the process.

I have created color and typography styles. I was turning elements into components as I was designing UI. I did that back then only to enhance and speed up my workflow and keep things consistent while just reusing parts I have created smartly.

And I knew if I needed to change something - I would not have to go through each screen repeatedly. I will change it in one place and done. Easy and quick.

So as I was Introduction

simplifying my design processes, documentation came14

into place. And here is a big thanks to one of the best managers I

while just reusing parts I have created smartly.

And I knew if I needed to change something - I would not have to go through each screen repeatedly. I will change it in one place and done. Easy and quick.

So as I was simplifying my design processes, documentation came into place. And here is a big thanks to one of the best managers I have worked with, who became for me a very good friend: Ramzi Assaf. He was very involved in the process and forced me to document some rules on confluence (we used Jira (Atlassian) for our product management). So I started to put some notes in Figma as well for each case.

This way, I didn’t have to spend much time explaining my reasoning and components usage rule over and over again. I also did not keep redundant information in my head, reducing mental overload.

Bit by bit, We were creating a design system. But, of course, it was not complete or perfect. And as you see, I did not know much about design systems back then, and it was an outcome, a need, that made the whole process easier, organized, and helped the entire team. A design system was a need, and as a result, that made the whole process easier and organized and helped the entire team.

Introduction

15

What to expect? In this e-book, I will tell you about: what a design system is, why you need or do not need it, what purposes they serve, from which components it consists, how to build your design system most efficiently, and how to use it.

You will understand how to collaborate with the team, communicate with clients about the design system's needs, and explain its value.

And as a result, you will be able to build design systems from scratch or make a reusable design system for your future projects.

You will be able to improve your skills and knowledge, increase your efficiency, work faster, create better products and provide better results, get a promotion or a better job, impress your clients with professionalism, and go to another level of your career.

You will learn how designs and prototypes are meant to be translated into code, speed up the development process, and reduce misunderstandings during the handoff.

If you are a non-designer, you will get a solid foundation and will be able to break into UI/UX, product design, or even managing processes.

Introduction

16

Key takeaways No matter where you're coming from and what are your current conditions, nowadays you can learn from any country, become a good specialist and change your life. But it will require some diligence, hard work, and discipline. All your experience matters, and all of it will help you. The more you know - the better. Diverse knowledge is a key to a broad outlook on life and problems, which will help you to become a great specialist Knowledge about design systems will be helpful not only to designers but to developers, managers, owners, etc If you don't create a good foundation and suitable processes for the design work, you can quickly become a pixel mover; instead of being a designer that focuses on logic, structure, UX, and UI For me, a design system was a NEED that made the whole work process more manageable and organized and helped the entire team.

Introduction

17