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

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

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

50% 1

Design systems (like Material Design, and Lightning Design) are all the rage and while most articles talk about what a design system is and best practices for creating them, at DesignerUp we've been framing them as a teaching tool and design tutorial with our product design students to help them better understand, explore and learn the philosophies, best practices and principles of UI design, UX and Product Design.
#designsystem #UIUXdesign #LearnUXDesign
🔗 MENTIONED IN THIS VIDEO
⊚ Full article here | designerup.co/blog/10-best-de...
⊚ Get Notion for Free | notion.grsm.io/w8dghl0z84eh
⊚ Links to Case Study Generators | designerup.co/blog/ux-case-st...
⊚ Download our Case Study Builder for Notion - designerup.co/shop/notion-pro...
🎥 WHAT TO WATCH NEXT
⊚ UX Case Study Mistakes to Avoid | • UX/UI Case Study Red F...
⏱ TIMESTAMPS
Intro - 00:00
What is a design system? - 00:24
Learning from design systems - 01:20
1. Google Material Design System - 01:52
2. Atlassian Design System - 06:18
3. Apple Human Interface Guidelines - 07:27
4. Mailchimp Design System - 08:07
5. HelpScout Design System - 08:48
Worth checking out - 09:42
📚 PRODUCT DESIGN (UX/UI) COURSE I RECOMMENDED
⊚ Enroll Now | designerup.co/product-design-...
📒 GET FREE DESIGN LESSONS
⊚ Free UI Design Crash Course | designerup.co/ui-design-crash...
⊚ Newsletter | designerup.co/newsletter
⊚ Live Webinars | designerup.co/webinars
📖 READ THE BEST DESIGN ARTICLES
⊚ BLOG | designerup.co/blog
🥰 JOIN OUR MINDFUL COMMUNITY
⊚ DesignerUp Community | designerup.co/community
💬 CONNECT WITH US
⊚ Twitter | / designerupco
⊚ Instagram | / designerupco
⊚ Facebook | / designerupco
⊚ LinkedIn | / designerupco
⊚ Pinterest | / designerupco
🧰 RECOMMENDED PRODUCT DESIGN TOOLS
⊚ Figma | go.designerup.co/figma
⊚ ProtoPie | go.designerup.co/protopie
⊚ Notion | go.designerup.co/notion
⊚ Framer | go.designerup.co/framer
⊚ Canva | go.designerup.co/canva
⚙️ RECOMMENDED GEAR
Video Gear | kit.co/DesignerUp/designerup-...
Home Office Accessories | kit.co/DesignerUp/home-office...
🙋🏽‍♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UX/UI) School
⊚ Trained teacher
⊚ RU-vid creator
⊚ Author
*Some of the links listed in the description may be affiliate links through which we may earn a small commission. They are at no cost to you and often include discounts that we pass along! These help keep our free channel going and help us continue to create the highest quality content possible. So thanks for your clicks and your support! 💜
💻 SPONSORSHIP AND COLLAB INQUIRIES
⊚ Email | learn@designerup.co

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

4 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

📚Learn how to create all of the elements in a design system in our Product Design (UI/UX) Course - designerup.co/product-design-ui-ux-course

@Krassi-nb8me Год назад

learning by stealing is the best way not to reinvent the wheel again. very good guide! thanks for all the links

@DesignerUp Год назад

Absolutely!

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

Very true...much talk about design systems but not much on exactly how to use and steal from them

@bhumiknayak6280 10 месяцев назад

Can't believe this channel is free, tremendous work. Learning things as a Product Manager, I hit a goldmine.

@DesignerUp 10 месяцев назад

Soo happy to hear that!! 😃Please do share the videos you find helpful with others! It helps us to keep producing free content like this 🙏🏽

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

As a developer trying to touch my feet in design, I think trying out a design system is a really cool process for learning, it uses your knowledge about development and forces you to think how would a designer do too, so we can make better choices for architecturing our components for other developers.

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

Great observation for developers Gustavo. It’s really it the one place where we can all learn and contribute to the product.

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

Thanks Elizabeth for this amazing tutorial. Proving yet again that you are always one step ahead of the game.

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

Haha thanks Damien for your ever encouraging comments 😄

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

Thanks for putting Atlassian Design Systems. Never thought it existed, will take a look at it.

@chikeezeiru143 Год назад

Thank you so much Elizabeth! I'm off to the blog

@user-ig3cb1tj9r 11 месяцев назад

Thanks so much for this great hint

@d_2344 Год назад

Best explanation! Really thank you 🙏🏼❤

@DesignerUp Год назад

You’re very welcome!

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

Thank you so much!!!!

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

Great content and well explained without rush.

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

Cheers Andrea! Thank you

@the.olawale Год назад

Thanks for this.

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

Amazing ! Thank you for the great content, new sub 🤗

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

Oh thank you! Happy to have you with us on the channel!

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

your delivery is top-notch

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

Appreciate that! 😊

@rein2407 4 месяца назад

you're the best teacher🥺 Thank you so much! Someday I'll land a job because of your tutorials!

@DesignerUp 4 месяца назад

Wow that really means a lot. If you do I hope you come back and let me know how it goes! Good luck!! 💜

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

Amazing!, Thank you for the great video

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

Thank you!

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

Good presentation and and very useful contents. Thanks for sharing I'm very much appreciated the recommendation.

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

Thank you Shire, I hope it’s helpful and thank you for commenting!

@alltheworldsastage.11688 2 года назад

Thank you 😊

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

Thank U Wery Much!

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

Super Struggling New Designer I love it tho !!! Just what I needed Thanks

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

steal like an artist :P

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

Exactly! 😄

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

Best way to learn.

@TeeTee-bz3pv Год назад

Favorite 🤩….every website is a favorite now for my study guide You are really amazing

@DesignerUp Год назад

Hahha thanks Tee Tee 😊

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

Very very helpfull. ❤️❤️

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

Glad to hear it!

@honeycoded6784 Год назад

I see your content is interesting and demonstrates thoughtful reuse which is like standing on the shoulders of giants rather than stealing. There is no learning or efficient work in just copying someone else's work. Whereas, users can learn and get inspired a lot from your content. Also that is how life works, we live on innovating from the resources we have in our hands and from there we reach new solutions. A lot of technologies wouldn't have become what they are today if the innovators started from scratch. I suggest you re consider using your terms and way of seeing copying other's work. I also suggest reading the following article which I came across recently while researching about this topic "Design Systems" and was able to figure out some things about the topic. I don't mean to be rude, but you can consider me a friend in the same field who loves to help others where he can.

@DesignerUp Год назад

This title is based on the best selling book by Austin Kleon ‘Steal like an artist’. It's a good read, you should check it out to understand my framing more clearly. If you watched my video you would see that it's exactly the point I make. We borrow tastefully and with respect. Which is why (steal) is in parenthesis.

@honeycoded6784 Год назад

@@DesignerUp I watched the video and it was really beneficial for me as it contained useful resources. Personally I wouldn't use this term anyways 😑

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

This is very helpful

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

Glad to here it. Thanks!

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

It's kinda crazy I never realized what you can learn from these things 😳 Awesome video. Thanks!

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

Charles Haddock Right?! When I first realized how much you can learn from these it felt almost wrong lol. Still can’t believe this is all publicly shared!

@ibcbabbrotoghosh1163 Год назад

It's so simple yet so complicated, it's perfect lmao

@DesignerUp Год назад

Haha it’s true

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

Loved title 😆

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

Thank you for this! :D Awesome! (I'm here from Panda - Chrome extension- Design News feed)

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

Hey Alexis! Just installed Panda and took it out for a spin. Very nice!! A lovely way to digest the days' design news! Thanks for sharing. (btw, your product trailer is 🔥)

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

Panda is SO good, I used it already for years!

@Krishna-le3fo 3 года назад

Useful :)

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

Thanks Tulasi!

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

Really Helpful ..... could you also make a detail video on Typography and Gap Between web layout Thank You!

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

Thanks Shan. I have a Typography video in the works! One of our most requested!

@rohitmandal1125 Год назад

Hey, I just wanted to check briesofty if there is a way for to import a new soft into the program, for example softs or sotNice tutorialng that

@RupeshSaxena Год назад

a very good design system also provided by IBM and VMWare

@jhe-jhe4297 Год назад

Newbie subs and I am new for learning design an also stdying for ux. Thank you Mam

@DesignerUp Год назад

You’re welcome! Good luck with your learning

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

You are Godess of Design

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

This is really helpful, thank you! Who normally manages a design system? I understand that it's supposed to be a collaborative effort, but who should be responsible for overseeing the building and maintenance of a design system. Should it be an Engineer, UX designer or Product Owner?

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

Every product is different and therefore the team will normally establish a chain of command and process that suits them best. But generally the process looks like this: 1. Establish owner of change request process (ideally one person or small team) 3. Conduct regular audits of the system with everyone involved 4. Owner approves change requests, prioritizes and tracks (using something like JIRA). 5. A review process may occur before changes are made to determine what the change will affect. 6. Design systems team or anyone empowered to make change can then do so. 7. A changelog is kept for everyone to refer to. Hope that helps!

@muslimahcover2475 Год назад

Are these available for commericial use? Can I adapt them for my organization?

@DesignerUp Год назад

Yes many of them are available for commerical use and can be adapted or customized. You can also find the fully, editable version of many of these in the Figma community if you are a Figma user. All under Creative Commons License

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

So are there tools out there that you actually easy set up a design system? I really like the design system of Shopify.

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

Hi Davy, so what tools you use to setup your design system really depend on your needs. Do you have a large team and need a robust repository with strong collaboration features? Are you just 1 person that can manage it within your design app library? Does your design system need to be hosted publicly or internally? There are lots of questions to answer before you can find the right solution because it's really all about your workflow. Here is a great list of tools that offer both all-in-one solutions and repos that you can string together to create just what you need! - designsystemsrepo.com/tools/ Hope that helps! Good luck!

@artech5539 11 месяцев назад

correct me if i'm wrong. Is cloud scape is the design system used for aws?

@DesignerUp 11 месяцев назад

Yes that’s right! It’s an amazing Open Source Design System cloudscape.design

@madhusudangrover3841 Год назад

Charles Causey softS is fun

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

ant design system?

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

nairobi

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

How can I be your student?

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

Hi Mizan, if you are interested in taking my self-guided course you can enroll here right now designerup.co/product-design-ui-ux-course. If you are interested in applying for our bootcamp or working with me 1:1 please email me at learn@designerup.co for more information.

@kindnessorimolade641 4 месяца назад

So how do we steal from them practically *

@DesignerUp 4 месяца назад

Download them and use them in your own designs - Here’s another video on where to find more design system UI kits ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gnRxVgXsAJM.html

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

So what is the point of being a UI designer if you just mindlessly copy elements from other design systems? I understand the rules and how consistency is important. but if everything is laid out to you on a plate, don't you think that this defeats the purpose of being a Visual UI designer? or is the job evolved to lego / block assembler now?

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

It's important to understand how a UI designer fits into the overall product design, design system and organization. While someone else's design system can help you understand the underlying principles of component design and best usability practices, it does not show you how to apply it to your own product, users or team. The point of being a UI designer (at least in user-centered companies) is to have the ability to create a user interface that helps achieve product market fit and to collaborate better and more efficiently with others or to be a creator, contributor or maintainer of a design system at an organization that has already successfully done this at scale. The role of a UI designer has certainly evolved, and while some designers might see it as 'building with legos', I believe that with constraint comes great opportunity for creativity and innovation. So in my experience, this is just the tip of what a UI designer can do :)

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

@@DesignerUp Thank you so much for your reply :) .. you are right indeed ... and i appreciate your time in reading and replying my comment