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.
Remember to Subscribe goo.gl/6vCw64
/// 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
playfoursquare.s3.amazonaws.c...
Animal PLanet Styles Guide
logoblink.com/wp-content/uplo...
Barnes & Noble portacreativeserver.com/vault/...
////////////////// Pattern Libraries
Pattern Library
natashahockey.github.io/patte...
MailChimp Pattern Library
ux.mailchimp.com/patterns
Bootstrap
getbootstrap.com/2.3.2/
////////////////// Design Systems
Shopify Polaris
polaris.shopify.com/
Lightning Design System
www.lightningdesignsystem.com
Carbon Design System
carbondesignsystem.com/
////////////////// Helpful Links
Atomic Design | Atomic Design by Brad Frost
atomicdesign.bradfrost.com/tab...
Website Style Guide Resources
styleguides.io/
Building a Visual Language - Airbnb Design
airbnb.design/building-a-visu...
------------------------------------------------------------------------------------
////////// 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...
designchamps.io/hip
////////// Connect with me here 👍🏼
Instagram: / imjesseshow
Twitter: / imjesseshow
Anchor: anchor.fm/imjesseshow
Medium: / imjesseshow
////////// Sign up for my Monthly Newsletter 📫
jesseshowalter.com/newsletter
////////// Music is from Musicbed click below for a free trial 👇🏼
share.mscbd.fm/imjesseshow
////////// Equipment 📸
www.amazon.com/shop/jesseshow...

[@kmondragon08]

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.

[@JesseShowalter]

Thanks for the love. I am launching something in December you might really enjoy that will hopefully bring even more value to you. Get on my newsletter to stay updated 👍🏼

[@noisydoll168]

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.

[@nataliasiposovaart5243]

I love how you talk with passion 😊

[@TheScottGordon]

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

[@auj5901]

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.

[@jerembardonify]

Congrats ! Awesome explanation, thank you Jesse :)

[@wise_nut]

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

[@JesseShowalter]

Thanks

[@Cascadia2011]

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

[@JesseShowalter]

Hahaha, thanks so much Risa! Glad I was able to help out.

[@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!

[@Almoran2]

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

[@JesseShowalter]

Your so welcome 👍🏼

[@amina6489]

This is awesome ! great teaching skills !!!

[@NyuvelUX]

Thank you very much for these explanations

[@SpazValle29]

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 ;)

[@mehradlajevardi7581]

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

[@JesseShowalter]

Thanks and God bless

[@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

[@JesseShowalter]

Thanks so much. I will probably be doing more of these types of videos. Any topics you want to be covered specifically?

[@empoweredrachel]

Awesome! I would love to learn more about things like hand-offs, redlining, preparing designs to give to devs, examples of project specs you might receive from a client, project management, how to work well in a fast-paced environment, etc. Basically how to bridge the gap between school and the workforce! :))))

[@FinallyFreelancing]

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

[@nesapabakht8401]

Thank you very much

[@jesset55]

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

[@leilaoeurtani5476]

Great explanation! I love it 👌

[@JesseShowalter]

Thanks so much! Have a good day!

[@merrittwitherspoon7894]

Very helpful, thank you!

[@JesseShowalter]

your super welcome

[@radulica]

Amazing video. Thanks!

[@JesseShowalter]

Thanks so much! Stoked you enjoyed it!

Super Helpful man! Subscribed!

[@JesseShowalter]

Thanks so much, João! Have a great day!

[@la_702]

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

[@JesseShowalter]

I cut a bunch of content out of this video about workflow due to time, but maybe I’ll do another video about it soon.

[@la_702]

Oh yes for sure could learn a thing or two for sure. Looking forward to it Jesse! Cheers

[@JakePomperDesign]

Very awesome video brother!

[@JesseShowalter]

Thanks so much

[@michaelrai3467]

this was really informative, thank you!!

[@JesseShowalter]

You're so welcome

[@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?

[@getemtk2733]

Great content 👍👌👌

[@JesseShowalter]

Thanks so much 👍🏼

[@chocobala2536]

great one JS

[@JesseShowalter]

Thanks dude!! 🤘

[@paullegaspi5384]

I like your metaphor.

[@JesseShowalter]

Thanks, I like it too but mainly because I love foursquare so much 😆

[@bazzle_brush]

Great explanation

[@JesseShowalter]

Happy you liked it.

[@topteamfitness]

Good video very informative.

[@JesseShowalter]

Glad you enjoyed it

[@brendanlaird5831]

Brb, adding meatball menus to my pattern library.

[@JesseShowalter]

🤣😂🤣

[@virat5484]

thanks for video :)

[@JesseShowalter]

No problem

[@QiroLab]

very helpful.

[@JesseShowalter]

Glad to hear it, thanks for watching

[@Poohbify]

I want to know about developing these design systems.
It's seemingly simple to design a system. I am looking for an optimal way to implement this same design system.

[@JesseShowalter]

I’m coming out with some videos soon

[@RoyalNatangwe]

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

[@LethiuxX]

Thanks Jesse! My new favourite channel. I would like to throw two questions out there if you dont mind;
Is Google's Material also then classified as a design system rather than a style guide?
I work for a dev house as a Full Stack Designer (I just realised that's what I am, like earlier, after watching your video), and I've been trying to figure out a way to either create a pattern library or design system to assist developers in implementing consistent (neat and structured, as well as relevant) code. Most of the devs have the creative capacity of a typical back-end dev, and the team's are too small and too many for me to jump between them all.
So if I can provide them something to generate nice sass code based on input parameters and create a style guide to help them in knowing how a login page should look (to a degree), would that be a design system?
I see a lot of use cases for company products, but we do mostly modular development and projects come and go... I would love to know if you have any knowledge or wisdom that could help me in this arena, please kind sir. :)
Keep making awesome videos. I'll share with my colleagues and friends.

[@aurelianspodarec2629]

I would be happy to chat about that if you like! You can always find me on Linkedin.

[@user-wo5rt8yl9y-g7f]

So style guide is only for design team to use? Pattern library is designed for engineers? Design system is built for everyone in the company?

[@sumankathet2560]

Looking at the background I kept on clearing my screen😂😂

[@JesseShowalter]

🤣🤣🤣

[@markusgattol]

Hi Jesse, what would you say material.io/ is? design system or pattern library?

[@JesseShowalter]

It's a system for sure

[@markusgattol]

right, figured. What's your take on it? I thought maybe you've a video on material design but didn't find one so... :)

[@epicvillain8308]

Screaming at the beginning scared the shit out of me

[@JesseShowalter]

I’m sorry 😬 I get real excited

[@athascalling]

OK but fr I almost just got up to clean my monitor, lol

[@REWirez]

Flipao

[@pjonesg]

Zzz

[@anhtuanuxdesign]

No value