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.

[@TheScottGordon]

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

[@nataliasiposovaart5243]

I love how you talk with passion 😊

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

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

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

[@Almoran2]

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

[@JesseShowalter]

Your so welcome 👍🏼

[@NyuvelUX]

Thank you very much for these explanations

[@wise_nut]

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

[@JesseShowalter]

Thanks

[@amina6489]

This is awesome ! great teaching skills !!!

[@SpazValle29]

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

[@mehradlajevardi7581]

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

[@JesseShowalter]

Thanks and God bless

[@FinallyFreelancing]

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

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

[@merrittwitherspoon7894]

Very helpful, thank you!

[@JesseShowalter]

your super welcome

[@leilaoeurtani5476]

Great explanation! I love it 👌

[@JesseShowalter]

Thanks so much! Have a good day!

[@nyhaydi]

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

[@nesapabakht8401]

Thank you very much

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

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

[@michaelrai3467]

this was really informative, thank you!!

[@JesseShowalter]

You're so welcome

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

[@jesset55]

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

[@paullegaspi5384]

I like your metaphor.

[@JesseShowalter]

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

[@JakePomperDesign]

Very awesome video brother!

[@JesseShowalter]

Thanks so much

[@bazzle_brush]

Great explanation

[@JesseShowalter]

Happy you liked it.

[@chocobala2536]

great one JS

[@JesseShowalter]

Thanks dude!! 🤘

[@getemtk2733]

Great content 👍👌👌

[@JesseShowalter]

Thanks so much 👍🏼

[@topteamfitness]

Good video very informative.

[@JesseShowalter]

Glad you enjoyed it

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

[@virat5484]

thanks for video :)

[@JesseShowalter]

No problem

[@QiroLab]

very helpful.

[@JesseShowalter]

Glad to hear it, thanks for watching

[@RoyalNatangwe]

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

[@brendanlaird5831]

Brb, adding meatball menus to my pattern library.

[@JesseShowalter]

🤣😂🤣

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

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

[@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... :)

[@sumankathet2560]

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

[@JesseShowalter]

🤣🤣🤣

[@athascalling]

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

[@epicvillain8308]

Screaming at the beginning scared the shit out of me

[@JesseShowalter]

I’m sorry 😬 I get real excited

[@REWirez]

Flipao

[@pjonesg]

Zzz

[@anhtuanuxdesign]

No value