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 ?
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.
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...
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
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.
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 🍻
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...
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?
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?
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?
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.
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.
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.
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
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
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
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???
Can anyone explain why the states of Primary Buttons are different? Like the states created by the author and provided by MD are different. In terms of colors.
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 .
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
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.
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?
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 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?
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
The best material design tutorial. A well-spent two hours and half of my life. 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
honestly. The dude is a good teacher
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 ?
This guy is a born teacher. The way he explains this complex subject and make it look so simple is nothing short of amazing 👏
Probably the best 2 hours of my design life this year.....
You, my friend, are the best teacher! Your teaching style and content delivery is amazing!
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.
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...
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.
this is the best UI UX Design Tutorial I seen ever THANK YOU FORM DEPTH OF MY HART
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
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.
This is the best, simple straight to the point video on material design. Thank you sir 🙏 ❤
Best course ever about Material Design published ❤
Best Material Design video I've watched! Thanks so much for explaining this!
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.
The best UI UX Design Tutorial design tutorial
Best instructor ever. Thanks for ur great work, Mr Joseph
very great tutorial.
I want to know what laptop you use.
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...
You are a very good teacher. I learned a lot from you and hope to land a job soon thank you.
Thanks
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?
Thank you very much, Joseph Brendan.
This video is so insightful, packed and instructive. Thanks for sharing.
Please make complete UX course PLEASEEEEEEEEEE 🥺🥺🥺
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
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 for your sacrifices to help us learn. Keep it up
It was a very useful tutorial for me. Thanks from Ukraine 🇺🇦
I think the material design website has changed. It look so different now sir
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?
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?
01:52:55 I can't edit out the Spread option, it is grayed out. Why is that? Amazing tutorial by the way!
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
Please make a video for human interface guidelines for apple.
Hi, I really enjoy your video. Could you make playlist for your UI/UX videos?
BRILLIANT, thanks a lot, Joseph
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.
It was great and helps me a lot👏thank you and good job
Nice one. It took me 10hr to create the typography tokens.
Nice work. Glad you took time to learn
Thanks for comprehensive guide. It made material design and design system very easy to understand and use. Again thanks a lot sir🫡
thank you so much for teaching me material design
That was an awesome journey. I learn a lots about MD from this tutorial. Thank You Sir.❤❤
Thanks for the tutorials sir
Well detailed and explained
YOU NEED TO DO PAID COURESES..YOUR DETAIL IN EXPLANATION IS SUPERB.. ALSO PLEASE DO IOS DESIGN SYSTEM WORK FLOW .. THANKS
That is my favorite Chanel
It was easy to understand 'material design' thanks to you. Thank you soooooo~ much! 🙏
Love the FreeCodeCamp course you did a great job!
Thanks so much for this course. Great video as always.
Very Informative keep it up sir, please make the same kind of video for IOS ( Human Interface Guidelines ). Love from India ❤
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.
Thanks a lot!! Now everything is clear!
It's really helpful. But i have question- how you choose the neutral key color and neutral variant key color ?
Great video every designer must watch, thanks for sharing.
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.
could you make a video about human interface guidelines that how we use those guidelines in our design
that was an awesome tutorial🔥 thank you
This video is awesome! Thank you for a detailed video
You're welcome. I appreciate your commendation
nice to see a perfect working brain. Keep it up
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
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
please can you do a video for the github token code
thanks.
Can you make a video on margin & Padding in ui
Thank you for the knowledge Sir.. I appreciate it a lot.
It was so helpful, thanks😊
I wanted to ask if you will be making a video on Prototype and Case study Writng.
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
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
Thank you so much for a very informative video sir🙂👏👍
awsome tutorial brother.. ty so much
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😍
Hey Joseph! Can you make a video on Human Interface Guidelines (HIG) jus like this? Thanks in advance.
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???
This is soooooo valuable and well made! Thank you so much!
Can anyone explain why the states of Primary Buttons are different?
Like the states created by the author and provided by MD are different. In terms of colors.
Great tutorial! Thank you. However, when i was creating my buttons, outline width came up. Could you please explain what it is?
This is amazing, can you please make the same as for human interface design 🍎🥲
You just got one subscriber....great job
This is great but I couldn't find the figma tokens on plugin in figma, please I need help on that.
Thank you so much please make more videos
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 .
Great tutorial! thanks!
It's a masterclass for free.
Love you content. An amazing teacher
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
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.
When you do something wow. Any courses from you??
Thank you. Nice job 👍
you are the best. please countinu to make videos in figma. more tutorials from begining to end.
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?
Great teacher
Thank you
How do I determine the typography of different devices. Seeing as material 2 isn't really working on my laptop
Thanks for this video, very helpful
can you please do IOS design guideline course ..
If we tweaked the opacity for different states of a button, won't it detach the color styles and create further problems
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?
realy nice and useful course thank you
You're welcome
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
Well Explained Tutorial
I love this channel