What is a Design System?7:28 with Anwar Montasir
A design system is a set of rules that guide the design of a web site or app. Design systems help create predictable experiences for users, and help designers work more efficiently and build interfaces consistent with an organization’s visual brand without wasting time exploring design problems that have been solved already.
Bespoke solutions: individual approaches to individual problems
Interface inventory: a document comparing screenshots of visual design attributes and interface elements across various websites and apps belonging to a brand
Design system: a document providing a set of design principles and clear standards for visual styles and interface elements
Design debt: inefficiencies caused by inconsistent and non-reusable styles and conventions.
[MUSIC] 0:00 Hi, my name is Anwar. 0:09 I'm a designer, a developer and a teacher at Treehouse. 0:11 In this course you'll learn the fundamentals of design systems, 0:15 what they are and how to understand them. 0:18 A design system is a set of rules that guide the design of a website or app. 0:21 Design systems help create predictable experiences for users and 0:27 help designers work more efficiently. 0:31 And build the interfaces consistent with an organization's visual brand 0:34 without wasting time exploring design problems that have been solved already. 0:38 Imagine sitting in an art classroom. 0:44 At each table is a bucket of clay. 0:46 The teacher asks each student to take some clay and build a house. 0:49 No further instructions, just grab some clay and get building. 0:54 That's a lot of freedom, right? 0:58 But freedom, total freedom can get messy. 1:00 One house might have almost nothing in common with the next. 1:04 Now imagine the same scenario. 1:08 But replace the clay with a bucket of Legos. 1:10 Legos have parameters, they tend to be rectangular and 1:14 to interlock in a certain way. 1:18 Students can still follow their own unique vision. 1:20 But thanks to the restrictions inherent to building with Lego bricks, 1:23 you'll notice a lot more similarities and 1:28 probably more structural soundness in the Lego houses than the clay ones. 1:31 In UX design terms, clay houses are bespoke solutions, 1:36 that is individual approaches to individual problems. 1:40 Let's look at a real world design example. 1:46 In 2015, a design team of federal employees called 18 F, 1:50 examined nearly 30,000 websites belonging to the United States government. 1:54 The designers began their examination with an interface inventory. 2:02 They took screenshots of visual attributes and interface elements 2:08 across the various websites and created a document comparing them. 2:13 This interface inventory document revealed a totally bespoke process. 2:18 Each site is created from scratch, without consideration of the appearance or 2:23 behavior of existing government sites. 2:29 In total, the 18 F team documented 32 different shades of blue and 2:33 64 different types of buttons. 2:38 There was little to no consistency in the design of these sites. Talk about messy. 2:41 In addition, imagine the duplicated effort as each designer for 2:48 each site had to arrive at their own visual language, 2:53 their own solution for the same interface elements. 2:57 In essence, they were reinventing the wheel for each site. 3:01 Now imagine that these designers had guiding principles that helped them work 3:06 more quickly and create consistent user experiences. 3:11 In other words, swap the messiness of clay for the consistency of Legos. 3:15 To do this, the team from 18 F came up with a design system. 3:22 A design system is a document providing a set of design principles and 3:28 clear standards for visual styles and interface elements. 3:33 Many design systems also provide code snippets to help developers 3:39 create interactive components, as well as voice and 3:44 tone documentation to guide copywriters. 3:48 Design system components should be reusable, repeatable and stackable. 3:51 When I say stackable, I mean design system components can be assembled together 3:58 to build any number of applications, like working with Lego bricks. 4:04 Here's the United States Web Design System site. 4:11 I see categories of design guidelines, 4:14 as well as a showcase gallery of sites built to these specifications. 4:17 The design tokens tab contains rules for applying color, type, spacing, and more. 4:23 These rules establish a common visual design language for 4:30 all government websites and apps. 4:34 Imagine I'm designing a site for 4:37 the federal government and wanted to include a blue color in my design. 4:39 Instead of picking just any blue, I'd reference this document under 4:43 theme color tokens to identify a blue that fits the design system. 4:48 What if I needed to add a button to my design? 4:54 Not long ago, 4:57 designers for the federal government used 64 different styles of buttons. 4:58 But now, the design system provides greater consistency 5:03 with a limited set of options listed here under components. 5:08 This limited selection is a good thing as it creates a more uniform 5:12 experience across federal government sites for the user. 5:17 Defining clear standards remove subjectivity and 5:22 ambiguity from the design process. 5:26 And steers designers towards a product that only looks better, but 5:28 one that is more user-friendly and even more accessible. 5:33 Design systems also increase designer efficiency. 5:38 Since many basic design decisions are already made for you, you can reuse 5:42 visual styles, UI components, even code that's already created. 5:47 Working from a design system minimizes what designers term design debt. 5:54 Design debt refers to inefficiencies caused by inconsistent and 5:59 non reusable styles and conventions. 6:05 Inconsistency slows down the design process and 6:09 negatively impacts the users of your site or app. 6:13 Your goal in guiding your user through an interface is as many mindless taps or 6:17 clicks as possible. 6:23 No hesitation, no contemplation. 6:25 A consistent experience conforms to user expectations and 6:29 leads to a more confident user. 6:34 An inconsistent interface on the other hand, one where interactive cues 6:38 go missing, show up in unpredictable places, or are designed or 6:43 labeled in a way that obscures meaning, creates obstacles in the way of usability. 6:48 In your role as a UX designer, you'll likely be tasked with applying 6:55 the standards described in a design system in order to build apps and products 7:00 that can be pieced together efficiently like Legos with a minimum of design debt. 7:05 And a maximum of visual consistency. 7:11 We'll learn more about the individual parts of the design system 7:15 in our upcoming lessons. 7:18 And if you'd like to learn more about design system 18 F created for 7:20 the US government, check out the links in the teacher's notes. 7:24
You need to sign up for Treehouse in order to download course files.Sign up