Design Systems, Pattern Libraries & Style Guides... Oh My!

Style Guides, Pattern Libraries, and Design systems are all anyone is talking about lately, and for good reason. They all share a similar goal of creating a more consistent design process that increases productivity and also effectiveness. Some people don’t know the difference, so let's break them all down.

/// Design system
The comprehensive set of values, semantics, syntax, and context that form the foundation of a shared design language

/// Style guide
The physical or digital document that represents the styles, patterns, practices, and principles of a company/brand and teaches how to use it

/// Pattern library
An organized set of related, reusable components, often containing code examples, design guidelines, and use cases

////////////////// Style Guides
Foursquare Style Guide

Animal PLanet Styles Guide

////////////////// Pattern Libraries
Pattern Library

MailChimp Pattern Library

Bootstrap

////////////////// Design Systems
Shopify Polaris

Lightning Design System

Carbon Design System

////////////////// Helpful Links
Atomic Design | Atomic Design by Brad Frost

Website Style Guide Resources

Building a Visual Language – Airbnb Design

------------------------------------------------------------------------------------

////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...

////////// Connect with me here 👍🏼

////////// Sign up for my Monthly Newsletter 📫

////////// Music is from Musicbed click below for a free trial 👇🏼

////////// Equipment 📸

[kmondragon]

Thanks Jesse, I have learned more watching your videos than I have at school in 6 months. The way you explain things make it easy to understand hard concepts.Please keep posting your videos.

[noisydoll]

I mostly got it, but then you explained the idea of being able to understand the game of Foursquare enough to iterate on it, and then it really all came together. Awesome. It's such a joy to arrive at an "aha" moment like that.

[TheScottGordon]

Best explanation available! Even with examples and links to check out examples. My hero!

[jerembardonify]

Congrats ! Awesome explanation, thank you Jesse :)

[auj]

This is exactly what I was looking for! I woke up this morning like I need to create a “mood board” for my brand. I didn’t get it done but now I will.

[TheTallFern]

Starting my design experience now with Avocademy and they had this video on their program for Design Systems, loved this video and the thought of extreme four square haha. Thank you for the information!

[NyuvelUX]

Thank you very much for these explanations

[amina]

This is awesome ! great teaching skills !!!

[Almoran]

Thanks so much! I was looking for a good analogy for DSM. Thanks!

[Cascadia]

Love your delivery style! This newbie learned a ton🤣 and you’re hilarious 😂...

[wise_nut]

You deserve more likes and subscribers. *You just got one*

[SpazValle]

this was very helpful! My UX bootcamp recommend we watch this!

[nyhaydi]

So great. Thanks so much and you deserve more likes. You just got one ;)

[empoweredrachel]

YES YES YES! Thank you so much for this video! Would love more of these 'technical'/ 'things you actually work with in workplace' informational videos! Time to flex your UX! :D

[mehradlajevardi]

just love your energy man :))) God bless brother

[FinallyFreelancing]

Great Video. You motivate me to make better videos about ux / ui! Thanks for that!

[la_]

Ah great video! Yes it is totally a hot topic right now. What I find hard it when to stop and work the design system and at what size of the project demands a design system. Trying to figure out what is the best process for setting yourself up from the get go! lots of things to consider :D

[RoyalNatangwe]

for a second there, i was contemplating about my hygiene when i saw the wallpaper

[jesset]

So, "Brand Guidelines" and "Style Guides" are the same thing?

[icugab]

Thanks so much for the great explanation! Question. Do you see companies having both a Pattern Library and a Design System? I'm thinking that if your company starts to transition towards a Design System, the only people who are really using the Library are the designers, perhaps. What are your thoughts?