let's start with the definition a design system is a series of reusable elements and guidelines that allow teams to design and develop a product following predetermined standards have you ever worked at a business that had a series of guidelines for different processes did it get hard to keep track of all the rules well design systems help teams combine all of these different guidelines in one place including important information like brand guidelines components color palettes and more for example a design system outlines rules about how to use your company's brand colors in your designs and which colors should be used for icons and typography some of the visual elements frequently included in the design system are color iconography layout copy animation elevation typography and illustration so how are design systems set up most design systems include visual styles guidelines for how to apply them ui patterns and supporting code for developers let's go through each of these in more detail first up visual styles defining the styles for core visual design elements like typography color palettes and iconography helps companies express their brand more consistently this also helps ux designers improve the user's experience next are the guidelines this is where the design principles editorial guidelines and implementation guidelines are defined clear rules about how certain components or styles should be used within a product help designers stay consistent then there's ui patterns ui patterns include elements like text color or icons components which are made up of elements like a button or form label modules which are groups of components like a header with a logo or a navigation bar at the top of the page and templates which are groups of modules put together to form pages in addition each of these sections of a design system usually includes detailed notes about which elements components modules and templates are the most important and how often to use each one and finally design systems support code for developers to help developers build out designs correctly design systems often include the code to create each of the provided elements or components compiling all this information into a comprehensive design system ensures that all the different elements in your designs will carry through to the final product alright now that you're starting to get to know design systems let's explore the benefits of design systems in the next video depending on where you work design systems might be really important in your first job as a ux designer why well there are a lot of benefits of design systems for one design systems create consistency for designers and users when designers are limited to a certain set of elements there's less chance that they'll introduce inconsistencies in the product or the company's brand for example imagine the design system for our dog walker app instructs designers to always use orange buttons with rounded edges in their designs although there are dozens of shades of orange to choose from we've decided to use the color fa7b17 in our design system we've also decided that the text on these buttons should always use the typeface sf pro display by deciding on these visual styles upfront and including them in the design system it's easier for designers to create the buttons and for users to notice them in the product another benefit of design systems is that they help reinforce a company's brand identity design systems keep the visual design elements consistent within a product and across products for example google's design system called google material has four primary colors blue red yellow and green if you open any app on your phone from google like google maps or google drive you'll notice these four colors in the designs you might also notice that all google products use the same font which we call google sans and they favor rounded corners over square ones another benefit of design systems is that they're scalable the term scalable describes a system that's able to maintain performance levels when workload increases this can be particularly helpful at a rapidly growing company like a startup for instance if there's a design system that's already set up with a specific color palette and typography it can be easier to iterate on the design as the product evolves it's also easier to onboard new designers to the team a fourth benefit of design systems is that they save time and money by increasing efficiency for individuals and teams when there's a system that can be uniformly applied to the designs members of a team will have fewer questions about design specifications so the work can be finished more quickly finally design systems help designers and developers work together more effectively before the introduction of design systems projects often hit obstacles when designers handed off their designs to developers these challenges arose because the design and development teams tended to operate independently and each team had different requirements by building a design system together design and development teams are aligned from the beginning this allows a developer to receive a design and immediately know what code needs to be written to bring the design to life it's important to know that not all design teams have a fully developed design system but those that do usually find that it elevates the quality of their interactions and products also the way that you interact with design systems as a new ux designer will depend on the size of the company you're working for at larger companies you'll probably use a design system that's already been set up but if you start out at a smaller company you might be expected to help build a new design system which is a big challenge but also a great learning opportunity whatever size company you work for you should always be ready to follow a design system or contribute ideas to improve an existing system that might mean anything from updating the colors or typography in the style guide to defining components and designing templates coming up we'll explore google's public design system material design which has been used as a model for a lot of other organizations material design is the team i work on so i'm really looking forward to giving you a tour of my world it's important for ux designers to understand how to use a design system in the most efficient way in this video we'll explain design system libraries and how they help designers and developers we'll also explore google's own design system called material design to understand how this works in action material design is a public design system created by google and it's used by designers and developers around the world to create different mobile apps and websites we also have a private version of this design system that's used internally for various product teams it's called google material currently i'm a staff interaction designer on the material design team here at google and as someone who didn't study ux in college i found design systems to be a super helpful way to learn about the basics of good design the guidelines in the system helped me understand the principles of user interface design some companies don't share their design systems with the public but google decided to make these resources public for designers developers and engineers to interact with and learn from so you should definitely take advantage of the opportunity alright ready to explore material design with me to get a better sense of how this all works let's go i'll start by navigating to material.io the materials site has different pages you can explore the design page has lots of foundational guidance for designers about how to use navigation color type systems and more i encourage you to read through these articles in detail to polish your design skills the components page has building blocks that you can download and use in your own designs like buttons and date pickers as you might notice there are a lot of components you can utilize here let's take a look at the buttons component there is a ton of information here for you to explore on your own the material site doesn't just provide a button material also shows you how to use it effectively in your own designs the develop page is next i'm not going to spend much time on this page because it's meant for developers and contains code they can use finally i'll show you the resources page this one is my favorite because there's lots of helpful information for new designers like you it contains links to free downloadable icons fonts a type scale generator and more there are even baseline design kits for figma and adobe xd that allow you to use material layouts and the component library as you're creating your own designs okay cool now let's dig a little deeper i'm going to share a few resources to help you get started let me navigate to the design page and click on material theming one of the main reasons designers use the material design system is because you can customize it to better reflect your company's brand there is a baseline theme that can be used as is or you can customize it as little or as much as you want in order to make the design system work for your product or company for example check out how this simple button has been customized remember earlier in this course when you learned about iconography and i downloaded the home icon from material i downloaded that from materials icon library another great free resource to take advantage of there are over a thousand icons in five different styles for you to use in your apps okay one more tip one of the coolest things you can do on the material design website is explore the color tool to find it navigate to the resources tab scroll down to the tools section and the color tool is here in the top right okay here we go i'm starting with a basic page design that includes an app bar and floating action button with our primary color applied i can preview darker or lighter tones of this color or try out other colors the tool will adjust the text colors automatically for optimal contrast keeping our accessibility guidelines in mind we can make choices about white versus black text depending on the tone of the background color there's even a breakdown of text readability based on large size text versus normal size text feel free to play around with this color tool on your own it's pretty useful when creating mock-ups as a new ux designer you may be working for a company like google that has its own established design system like material on the other hand you might work for a smaller company or startup where you need to help build one now that you know what design systems are and have explored a section of google's material design library you should have a clear idea of the different elements design systems might include coming up we'll explore a design system from another well-known company shopify you've just learned about some of the visual elements like color and text in material design the public design system offered by google in this video we'll explore polaris the design system offered by the e-commerce company shopify offers online businesses services like marketing shipping and payments this design system was created to help designers and developers make seller-friendly products using the shopify platform i'll start by navigating to polaris.shopify.com and i'll land on the home page first as i start to scroll down i'll find the guides section which offers practical advice for designing customer friendly experiences these include guidelines for internationalization which is how to make your product work in other languages and countries and how to design an app to work with the shopify platform next as i continue to scroll down shopify highlights four different parts of their design system let's explore each one briefly now and we'll go into more detail later in the video the content section gives great guidelines for how to choose the best language that goes into the design then there's the design section where you can find all the visual elements like color type and icons that will help enhance your mock-up designs after that you can find the components section it's full of lots of ui components for designers and developers and finally there's the experiences section this includes information about page layouts mobile patterns common error messages and more to meet shopify's guidelines as i keep scrolling down the homepage i'll find the what's new section which is a great place to discover polaris updates and finally there's the resources section here you can find ui kits that can be used for your designs in figma or sketch we'll cover ui kits in more detail later now that you have an idea of where everything is in the design system let's go back to the top of the page and navigate to the polaris foundations page there's a sidebar divided into categories based on key elements to consider in your designs accessibility internationalization information architecture and mobile let's spend a little time in the information architecture section as you learned earlier in the course information architecture is about structuring the content in the design for the best user interaction the information architecture guidelines include a definition of ia why shopify values ia their information architecture principles and more let's scroll back up and check out the content section next this section provides best practices for voice and tone grammar and mechanics and naming there are a lot of helpful tips about content and writing no matter what platform you're designing for then in the actionable language section there's information about the words we should use to guide users to take action in the most efficient way as they use a product okay let's go back up to the top of the page and click on the design section lots of the visual design elements we covered earlier are all here like color typography and sounds you can also explore some of the more technical elements like spacing and interaction states so that's a quick tour of shopify's design system polaris now you have two design systems that you can reference as you continue to build your own designs there are many more popular design systems out there so keep exploring coming up we'll cover sticker sheets which are a collection of different elements and components that go into your design system meet you there you've learned what a design system is and have seen a couple of examples of design systems from google and shopify now i'm going to teach you how to use elements and components from existing design systems in your own mockups in your first job as a ux designer you'll likely use the design system to build your product faster you might use a design system created in-house at your company or a public design system like the ones used at google microsoft or apple either way you'll need to know how to use specifications and guidelines from an existing design system to build parts of your own mock-ups incorporating a design system into your work can take several forms you might include components from an existing design system and just adjust elements like colors or type to match the branding of your design or you might mix some of your own components with some components you pull from a design system you've already seen an overview of what material looks like but let's dig into it we'll use the material design system in figma to pick out a few elements for an alternative version of our dog walker app keep in mind there is a ton to explore when it comes to material design we could spend an entire course on this topic but in this video we'll just talk about a few select things to help you get started i'm going to begin with the material design systems ui kit in figma and start a new file using the kit this kit will be linked in your course readings alright here we go i've landed on the cover page and i'll navigate to the material theme page there are a lot of helpful preset styles here i can customize for things like typography color elevation and states we've discussed typography and color before but let me briefly explain elevation and states elevation is material design system for adding layering or depth to your interface the screen background is usually at zero elevation while a button might be at 4 elevation so it appears to be lifting off of the screen important features like navigation and alerts have higher elevation so they are visible to users this is one of my favorite features of material design so i really encourage you to read those guidelines next we have states states are visual representations that communicate the status of a component or interactive element for example in our dog walker app imagine what a button would look like when a user taps or presses on it we'll need to add states to communicate the status of the button to the user material components use a ripple overlay to provide the user feedback that they have successfully pressed on something interactive there are many approaches to interaction states and material design can be a helpful reference as you make your own decisions okay that's it for the material theme page you'll also notice a sticker sheet page and a components page which we'll talk about in more detail soon now things are about to get exciting i'm going to pick out a few elements and components from material design to quickly create an alternative version of the homepage of the dog walker app to begin i'm going to create a new page and draw a frame for a phone to do this i'm going to click on the frame tool in the top left corner the design panel on the right side will show the preset frame options i'm going to select this one great now that i have my phone outlined i need to add a navigation bar to the top of the screen so let's go to the sticker sheet page i'm going to go to the app bar frame and i'll select this app bar i'll copy it by pressing ctrl and c or command and c then i'm going to go back to my material design for new app page in the left sidebar i'll press control nv or command v to paste it into our new mobile frame great seems like it automatically pasted into the middle of my frame so i'm going to use the align top button on the right side panel to move to the top of the screen next let's add a bottom navigation bar instead of going back to the sticker sheet i can also add this from the assets panel on the left side of the screen since it's been made a figma component if i expand the bottom nav item i see there are a few options available i think this one with the three items will work so i'll drag it from the panel onto our phone frame it pasted into the middle of the mobile frame again so i can press the align to bottom button or i can simply just drag this component down to the bottom of the screen myself these placeholder items for favorites search and information need to be updated to match my dog walker app i might keep the favorites icon and use it for a new list of trusted dog walkers but i have to replace the search and information sections with icons and labels that match my own design like a home icon for the home page and a calendar icon for scheduling a dog walker the idea behind these default icons from material design is to give you a layout that you can adjust as you like you can easily swap out the icons and text to fit the needs of the product you're designing to swap out the icons i'll detach the bottom enough we added to our frame from the main material component to do this i'll right click on the bottom nav and select the detach instance option from the menu next i'll select the search icon and repeat the process to detach it now it's time to add in the new icons luckily i have the three icons we need for the dog walker app already downloaded to my computer from material design so here i can quickly add the home icon for example to represent the home page i'll also want to swap out the text description below the icon it used to say search and now with my new icon i want it to say home for the sake of this demonstration i'm just going to add the home icon but you can imagine how this would work to update the other two icons to match my design needs as well one more thing you might not be able to tell but this new icon is a true black and it's darker than the original two icons let's check what color the other two icons are so we can make this one match if i double click on one of the original icons i can see the color selection in the right side panel it looks like the original icon is colored o3 on primary slash medium emphasis you may be wondering why the color has a name instead of a hex code this is because i'm using a saved color style from the material design color library now i'm going to go back to my new home icon when i click on it i can see in the right side panel that the color of my new icon is zero zero zero zero zero zero so i need to update it to zero three on primary medium emphasis good that's better something else i'll need for this design is a big call to action button this is the button that i want users to click on to begin scheduling a dog walker i'll go back to the components page and search for a button let's try out a signature material design component the floating action button or fab these buttons stay in a fixed position on screen so they're always visible and easily reachable on a phone this button named to extended might work let's try it out on our page let's change this placeholder text of create to schedule to match our app our text is longer than our container now so i'm going to make this button longer to match our label i'll change the width here from 125 to 146. let's place our extended fab closer to the bottom of the screen so users can easily reach it with their thumb i'm going to drag the button down until the bottom is 96 pixels from the bottom of the frame okay what else as i'm sure you can imagine there's a lot more i'll add to this design i still need to add many things like my logo an image of a dog and a list of available dog walkers i'll also need to change the color of each of these elements and components like you learned about earlier so that's it for now it's not a beautiful mock-up but it's a start keep in mind the material kit from google is just one of many you can explore kits from all kinds of companies and find one that works best to utilize in your own mockups as you practice using components from a design system in your own mockups you'll get faster and your designs will continue to look better and better good luck and have fun so far you've learned about the basics of design systems you also explored design systems from google and shopify that you can utilize for your own work in this video we'll explore sticker sheets which are also known as design kits sticker sheets are a collection of elements and components that make up part of the design system what exactly does that mean well here's an example of a sticker sheet for the dog walker app notice how i'm including the colors buttons icons and navigation bars that i use often in my designs carefully documenting elements and components prevents me from making errors or having inconsistencies in my designs so why are these name sticker sheets it's because you can figuratively peel off each element to stick into your design with a simple copy and paste cool right think back to when you designed the first draft of your mockup you might have reused certain elements like text colors or icons and components like buttons these are the kinds of things that you'd put onto a sticker sheet as you learned earlier a component is made up of elements for example a button is a component that is made up of elements like text color and shape have you ever grouped items together in figma or powerpoint to be able to copy and paste the whole group of items that's basically a component in figma components are reusable figma allows you to label the first component you make as the component and refer to any copies of this component as component instances to make it easier to keep track of where my components are i've chosen to place them on my sticker sheet now whenever i make a change to the component the instances will reflect the change as well for example if i change the primary button color from orange to blue in the sticker sheet then the instances that are tied to my main component will update as well this saves me from having to update a dozen buttons whenever i make a minor design change plus it increases that consistency we've been talking so much about as a new ux designer you'll probably want to make your own sticker sheet the good news is that making a sticker sheet is pretty easy to make a sticker sheet create a blank frame then copy and paste the elements and components that are frequently used throughout your design to the sticker sheet for example in the dog walker app i pulled the buttons drop down chips and a walker profile i also need to show the different states for each element or component remember states are visual representations that communicate the status of a component or interactive element notice how there's a white version and an orange version of the reviews icon this difference in color represents the inactive and active states the sticker sheets will be useful to other ux designers working on the designs and to engineers who need to build each of the components using code for example if you start working with another designer on your project having a sticker sheet as a simple style guide to refer to can make communication between the two of you much easier and as your design team gets bigger sticker sheets are super helpful to keep designs across the company consistent that way you won't accidentally create a rectangle button with sharp corners when your teammate used rounded corners plus if a designer joins your team when you're in the middle of the design process they can get started right away with the design elements you've already assigned to the project the takeaway here is that designers use sticker sheets to help make their work go faster and to avoid rework and that's a wrap you now know why sticker sheets are so useful for ux designers and how to make a sticker sheet for your own design congratulations on finishing this course from the google ux design certificate you can access the full experience including job search help and start to earn your certificate by clicking on the icon or the link in the description below watch the next video in the course by clicking here and subscribe to our channel for more from upcoming google career certificates