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.
@prajwalsharma2794
Жыл бұрын
Ohh thanks Pratistha. This will certainly help
@jairusnouvel4780
2 жыл бұрын
The best material design tutorial. A well-spent two hours and half of my life. Thank you sir🔥
@MaggieKayy
2 жыл бұрын
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
@queendev0892
4 күн бұрын
This is the best, simple straight to the point video on material design. Thank you sir 🙏 ❤
@gideonebikade2791
Жыл бұрын
I love how you were able to break down these complex processes into something simple. The time spent here was worth it!!!
@ivan9168
Жыл бұрын
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 ?
@sen_se___
2 жыл бұрын
Probably the best 2 hours of my design life this year.....
@austineneanya4082
Жыл бұрын
This guy is a born teacher. The way he explains this complex subject and make it look so simple is nothing short of amazing 👏
@FaisalAliSideez
2 жыл бұрын
You, my friend, are the best teacher! Your teaching style and content delivery is amazing!
@sundayamoo84
2 жыл бұрын
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...
@Haider-j6u
Жыл бұрын
Best course ever about Material Design published ❤
@mohammedramadan6102
Жыл бұрын
this is the best UI UX Design Tutorial I seen ever THANK YOU FORM DEPTH OF MY HART
@ridz4912
9 ай бұрын
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.
@prajwalsharma2794
Жыл бұрын
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.
@njabulo316
4 ай бұрын
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.
@Access_GrantedX
Жыл бұрын
The best UI UX Design Tutorial design tutorial
@paultimileyin9788
9 ай бұрын
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
@lindsayz866
Жыл бұрын
Best Material Design video I've watched! Thanks so much for explaining this!
@ojofolakemi1927
Жыл бұрын
Best instructor ever. Thanks for ur great work, Mr Joseph
@shefalishanker2712
9 ай бұрын
Thank you for creating such an informative video tutorial. It would be great to look forward for similar video for Material design 3 also
@baazigar5
9 ай бұрын
this is material design 3 only
@rajsoni8924
2 жыл бұрын
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 🍻
@DevAndDesign
2 жыл бұрын
Thanks
@aniedi4969
2 жыл бұрын
If you can make a video on this IOS (human interface guidline) I will really be grateful. Thank you.
@praiseelechi8832
2 жыл бұрын
Thank you very much, Joseph Brendan. This video is so insightful, packed and instructive. Thanks for sharing.
@fakenewssisv2752
2 жыл бұрын
You are a very good teacher. I learned a lot from you and hope to land a job soon thank you.
@DevAndDesign
2 жыл бұрын
Thanks
@henrykmatthew3900
Жыл бұрын
I think the material design website has changed. It look so different now sir
@rubenphilip
Жыл бұрын
BRILLIANT, thanks a lot, Joseph
@movoyemickele
Жыл бұрын
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.
@jean-lais
2 жыл бұрын
Thank you for your sacrifices to help us learn. Keep it up
@ganna.hanna_
5 ай бұрын
It was a very useful tutorial for me. Thanks from Ukraine 🇺🇦
@omarelouafi
Жыл бұрын
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...
@alinensiah1123
2 жыл бұрын
That is my favorite Chanel
@thaile6149
Жыл бұрын
thank you so much for teaching me material design
@vrajgajjar-cm7fq
10 ай бұрын
Thanks for comprehensive guide. It made material design and design system very easy to understand and use. Again thanks a lot sir🫡
@OluchukwuNnaji-cz5mj
Жыл бұрын
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???
@aghahowadaniel6090
2 жыл бұрын
please make a video on how to]o connect the plugin to our github repository. Thanks for all you do Joe.
@DevAndDesign
2 жыл бұрын
Great suggestion. would do that
@BryanBenibo
2 жыл бұрын
@@DevAndDesign yes great stuff thank you so much,
@kandycan
Жыл бұрын
It's a masterclass for free.
@sundaynancy472
2 жыл бұрын
Thanks for the tutorials sir Well detailed and explained
@imranhossainsakil4576
2 жыл бұрын
That was an awesome journey. I learn a lots about MD from this tutorial. Thank You Sir.❤❤
@gauravtyagi_in
Жыл бұрын
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?
@skyrim3318
2 жыл бұрын
Please make complete UX course PLEASEEEEEEEEEE 🥺🥺🥺
@artonthemind
2 жыл бұрын
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.
@elliem1
10 ай бұрын
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?
@modupeikimot2049
2 жыл бұрын
Great video every designer must watch, thanks for sharing.
@jinyoungyi209
2 жыл бұрын
It was easy to understand 'material design' thanks to you. Thank you soooooo~ much! 🙏
@Wavvyy_07
2 жыл бұрын
Thanks so much for this course. Great video as always.
@MAS_MATRIX
2 жыл бұрын
Love the FreeCodeCamp course you did a great job!
@ushadesai6306
Жыл бұрын
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.
@ishaan-in2hv
11 ай бұрын
awsome tutorial brother.. ty so much
@chocomatcha735
2 жыл бұрын
Hi, I really enjoy your video. Could you make playlist for your UI/UX videos?
@Thisfatemeh
2 жыл бұрын
It was great and helps me a lot👏thank you and good job
@viktoralexander4284
Жыл бұрын
nice to see a perfect working brain. Keep it up
@bethelnwafor5017
2 жыл бұрын
Great teacher
@DevAndDesign
2 жыл бұрын
Thank you
@ThankGodOkpe
Жыл бұрын
Love you content. An amazing teacher
@benjifrempong4430
2 жыл бұрын
very great tutorial. I want to know what laptop you use.
@Boldzite
Жыл бұрын
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
@Catryness
2 жыл бұрын
01:52:55 I can't edit out the Spread option, it is grayed out. Why is that? Amazing tutorial by the way!
@DsMaryL
Жыл бұрын
Thanks a lot!! Now everything is clear!
@MG-yz9cd
7 ай бұрын
Very Informative keep it up sir, please make the same kind of video for IOS ( Human Interface Guidelines ). Love from India ❤
@karolpimentel4866
2 жыл бұрын
This is soooooo valuable and well made! Thank you so much!
@fatemehfattahi7542
6 ай бұрын
that was an awesome tutorial🔥 thank you
@ajeethraja3274
2 жыл бұрын
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.
@DevAndDesign
2 жыл бұрын
Nice opinion I would do that
@patienceyeboah7798
2 жыл бұрын
You just got one subscriber....great job
@sharontamid
Жыл бұрын
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.
@moiGchannel
2 жыл бұрын
Thank you for the knowledge Sir.. I appreciate it a lot.
@anyajustina1011
2 жыл бұрын
This video is awesome! Thank you for a detailed video
@DevAndDesign
2 жыл бұрын
You're welcome. I appreciate your commendation
@abubakarsalamat2600
2 жыл бұрын
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😍
@elijahmbang2728
Жыл бұрын
Please make a video for human interface guidelines for apple.
@TheSanatv
2 жыл бұрын
It's really helpful. But i have question- how you choose the neutral key color and neutral variant key color ?
@jescaochieng5601
2 жыл бұрын
Nice one. It took me 10hr to create the typography tokens.
@DevAndDesign
2 жыл бұрын
Nice work. Glad you took time to learn
@jainabaceesay5147
2 жыл бұрын
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
@mrajax_0101
2 жыл бұрын
Thank you so much please make more videos
@Cdg191
23 сағат бұрын
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
@jamsonmsuzi9645
10 ай бұрын
Well Explained Tutorial
@daniifiok
2 жыл бұрын
Nice explanation, there are some new things added in the material design website, how do we incorporate what you have taught.
@DevAndDesign
2 жыл бұрын
Just follow the documentation the way they added it. It's rules. I should make an update on the new things
@daniifiok
2 жыл бұрын
@@DevAndDesign yeah that will be helpful, you can tell me what to do and those this video have the principles of materials design
@estherbassey4965
2 жыл бұрын
Great tutorial! Thank you. However, when i was creating my buttons, outline width came up. Could you please explain what it is?
@sterwinfernandez4900
2 жыл бұрын
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
@Bangalore-j7l
2 жыл бұрын
Thank you so much for a very informative video sir🙂👏👍
@tonys490
2 жыл бұрын
YOU NEED TO DO PAID COURESES..YOUR DETAIL IN EXPLANATION IS SUPERB.. ALSO PLEASE DO IOS DESIGN SYSTEM WORK FLOW .. THANKS
@israelebiti8143
7 ай бұрын
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?
@alejandrojerez2760
Жыл бұрын
Great tutorial! thanks!
@shlomitgueta
2 жыл бұрын
you are the best. please countinu to make videos in figma. more tutorials from begining to end.
@tazz763
2 жыл бұрын
Thanks for this video, very helpful
@nahidabdali2340
Жыл бұрын
It was so helpful, thanks😊
@eugeniofrassica5325
2 жыл бұрын
Thank you. Nice job 👍
@chironofficial7798
Жыл бұрын
Very very useful
@princecachinedu
Жыл бұрын
This is great but I couldn't find the figma tokens on plugin in figma, please I need help on that.
@pavinclash6843
2 жыл бұрын
could you make a video about human interface guidelines that how we use those guidelines in our design
@aresahmed5709
Жыл бұрын
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 .
@brunochidozie
2 жыл бұрын
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?
@DevAndDesign
2 жыл бұрын
I Just ensured that they are not too far from themselves in the spectrum. Also I ensured that they can all contrast themselves
@hafsatyusuf9693
2 жыл бұрын
I wanted to ask if you will be making a video on Prototype and Case study Writng.
@hananjarmakani3390
2 жыл бұрын
realy nice and useful course thank you
@DevAndDesign
2 жыл бұрын
You're welcome
@preciousgiftchinedu7373
Жыл бұрын
How do I determine the typography of different devices. Seeing as material 2 isn't really working on my laptop
@AchyuthKalva
2 жыл бұрын
Hey Joseph! Can you make a video on Human Interface Guidelines (HIG) jus like this? Thanks in advance.
@naijasongs3462
2 жыл бұрын
I love this channel
@sundayamoo84
2 жыл бұрын
please can you do a video for the github token code thanks.
@updates4043
10 ай бұрын
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?
@SumitSharma-og6qp
8 ай бұрын
Beautiful
@josephgraphix5070
2 жыл бұрын
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
@sak2752
2 жыл бұрын
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?
@socramhaven
2 жыл бұрын
This is a great tutorial.
@asmaarooj6490
Ай бұрын
thankyou so much!
@modupeikimot2049
2 жыл бұрын
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.
Пікірлер: 184