To create a tonal pallete: 1. Pick a key color. 2. Change Color system to HSL 3. Duplicate the box 13 times 4. Change the L values as mentioned in the material guidelines i.e. for 0,10,20,30,.....99,100 Thank you for the session. This is the best video I have found till date.
I love how you explain without assuming anything is too simple to be explained again, it helps me digest the concept until it sticks. Keep going, absolutely loved this
I just want to clear with myself, is material design actually all rules of designing every type of apps using prepared techniques which are uploaded on material design site ?
Thanks soo much for all the videos you ve been dropping so far, its really a great videos. more muscle. but can you please do a video on colour, because some of us are facing difficulty on how to use\ pick colour for a project, and if you can do video on web design as well. Thanks...
Very well explained and illustrated tutorial. Keep it up. Just one mistake I've spotted is where you assumed that the 13th tonal palletes will be pure white. Overall, great work. I've learnt a lot from you.
Well explained sir. I learnt that while trying to create a different reference typeface for a particular typography token, the font weight differs ranging from 400,500,600,700 and so on
Its just been 30 minutes and I am learning things so easily, which earlier seemed to be so tedious. You are also an amazing teacher, the way you explain is so simple and crisp. Thanks for the video.
My god brother ❤️❤️ You are an amazing mentor. Thanks for making this amazing Material Design 3 video. I understood each and everything ❤️❤️ Please make a video on iOS Design aswell. I will really help me and other designers. Thanks Cheers 🍻
I absolutely LOVED the video. It's a life saver. Could I please understand why we create reference tokens for typefaces when we only use the system token typeface?
Great tutorial chief. Quick question: How do you select key colors. The MD guide just tells you it's uses, they don't really tell you how to actually pick the colors themselves. Any help???
I love the way you teach this complex stuff with this much ease. But i have still some confusion about the difference between neutral key color and neutral variant key color ... Can you please add some point on this specif part in comment?
Many thanks for this very helpful tutorial for beginners like me who want to discover and use MD system. I just have one remark on the Color System, I think all colors labeled 100 are not necessary of white (#FFF) otherwise the MD team should reference it by the exact name or code rather than Primary100, Secondary100...
Did you use the Material theme builder plugin to choose secondary and tertiary colors? Please elaborate on what process involves choosing secondary, and tertiary colors.
It's a very good explanation, however, something's wrong here. The hovered state etc should have color, not just white. Maybe something's wrong with the documentation because that 8% opacity is too low. I think the correct one is to reduce the opacity by 8% not to make it 8%. Sometimes, using an opacity could be bad if the background has patterns and also will kill the saturation. After all, I really like the video, it's so comprehensive.
Thank you so much for trying to do what so many others have failed to do. That being actually explain how to use these tools. Shame on you Google. One question though I would challenge you to find a more efficient application for is the creation and export and delivery and upload of tokens. Creating tokens individually is a incredibly time-consuming and monotonous experience. I'm curious, now that sometime has passed since you created this video, if there's an easier way to simply export all tokens and styles all at once for a zipped upload to GitHub? Thanks again and I look forward to a response.
Thank you very much for doing this video. I have one question about design tokens: If I have many design styles, do I create tokens for each? Would Ii have to share each one as showed, in JSON, to the developers?
hello Dev , I really like your teaching. what advice do you have for us just starting with UI design . if you could recommend a form of roadmap to follow. thanks
ONE QUESTION! I thought reference tokens are just labels to represent abstractions and system tokens are the value added to a reference token, an I right or not? If yes, why in the video he is applying a color HEX in the reference token? please help
Hi Joseph! Thanks for the video. This really gives a insight on what are things that are really thrown all over a design system.. I request you do a vedio similar to this for the apple one.. HIG i guess.. Would be so insightful if you Explain HIG the same way you did here for MD. Thank you.
I discovered that all your key colors are related; the neutral key colors have a tint of the primary color. No way it’s a random selection. What principle did you apply in selecting them?
thank you very much! I just dont understand the Overlay layer for the diferent states of the button. The MD recomend to put an overlay above the primary? how? you did it diferent then they show in the md website.
Course was well understood, thank you Boss. I have a question Considering that fonts behave differently and some fonts might require more line heights than others, let's say you were already creating your design system using Material designs template, if you were to customize your line heights for your project using GRT calculator, will you still give reference to the Material designs system?
Hey Joseph! Great video as always. I have watched your Figma UI course and there was a material design section in that course as well, Do i need to take this as well or its the same ?
Hi, the design system of material design is only for web or can it be used to design mobile specs too. Example the button component specs are same for mobile and web?
43:31 Display large size is 57 which I did not expect to see. I had an assumption multiples of 8 and 4 were used for font sizes. Can anyone explain more on this?
Doubt from : Create shadow effect ? How to know , what is the dp of any rectangle and apply that ? suppose 16dp is mentioned in material design , but how to know which rectangle is 16dp and apply . & Actually what is dp , how to identify dp .
How did you generate key colors primary, secondary and the rest you used in generating the tonal palette, Are their any rules we should follow when selecting our key colors primary, secondary etc before designing the tonal palettes
Please I think there is an updated in m3 material design The present one is different from this making it difficult for me to follow and understand For example the layout grid,responsive design ... In the current one there is no value for the breakpoint like the one in this video The break point here just shows width
Tonal Palettes 1 Method is best one reason the 2nd method has the same colour but only we reduce the colour shade but the truth is we can use an eye drop to pick the colour but my opinion that not pro touch
I have a question about the color section, the value of primary or secondary colors 40,100, 90, and 10 fixed? can I change the value? the rest of the shades when can I use them?
![ตีสิบเดย์ [FULL] | เปิดใจ "อาจารย์ เบียร์ ฅนตื่นธรรม" นักสนทนาธรรมสายดุดัน!](http://i.ytimg.com/vi/vqaBI_mnoDk/mqdefault.jpg)
![CAMPปลิ้น | EP.83[1/2] เปิดแคมป์หลอนต้อนรับ 2 ตัวพ่อแห่งวงการผี!](http://i.ytimg.com/vi/2uPuHYHgwiI/mqdefault.jpg)
The best material design tutorial. A well-spent two hours and half of my life. Thank you sir🔥
To create a tonal pallete:
1. Pick a key color.
2. Change Color system to HSL
3. Duplicate the box 13 times
4. Change the L values as mentioned in the material guidelines i.e. for 0,10,20,30,.....99,100
Thank you for the session. This is the best video I have found till date.
Ohh thanks Pratistha. This will certainly help
This is the best, simple straight to the point video on material design. Thank you sir 🙏 ❤
I love how you explain without assuming anything is too simple to be explained again, it helps me digest the concept until it sticks. Keep going, absolutely loved this
I love how you were able to break down these complex processes into something simple. The time spent here was worth it!!!
I just want to clear with myself, is material design actually all rules of designing every type of apps using prepared techniques which are uploaded on material design site ?
Probably the best 2 hours of my design life this year.....
This guy is a born teacher. The way he explains this complex subject and make it look so simple is nothing short of amazing 👏
Thanks soo much for all the videos you ve been dropping so far, its really a great videos. more muscle. but can you please do a video on colour, because some of us are facing difficulty on how to use\ pick colour for a project, and if you can do video on web design as well.
Thanks...
You, my friend, are the best teacher! Your teaching style and content delivery is amazing!
Very well explained and illustrated tutorial. Keep it up. Just one mistake I've spotted is where you assumed that the 13th tonal palletes will be pure white. Overall, great work. I've learnt a lot from you.
Best course ever about Material Design published ❤
this is the best UI UX Design Tutorial I seen ever THANK YOU FORM DEPTH OF MY HART
Easily one of the best videos I have watched about design tokens till date! Will surely implement this and try it out. Thanks a lot.
The best UI UX Design Tutorial design tutorial
Best Material Design video I've watched! Thanks so much for explaining this!
Well explained sir. I learnt that while trying to create a different reference typeface for a particular typography token, the font weight differs ranging from 400,500,600,700 and so on
Its just been 30 minutes and I am learning things so easily, which earlier seemed to be so tedious. You are also an amazing teacher, the way you explain is so simple and crisp. Thanks for the video.
My god brother ❤️❤️ You are an amazing mentor. Thanks for making this amazing Material Design 3 video. I understood each and everything ❤️❤️ Please make a video on iOS Design aswell. I will really help me and other designers. Thanks
Cheers 🍻
Thanks
If you can make a video on this IOS (human interface guidline) I will really be grateful. Thank you.
Thank you for creating such an informative video tutorial. It would be great to look forward for similar video for Material design 3 also
this is material design 3 only
You are a very good teacher. I learned a lot from you and hope to land a job soon thank you.
Thanks
Best instructor ever. Thanks for ur great work, Mr Joseph
Thank you for your sacrifices to help us learn. Keep it up
thank you so much for teaching me material design
very great tutorial.
I want to know what laptop you use.
Thank you very much, Joseph Brendan.
This video is so insightful, packed and instructive. Thanks for sharing.
I think the material design website has changed. It look so different now sir
nice to see a perfect working brain. Keep it up
That is my favorite Chanel
BRILLIANT, thanks a lot, Joseph
Thanks for the tutorials sir
Well detailed and explained
I absolutely LOVED the video. It's a life saver.
Could I please understand why we create reference tokens for typefaces when we only use the system token typeface?
It's a masterclass for free.
Great tutorial chief. Quick question: How do you select key colors. The MD guide just tells you it's uses, they don't really tell you how to actually pick the colors themselves. Any help???
I love the way you teach this complex stuff with this much ease. But i have still some confusion about the difference between neutral key color and neutral variant key color ... Can you please add some point on this specif part in comment?
Many thanks for this very helpful tutorial for beginners like me who want to discover and use MD system.
I just have one remark on the Color System, I think all colors labeled 100 are not necessary of white (#FFF) otherwise the MD team should reference it by the exact name or code rather than Primary100, Secondary100...
Did you use the Material theme builder plugin to choose secondary and tertiary colors? Please elaborate on what process involves choosing secondary, and tertiary colors.
It was a very useful tutorial for me. Thanks from Ukraine 🇺🇦
Thanks a lot!! Now everything is clear!
Thanks for comprehensive guide. It made material design and design system very easy to understand and use. Again thanks a lot sir🫡
Very Informative keep it up sir, please make the same kind of video for IOS ( Human Interface Guidelines ). Love from India ❤
Thanks so much for this course. Great video as always.
It was great and helps me a lot👏thank you and good job
awsome tutorial brother.. ty so much
It was easy to understand 'material design' thanks to you. Thank you soooooo~ much! 🙏
Love you content. An amazing teacher
that was an awesome tutorial🔥 thank you
It's a very good explanation, however, something's wrong here. The hovered state etc should have color, not just white. Maybe something's wrong with the documentation because that 8% opacity is too low. I think the correct one is to reduce the opacity by 8% not to make it 8%. Sometimes, using an opacity could be bad if the background has patterns and also will kill the saturation. After all, I really like the video, it's so comprehensive.
You just got one subscriber....great job
Please make complete UX course PLEASEEEEEEEEEE 🥺🥺🥺
That was an awesome journey. I learn a lots about MD from this tutorial. Thank You Sir.❤❤
Great video every designer must watch, thanks for sharing.
This video is awesome! Thank you for a detailed video
You're welcome. I appreciate your commendation
Love the FreeCodeCamp course you did a great job!
Thank you so much for trying to do what so many others have failed to do. That being actually explain how to use these tools. Shame on you Google.
One question though I would challenge you to find a more efficient application for is the creation and export and delivery and upload of tokens. Creating tokens individually is a incredibly time-consuming and monotonous experience. I'm curious, now that sometime has passed since you created this video, if there's an easier way to simply export all tokens and styles all at once for a zipped upload to GitHub? Thanks again and I look forward to a response.
This is soooooo valuable and well made! Thank you so much!
01:52:55 I can't edit out the Spread option, it is grayed out. Why is that? Amazing tutorial by the way!
Nice one. It took me 10hr to create the typography tokens.
Nice work. Glad you took time to learn
Thank you very much for doing this video. I have one question about design tokens: If I have many design styles, do I create tokens for each? Would Ii have to share each one as showed, in JSON, to the developers?
Thank you for the knowledge Sir.. I appreciate it a lot.
please make a video on how to]o connect the plugin to our github repository. Thanks for all you do Joe.
Great suggestion. would do that
@@DevAndDesign yes great stuff thank you so much,
Thank you so much please make more videos
YOU NEED TO DO PAID COURESES..YOUR DETAIL IN EXPLANATION IS SUPERB.. ALSO PLEASE DO IOS DESIGN SYSTEM WORK FLOW .. THANKS
hello Dev , I really like your teaching. what advice do you have for us just starting with UI design . if you could recommend a form of roadmap to follow. thanks
Hi, I really enjoy your video. Could you make playlist for your UI/UX videos?
Thank you so much sir for all these tutorial videos🥰.They are of great help.Will soon tag you on twitter to show my works😍
It was so helpful, thanks😊
It's really helpful. But i have question- how you choose the neutral key color and neutral variant key color ?
ONE QUESTION! I thought reference tokens are just labels to represent abstractions and system tokens are the value added to a reference token, an I right or not? If yes, why in the video he is applying a color HEX in the reference token? please help
Well Explained Tutorial
Hi Joseph! Thanks for the video. This really gives a insight on what are things that are really thrown all over a design system..
I request you do a vedio similar to this for the apple one.. HIG i guess..
Would be so insightful if you Explain HIG the same way you did here for MD.
Thank you.
Nice opinion I would do that
you are the best. please countinu to make videos in figma. more tutorials from begining to end.
I discovered that all your key colors are related; the neutral key colors have a tint of the primary color. No way it’s a random selection. What principle did you apply in selecting them?
I Just ensured that they are not too far from themselves in the spectrum. Also I ensured that they can all contrast themselves
Great teacher
Thank you
Thank you. Nice job 👍
Thank you so much for a very informative video sir🙂👏👍
thank you very much! I just dont understand the Overlay layer for the diferent states of the button. The MD recomend to put an overlay above the primary? how? you did it diferent then they show in the md website.
Please make a video for human interface guidelines for apple.
Great tutorial! thanks!
Thanks for this video, very helpful
realy nice and useful course thank you
You're welcome
Course was well understood, thank you Boss. I have a question
Considering that fonts behave differently and some fonts might require more line heights than others, let's say you were already creating your design system using Material designs template, if you were to customize your line heights for your project using GRT calculator, will you still give reference to the Material designs system?
Thanks for the tutorial...I have dis question..Is the material design system only to design for the Android app or for both Android and iOS.
Great tutorial! Thank you. However, when i was creating my buttons, outline width came up. Could you please explain what it is?
This is a great tutorial.
I wanted to ask if you will be making a video on Prototype and Case study Writng.
Thank you for your effort
Hey Joseph! Great video as always. I have watched your Figma UI course and there was a material design section in that course as well, Do i need to take this as well or its the same ?
Yeah this explains that better and breaks it down more
Hi, the design system of material design is only for web or can it be used to design mobile specs too. Example the button component specs are same for mobile and web?
When you do something wow. Any courses from you??
This is great but I couldn't find the figma tokens on plugin in figma, please I need help on that.
43:31 Display large size is 57 which I did not expect to see. I had an assumption multiples of 8 and 4 were used for font sizes. Can anyone explain more on this?
Doubt from : Create shadow effect ?
How to know , what is the dp of any rectangle and apply that ? suppose 16dp is mentioned in material design , but how to know which rectangle is 16dp and apply .
& Actually what is dp , how to identify dp .
could you make a video about human interface guidelines that how we use those guidelines in our design
How did you generate key colors primary, secondary and the rest you used in generating the tonal palette, Are their any rules we should follow when selecting our key colors primary, secondary etc before designing the tonal palettes
Please I think there is an updated in m3 material design
The present one is different from this making it difficult for me to follow and understand
For example the layout grid,responsive design ... In the current one there is no value for the breakpoint like the one in this video
The break point here just shows width
Tonal Palettes 1 Method is best one reason the 2nd method has the same colour but only we reduce the colour shade but the truth is we can use an eye drop to pick the colour but my opinion that not pro touch
Nice explanation, there are some new things added in the material design website, how do we incorporate what you have taught.
Just follow the documentation the way they added it. It's rules. I should make an update on the new things
@@DevAndDesign yeah that will be helpful, you can tell me what to do and those this video have the principles of materials design
I have a question about the color section, the value of primary or secondary colors 40,100, 90, and 10 fixed? can I change the value? the rest of the shades when can I use them?
I love this channel
Hey Joseph! Can you make a video on Human Interface Guidelines (HIG) jus like this? Thanks in advance.