5 Best Design Systems and How to Learn (and Steal) From Them
HTML-код
- Опубликовано: 2 июн 2024
- 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
⊚ RUclips 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
📚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
learning by stealing is the best way not to reinvent the wheel again. very good guide! thanks for all the links
Absolutely!
Can't believe this channel is free, tremendous work. Learning things as a Product Manager, I hit a goldmine.
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 🙏🏽
Very true...much talk about design systems but not much on exactly how to use and steal from them
Thanks for putting Atlassian Design Systems. Never thought it existed, will take a look at it.
Thanks Elizabeth for this amazing tutorial. Proving yet again that you are always one step ahead of the game.
Haha thanks Damien for your ever encouraging comments 😄
Thank you so much Elizabeth!
I'm off to the blog
Thanks so much for this great hint
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.
Great observation for developers Gustavo. It’s really it the one place where we can all learn and contribute to the product.
Best explanation! Really thank you 🙏🏼❤
You’re very welcome!
Thank you so much!!!!
Great content and well explained without rush.
Cheers Andrea! Thank you
Thanks for this.
your delivery is top-notch
Appreciate that! 😊
Amazing!, Thank you for the great video
Thank you!
Amazing ! Thank you for the great content, new sub 🤗
Oh thank you! Happy to have you with us on the channel!
Thank you 😊
Good presentation and and very useful contents. Thanks for sharing I'm very much appreciated the recommendation.
Thank you Shire, I hope it’s helpful and thank you for commenting!
Thank U Wery Much!
Super Struggling New Designer
I love it tho !!!
Just what I needed
Thanks
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.
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.
@@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 😑
Very very helpfull. ❤️❤️
Glad to hear it!
you're the best teacher🥺 Thank you so much! Someday I'll land a job because of your tutorials!
Wow that really means a lot. If you do I hope you come back and let me know how it goes! Good luck!! 💜
Favorite 🤩….every website is a favorite now for my study guide
You are really amazing
Hahha thanks Tee Tee 😊
This is very helpful
Glad to here it. Thanks!
steal like an artist :P
Exactly! 😄
Best way to learn.
Loved title 😆
Useful :)
Thanks Tulasi!
It's kinda crazy I never realized what you can learn from these things 😳 Awesome video. Thanks!
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!
Thank you for this! :D Awesome! (I'm here from Panda - Chrome extension- Design News feed)
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 🔥)
Panda is SO good, I used it already for years!
Really Helpful ..... could you also make a detail video on Typography and Gap Between web layout
Thank You!
Thanks Shan. I have a Typography video in the works! One of our most requested!
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
You are Godess of Design
a very good design system also provided by IBM and VMWare
Newbie subs and I am new for learning design an also stdying for ux. Thank you Mam
You’re welcome! Good luck with your learning
It's so simple yet so complicated, it's perfect lmao
Haha it’s true
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?
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!
Are these available for commericial use? Can I adapt them for my organization?
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
So are there tools out there that you actually easy set up a design system? I really like the design system of Shopify.
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!
correct me if i'm wrong. Is cloud scape is the design system used for aws?
Yes that’s right! It’s an amazing Open Source Design System cloudscape.design
Charles Causey softS is fun
ant design system?
nairobi
How can I be your student?
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.
So how do we steal from them practically *
Download them and use them in your own designs - Here’s another video on where to find more design system UI kits
ruclips.net/video/gnRxVgXsAJM/видео.html
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?
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 :)
@@DesignerUp Thank you so much for your reply :) .. you are right indeed ... and i appreciate your time in reading and replying my comment
to go hahahaha
That second camera angle seems a bit forced and unnecessary.
The only problem I see is that Android UI sucks and Id rather build an IOS app because the clients are richer.
please give us your instagram id for further references,doubts and for clarification..
Thank you so much !!!