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 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...
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
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 🍻
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.
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???
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.
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...
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?
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?
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.
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! 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.
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.
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
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?
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 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?
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?
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
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
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
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 .
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?
I just spent my day creating a typography style as done in the video, when I clicked create style... the styles that are created are completely something different. The same 12px with auto line-height is assigned to every style and the correct values appear in the Figma token's plugin. What do I do, please, I don't know if I'm missing something.
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.
Am a beginner on ui/ux course, have watched your 10hrs video on ui/ux before but i want to ask a question, how can i differenciate typography size for different screen, how can i choose typography size and setnit for different screen sir
bro how to use tracking property in typography ? Material Ui reccomends to use it in rem unit for web but how to convert the tracking property unit to rem ?
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
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 ?
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...
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
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!
This guy is a born teacher. The way he explains this complex subject and make it look so simple is nothing short of amazing 👏
this is the best UI UX Design Tutorial I seen ever THANK YOU FORM DEPTH OF MY HART
Best course ever about Material Design published ❤
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.
I think the material design website has changed. It look so different now sir
Best Material Design video I've watched! Thanks so much for explaining this!
The best UI UX Design Tutorial design tutorial
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 🍻
Thanks
If you can make a video on this IOS (human interface guidline) I will really be grateful. Thank 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.
very great tutorial.
I want to know what laptop you use.
Best instructor ever. Thanks for ur great work, Mr Joseph
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
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,
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???
01:52:55 I can't edit out the Spread option, it is grayed out. Why is that? Amazing tutorial by the way!
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.
Please make complete UX course PLEASEEEEEEEEEE 🥺🥺🥺
Thank you very much, Joseph Brendan.
This video is so insightful, packed and instructive. Thanks for sharing.
Thank you for your sacrifices to help us learn. 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
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...
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?
Please make a video for human interface guidelines for apple.
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?
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
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
thank you so much for teaching me material design
It's really helpful. But i have question- how you choose the neutral key color and neutral variant key color ?
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.
please can you do a video for the github token code
thanks.
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.
Thanks for comprehensive guide. It made material design and design system very easy to understand and use. Again thanks a lot sir🫡
Nice one. It took me 10hr to create the typography tokens.
Nice work. Glad you took time to learn
Hi, I really enjoy your video. Could you make playlist for your UI/UX videos?
It was great and helps me a lot👏thank you and good job
Love the FreeCodeCamp course you did a great job!
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.
Great tutorial! Thank you. However, when i was creating my buttons, outline width came up. Could you please explain what it is?
This is great but I couldn't find the figma tokens on plugin in figma, please I need help on that.
nice to see a perfect working brain. Keep it up
Love you content. An amazing teacher
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
That is my favorite Chanel
Thanks a lot!! Now everything is clear!
YOU NEED TO DO PAID COURESES..YOUR DETAIL IN EXPLANATION IS SUPERB.. ALSO PLEASE DO IOS DESIGN SYSTEM WORK FLOW .. THANKS
Very Informative keep it up sir, please make the same kind of video for IOS ( Human Interface Guidelines ). Love from India ❤
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?
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
Thanks so much for this course. Great video as always.
Hey Joseph! Can you make a video on Human Interface Guidelines (HIG) jus like this? Thanks in advance.
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?
could you make a video about human interface guidelines that how we use those guidelines in our design
It was so helpful, 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?
Can you make a video on margin & Padding in ui
I wanted to ask if you will be making a video on Prototype and Case study Writng.
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
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
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
This video is awesome! Thank you for a detailed video
You're welcome. I appreciate your commendation
You just got one subscriber....great job
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 .
that was an awesome tutorial🔥 thank you
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?
It was a very useful tutorial for me. Thanks from Ukraine 🇺🇦
awsome tutorial brother.. ty so much
That was an awesome journey. I learn a lots about MD from this tutorial. Thank You Sir.❤❤
It was easy to understand 'material design' thanks to you. Thank you soooooo~ much! 🙏
When you do something wow. Any courses from you??
Great video every designer must watch, thanks for sharing.
I just spent my day creating a typography style as done in the video, when I clicked create style... the styles that are created are completely something different. The same 12px with auto line-height is assigned to every style and the correct values appear in the Figma token's plugin. What do I do, please, I don't know if I'm missing something.
It's a masterclass for free.
Hi Sir, thanks for this video. Quick one: my Figma tokens plugin doesn't display the JSON tab. please what can I do?
Thank you for the knowledge Sir.. I appreciate it a lot.
Great tutorial! thanks!
This is soooooo valuable and well made! Thank you so much!
How do I determine the typography of different devices. Seeing as material 2 isn't really working on my laptop
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.
Am a beginner on ui/ux course, have watched your 10hrs video on ui/ux before but i want to ask a question, how can i differenciate typography size for different screen, how can i choose typography size and setnit for different screen sir
can you please do IOS design guideline course ..
Please do i have to keep the components and styles created forever or always have to create new ones all the time?
This is amazing, can you please make the same as for human interface design 🍎🥲
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.
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😍
This is a great tutorial.
If we tweaked the opacity for different states of a button, won't it detach the color styles and create further problems
bro how to use tracking property in typography ? Material Ui reccomends to use it in rem unit for web but how to convert the tracking property unit to rem ?
16px = 1rem