5 Best Design Systems and How to Learn (and Steal) From Them

design systems are all the rage right now but what most everyone is discussing is what they are how to design them and why you should use one but there's something that no one else is really talking about but i'm going to right now [Music] hey designers it's elizabeth from designer up helping you level up your product design skills so first what is a design system in a nutshell a design system is a design language that consists of a collection of articles posts ui kits design snippets documents examples explanations guidelines values principles and other digital assets of a product design company it's usually hosted online as a website that's public or private and internal think of it as a big knowledge base that's like a ui kit plus coding principles and examples and guidelines all wrapped up together a design system gets created in collaboration with an entire product team that means programmers engineers product managers the c-suite team they all come together as a committee to take inventory of their current digital product design assets they come to a consensus about what else they might need and how things ought to be designed presented coded and talked about but beyond creating and implementing a design system for yourself design systems are a tremendous untapped resource for learning how to create better user experiences and interfaces just by studying them at designerup we've been framing design systems as a teaching tool with our product design students to help them better understand explore and learn the best practices and principles of ui ux and product design from some of the best companies in the world here are five of our top favorite design systems and how you can learn from them number one google material design system google's publicly shared material design system paved the way for many to follow google categorized and cataloged components in a way the design world had never so succinctly seen before they made the mistakes so you don't have to and gave order and meaning to the atomic design principles that all design systems are built on today they call it material design because it's meant to be a metaphor inspired by physical world textures and actual material how light reflects and casts shadows etc material design has four main areas design components develop and other resources if we look at design we have the material system here which shows you an introduction to the principles and components theming typography and everything that makes their system material studies show the different styles that they use for their systems there's basil which is recipe app crane which is great for travel apps fortnightly perfect for news topics which is great for educational content so as you can see they've categorized this based on the branding the color schemes the typography and labeled it for different industries and styles of design drilling down deeper you can look at their navigation transitions for navigation search patterns and then moving into their color systems applying color to ui dark theming and the list goes on with typography sound iconography scrolling back up to the top we get to dive into the actual components this is such a valuable section because we all use these as universal patterns in our ui designs so if you are just starting a project or a design and you need to design a date picker for example what better way to understand best practices and principles for date pickers than looking to google themselves so you can see it's basically like a course in ui and ux design you can go into the principles behind why the date picker is designed the way that it is the actual anatomy and the parts and elements and components that should be in a good date picker and you can also understand behavior by looking at their animations and micro interactions and you can do this for every single component and element you can think of whether you're having trouble organizing a lot of data into data tables or you're making a menu or submenu or navigation it's all here from tabs and text fields to tool tips and banners everything you need to know that's been tested by google themselves is in here so one way to use this is to go back to the design section and let's say you're designing a retail ecommerce or fashion app check out shrine and you can get an idea here about how they brand and lay out and create all the components that go into creating a retail app so this is great if you're trying to design a shopping cart system a checkout system and you're in that industry of lifestyle of fashion you're not only getting amazing examples of design patterns but you're understanding the user experience behind it the intention behind it and the interactions this is an amazing explanation of the grid system that's being used so if you're trying to understand responsive design padding column sizes gutters this is a great study to help you do that you can learn so much about typography scale the size that your headline should be versus the size of your body text and if that's not cool enough you can download these actual resources and design source files on the resources page this design system is a powerful learning tool and study so i highly recommend you check out material design number two design system one of my personal favorite design systems is by atlassian atlassian makes project management and collaboration tools like jira and trello while not quite as big and intricate as google's material design you can learn a lot about brand guidelines design principles and how to design products that are in the collaboration and project management space so as you can see most of the design systems are laid out in a pretty similar fashion kind of like a knowledge base that groups things into categories so if we take a look at product this is where you'll get to see more of the components and foundations and just like google design you can drill down into how they design text feels toggles tool tips i'm a big fan of their style and the color palettes that they use and their typography so this is another one for you to dive into to get inspired by and understand user flows that go into creating project management software number three apple's human interface guidelines another massive design system is apple's human interface guidelines these guidelines allow you to take a closer look at operating systems including mac os and ios and going into this you'll see a lot of the same components and visual design guidelines and i think where apple really excels here is in their resources lots of things to download lots of different source files for various design apps and software so this is a great one to explore and to look at different devices smart home things and operating systems number four mailchimp design system mailchimp is another great one to reference if you're working on a project in the realm of email marketing business ads mailchimp can provide some really useful tips and examples of how to have great ux while still pushing the boundaries of expression and creativity there are a lot of innovative design ideas to pull from here and ways to make complex tasks and data visualizations a lot more digestible and accessible through approachable and intuitive ux so check this out if you're having trouble designing charts or other data visualizations it's a really great reference and finally number five help scout design system scout system is much smaller and compact than the other ones we've looked at but i wanted to leave you with an example of something that you can create on your own maybe you're starting your own design system or you're just a team of one or two this is a great way to start thinking about your own components your values and your brand guidelines help scout is an online support ticketing system and it's a help desk with a really seamless customer experience here you can explore their design handbook and get an idea of colors logos typography i particularly like their color spectrums and color systems and you can also look more into their content principles imagery language style guides etc so those are five really great design systems that you can explore learn from and copy and steal and there are a lot more in the article on our blog so head over to designerup dot co slash blog to explore more design systems believe it or not there's even more to product design than what's found in a design system including things like user research user flows information architecture and much more so if you really want to understand and master all this design stuff come have a look at our instructor-led product ui ux design master course you'll start with a custom learning journey and strategy session get direct feedback on over 74 original lessons covering everything from user research visual design business principles and strategy interaction design and more you'll be guided every step of the way with one-on-one sessions from your personal instructor get hooked up with a bunch of discounts to all of the best design software like sketch figma and envision and start building an original product and case study for your portfolio so you can launch your design career with success have you ever been inspired by a design system or maybe stolen from one before let us know in the comments and if you enjoyed this content don't forget to subscribe and click the bell to be notified when we release more videos like this thanks for watching and i'll see you again soon you

Channel: DesignerUp

Views: 26,029

Keywords: Design Systems, Design System, Material design, Product Design, UI, UI design, Design Systems Tutorial, Design system UI, Design systems ui, Design System Sketch, Design System Figma, Design system XD, Design system Adobe XD, create a Design System Sketch, create a Design System Figma, What is a design system, color palette, Material design tutorial, Material design system, Learn UI, design systems ux, design systems london, user experience, How to create a Design System

Id: BISC15OPeGA

Length: 11min 14sec (674 seconds)

Published: Thu Aug 13 2020