What is a Design System?2:56 with Nick Pettit
A design system is a set of design components that can be recombined in different forms. From this definition, even things like a fast food menu or a set of interlocking building blocks could be considered a design system, because their individual components can be put back together in different ways.
[MUSIC] 0:00 Imagine you work at a big company that had some success a decade ago with a web 0:09 application for storing files in the cloud. 0:14 And so they created another version of their app for the iPhone, and then for 0:17 Android, and they expanded to even more platforms like smart TVs, 0:22 desktop apps, and voice assistance. 0:26 And now you've been asked to start work on a new app concept that help 0:29 users browse just the photos they've stored on the service. 0:34 And the app is expected launch on the web and maybe other platforms in the future. 0:38 So you start to think about how to design this new photo experience and 0:44 you look back at all the other apps the company has made. 0:49 And maybe there's some design documentation as well. 0:52 But what you find is that there are fifteen different types of buttons, 0:56 no consistent navigation patterns. 1:00 Ten different variations of the same colors and 1:02 lots of undocumented design patterns and components. 1:05 This is the problem that design systems attempt to address. 1:10 A design system is a set of design components that can be recombined in 1:14 different forms. 1:18 From this definition, even things like a fast food menu or 1:19 a set of interlocking building blocks could be considered a design system, 1:23 because their individual components can be put back together in different ways. 1:27 That might sound a lot like a front-end framework or a design pattern library, 1:32 but it's more than that. 1:37 In the context of user experiences, 1:38 a design system not only describes user interface elements or design patterns. 1:41 But it also includes higher level thematic concepts and 1:46 design principles that can describe how it should feel to use an app. 1:50 It could also include detailed notes on writing tone, localization, 1:55 integration of advanced features like augmented reality, and so much more. 2:00 It's a living document meant to encapsulate a comprehensive picture 2:05 of a consistent design experience. 2:10 On a team of one or two people working on one app, 2:13 the benefits of a design system might not be apparent. 2:17 But if your project grows to just a few more people, 2:20 oftentimes working remotely on multiple complicated applications implemented 2:23 on a wide variety of platforms, using a design system starts to become essential. 2:29 It keeps things consistent and it makes things efficient to implement because many 2:34 design decisions are already made for you. 2:38 And you can reuse components and ideally code that's already created. 2:40 That all sounds great in the abstract but what does it really mean? 2:46 In the next video I'll show you what we're actually going to do in this course. 2:50
You need to sign up for Treehouse in order to download course files.Sign up