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

Подписаться 382 тыс.

Просмотров 79 тыс.

50% 1

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

Опубликовано:

5 июл 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@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 3 года назад

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

@nataliasiposovaart5243 5 лет назад

I love how you talk with passion 😊

@kmondragon08 5 лет назад

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 5 лет назад

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 👍🏼

@auj5901 5 лет назад

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 5 лет назад

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!

@NyuvelUX 7 месяцев назад

Thank you very much for these explanations

@Almoran2 5 лет назад

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

@JesseShowalter 5 лет назад

Your so welcome 👍🏼

@amina6489 Год назад

This is awesome ! great teaching skills !!!

@Cascadia2011 4 года назад

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

@JesseShowalter 4 года назад

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

@SpazValle29 Год назад

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

@FinallyFreelancing 5 лет назад

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

@wise_nut 5 лет назад

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

@JesseShowalter 5 лет назад

Thanks

@mehradlajevardi7581 5 лет назад

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

@JesseShowalter 5 лет назад

Thanks and God bless

@empoweredrachel 5 лет назад

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 5 лет назад

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

@empoweredrachel 5 лет назад

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 5 лет назад

Very helpful, thank you!

@JesseShowalter 5 лет назад

your super welcome

@jesset55 3 года назад

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

@leilaoeurtani5476 4 года назад

Great explanation! I love it 👌

@JesseShowalter 4 года назад

Thanks so much! Have a good 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?

@nyhaydi 2 года назад

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

@nesapabakht8401 2 года назад

Thank you very much

@radulica 3 года назад

Amazing video. Thanks!

@JesseShowalter 3 года назад

Thanks so much! Stoked you enjoyed it!

@michaelrai3467 5 лет назад

this was really informative, thank you!!

@JesseShowalter 5 лет назад

You're so welcome

4 года назад

Super Helpful man! Subscribed!

@JesseShowalter 4 года назад

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

@la_702 5 лет назад

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 5 лет назад

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 5 лет назад

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

@bazzle_brush 4 года назад

Great explanation

@JesseShowalter 4 года назад

Happy you liked it.

@JakePomperDesign 5 лет назад

Very awesome video brother!

@JesseShowalter 5 лет назад

Thanks so much

@paullegaspi5384 5 лет назад

I like your metaphor.

@JesseShowalter 5 лет назад

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

@QiroLab 5 лет назад

very helpful.

@JesseShowalter 5 лет назад

Glad to hear it, thanks for watching

@getemtk2733 5 лет назад

Great content 👍👌👌

@JesseShowalter 5 лет назад

Thanks so much 👍🏼

@topteamfitness 5 лет назад

Good video very informative.

@JesseShowalter 5 лет назад

Glad you enjoyed it

@chocobala2536 4 года назад

great one JS

@JesseShowalter 4 года назад

Thanks dude!! 🤘

@virat5484 4 года назад

thanks for video :)

@JesseShowalter 4 года назад

No problem

@RoyalNatangwe Год назад

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

@LethiuxX 5 лет назад

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 5 лет назад

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

@brendanlaird5831 4 года назад

Brb, adding meatball menus to my pattern library.

@JesseShowalter 4 года назад

🤣😂🤣

@Poohbify 5 лет назад

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 5 лет назад

I’m coming out with some videos soon