Exploring Design Systems5:06 with Anwar Montasir
In this video, I'll introduce you to a site called Design Systems Repo and walk you through several examples of design systems.
If you've used a smartphone, 0:00 you've probably noticed how consistently the apps behave. 0:02 Whether posting photos to Instagram, checking the weather, or even toggling 0:06 between apps, iPhone users get pretty used to their apps behaving "Appley". 0:12 Same goes for Android users, tasks from checking email, to sending texts, 0:18 to adding calendar reminders all have that Android feel. 0:23 And when an app behaves differently than the user expects, 0:28 say you tapped the send email icon and a calendar date picker appears, 0:33 the experience feels pretty jarring. 0:38 It's no accident your experience on each mobile platform feels so 0:41 consistent. We have robust design system documentation to thank. 0:45 Both Apple and Google have created design systems for 0:52 each of their mobile operating systems. 0:56 Google's is called Material Design, and 0:59 Apple calls theirs the Human Interface Guidelines. 1:02 Each defines the visual language for the apps, 1:07 interfaces, and interactions on Android and IOS devices. 1:11 Understanding and applying these design systems is critical for mobile designers. 1:16 I've included resources for both systems in the Teacher's Notes. 1:21 But design systems aren't limited to Google, Apple, or smartphones. 1:27 In this video, I'll introduce you to a site called Design Systems Repo, 1:35 and walk you through several examples of design systems. 1:40 Here are a few names you might be familiar with, Audi, 1:46 IBM, Salesforce. 1:55 Let's look at Polaris, 2:08 the design system belonging to an e commerce platform called Shopify. 2:10 If you're checking out this design system, note that it might have changed since I 2:16 recorded this video, but the basic features should still be the same. 2:20 A good design system presents the company's brand values up front. 2:26 The Shopify experience values page lays out the six core 2:31 values to keep in mind when designing for a Shopify store. 2:36 Because UX design reinforces the emotions and 2:42 feelings users associate with a brand, 2:47 many of these terms sound emotional, CONSIDERATE, 2:51 EMPOWERING, CRAFTED, EFFICIENT, TRUSTWORTHY, FAMILIAR. 2:57 If I were designing a Shopify product, I bookmark this page and 3:04 reread these values until I knew them inside out. 3:09 The other sections of the site present guidance on writing, 3:14 designing, and implementing code. 3:18 The CONTENT section describes writing for Shopify products. 3:21 The sidebar lists category names like Voice and tone, 3:26 Grammar and mechanics, Actionable language. 3:31 Each category guides those who are writing content for a Shopify site. 3:35 For example, the Actionable language page includes 3:40 language conventions to keep users moving forward toward their end goal. 3:44 The DESIGN section describes the building blocks of Shopify's visual language. 3:52 Some categories like Colors, Typography, and 3:57 Spacing will appear in almost any design system. 4:02 Others like Sounds are unique to this experience. 4:08 The COMPONENTS section combines the building blocks from 4:13 the DESIGN section to create more complex interactive elements. 4:17 If I were creating a form for example, I would find interface items for 4:23 different operating systems, as well as rules for styling form elements, 4:29 instructions for writing body copy to accompany form inputs, 4:35 and snippets of code to guide developers in building an accessible form. 4:40 So that's a brief glance at one particularly well organized design system. 4:46 And while no two design systems are exactly alike, 4:51 in the next video I'll define the most important parts of design systems, 4:55 the sets of rules that inform a designer's decision making process. 5:00
You need to sign up for Treehouse in order to download course files.Sign up