Material Design For UI UX Designers - UI UX Design Tutorial

Join My UI UX Design/Low Code Development Bootcamp Starting on the 30th Of May.
Duration : 3 Months ( Mon- Fri )
Sessions : LIVE Sessions All Through
Reason to Join : You will have 4 LIVE Projects to add to your resume/CV
Link to Join : www.lighthall.co/class/6602f6...
In this course I demonstrated the need to use a design Language in the building of our style library as UI UX Designers.
And I used the Material Design language to achieve this.
Donate To Support Instructor : / devanddesign
10 hour video UI design course : • Figma Tutorial For UI ...
Follow Instructor On :
Twitter : @joe_brendan_
Instagram : @joseph_brendan_
Here is the course outline :
00:00:00 - Introduction
00:02:01 - What is a UI UX Design language
00:02:28 - Introduction to Material Design
00:03:26 - Design Tokens
00:18:33 - Material Design Tokens
00:30:55 - Create a typography system using Material Design
01:00:34 - Create a color system using Material Design
01:35:48 - Create responsive column grids using Material Design
01:48:15 - Create shadow effects using Material Design
02:00:28 - Create user friendly components using Material Design

[@pratisthabuddhacharya]

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]

The best material design tutorial. A well-spent two hours and half of my life. Thank you sir🔥

[@sen_se___]

Probably the best 2 hours of my design life this year.....

[@praiseelechi8832]

Thank you very much, Joseph Brendan. This video is so insightful, packed and instructive. Thanks for sharing.

[@MaggieKayy]

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

[@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

[@FaisalAliSideez]

You, my friend, are the best teacher! Your teaching style and content delivery is amazing!

[@imranhossainsakil4576]

That was an awesome journey. I learn a lots about MD from this tutorial. Thank You Sir.❤❤

[@Wavvyy_07]

Thanks so much for this course. Great video as always.

[@jean-lais]

Thank you for your sacrifices to help us learn. Keep it up

[@ridz4912]

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.

[@karolpimentel4866]

This is soooooo valuable and well made! Thank you so much!

[@mohammedramadan6102]

this is the best UI UX Design Tutorial I seen ever THANK YOU FORM DEPTH OF MY HART

[@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.

[@jinyoungyi209]

It was easy to understand 'material design' thanks to you. Thank you soooooo~ much! 🙏

[@user-uw2dv1ig4r]

Best course ever about Material Design published ❤

[@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 ?

[@MAS_MATRIX]

Love the FreeCodeCamp course you did a great job!

[@rubenphilip]

BRILLIANT, thanks a lot, Joseph

[@modupeikimot2049]

Great video every designer must watch, thanks for sharing.

[@sundaynancy472]

Thanks for the tutorials sir Well detailed and explained

[@DsMaryL]

Thanks a lot!! Now everything is clear!

[@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 👏

[@ganna.hanna_]

It was a very useful tutorial for me. Thanks from Ukraine 🇺🇦

[@Thisfatemeh]

It was great and helps me a lot👏thank you and good job

[@moiGchannel]

Thank you for the knowledge Sir.. I appreciate it a lot.

[@alejandrojerez2760]

Great tutorial! thanks!

[@abubakarsalamat2600]

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😍

[@fatemehfattahi7542]

that was an awesome tutorial🔥 thank you

[@anyajustina1011]

This video is awesome! Thank you for a detailed video

[@DevAndDesign]

You're welcome. I appreciate your commendation

[@nahidabdali2340]

It was so helpful, thanks😊

[@thaile6149]

thank you so much for teaching me material design

[@ishaan-in2hv]

awsome tutorial brother.. ty so much

[@TheKrazyCamera]

The best UI UX Design Tutorial design tutorial

[@tazz763]

Thanks for this video, very helpful

[@eugeniofrassica5325]

Thank you. Nice job 👍

[@jamsonmsuzi9645]

Well Explained Tutorial

[@ashwini5142]

Thank you so much for a very informative video sir🙂👏👍

[@paultimileyin9788]

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

[@ThankGodOkpe]

Love you content. An amazing teacher

[@socramhaven]

This is a great tutorial.

[@sundayamoo84]

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...

[@shefalishanker2712]

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]

this is material design 3 only

[@fakenewssisv2752]

You are a very good teacher. I learned a lot from you and hope to land a job soon thank you.

[@DevAndDesign]

Thanks

[@viktoralexander4284]

nice to see a perfect working brain. Keep it up

[@chironofficial7798]

Very very useful

[@naijasongs3462]

I love this channel

[@mrajax_0101]

Thank you so much please make more videos

[@chocomatcha735]

Hi, I really enjoy your video. Could you make playlist for your UI/UX videos?

[@patienceyeboah7798]

You just got one subscriber....great job

[@eidghazala]

Thank you for your effort

[@vrajgajjar-cm7fq]

Thanks for comprehensive guide. It made material design and design system very easy to understand and use. Again thanks a lot sir🫡

[@oluwabukunmiawosusi1691]

Thank you sir!

[@VinodNanaiah]

The best!

[@hananjarmakani3390]

realy nice and useful course thank you

[@DevAndDesign]

You're welcome

[@SumitSharma-og6qp]

Beautiful

[@hakeemadjei2035]

This is really good..

[@alinensiah1123]

That is my favorite Chanel

[@jainabaceesay5147]

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

[@bethelnwafor5017]

Great teacher

[@DevAndDesign]

Thank you

[@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...

[@ajeethraja3274]

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]

Nice opinion I would do that

[@Karim-wd2je]

Thank you, my friend :)

[@DevAndDesign]

Thank you too. I appreciate

[@elliem1]

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?

[@rajsoni8924]

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]

Thanks

[@aniedi4969]

If you can make a video on this IOS (human interface guidline) I will really be grateful. Thank you.

[@benjifrempong4430]

very great tutorial. I want to know what laptop you use.

[@gaurav_designlab]

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?

[@chijiokeuhegwu576]

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?

[@henrykmatthew3900]

I think the material design website has changed. It look so different now sir

[@estherbassey4965]

Great tutorial! Thank you. However, when i was creating my buttons, outline width came up. Could you please explain what it is?

[@MG-yz9cd]

Very Informative keep it up sir, please make the same kind of video for IOS ( Human Interface Guidelines ). Love from India ❤

[@skyrim3318]

Please make complete UX course PLEASEEEEEEEEEE 🥺🥺🥺

[@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???

[@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.

[@TheSanatv]

It's really helpful. But i have question- how you choose the neutral key color and neutral variant key color ?

[@shlomitgueta]

you are the best. please countinu to make videos in figma. more tutorials from begining to end.

[@AchyuthKalva]

Hey Joseph! Can you make a video on Human Interface Guidelines (HIG) jus like this? Thanks in advance.

[@Catryness]

01:52:55 I can't edit out the Spread option, it is grayed out. Why is that? Amazing tutorial by the way!

[@elijahmbang2728]

Please make a video for human interface guidelines for apple.

[@AbdulRehman-uk9sz]

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 ?

[@DevAndDesign]

Yeah this explains that better and breaks it down more

[@hafsatyusuf9693]

I wanted to ask if you will be making a video on Prototype and Case study Writng.

[@ytrpaz]

this is great

[@DevAndDesign]

Thanks

[@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.

[@kandycan]

It's a masterclass for free.

[@josephgraphix5070]

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

[@pavinclash6843]

could you make a video about human interface guidelines that how we use those guidelines in our design

[@jonakisahnaz7424]

hey bro in the typography section the recommended tracking for title medium is set to 1.15 but can you tell me what is the unit for this tracking? is it 1.15px or 1.15rem?

[@israelebiti8143]

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?

[@tonys490]

YOU NEED TO DO PAID COURESES..YOUR DETAIL IN EXPLANATION IS SUPERB.. ALSO PLEASE DO IOS DESIGN SYSTEM WORK FLOW .. THANKS

[@sak2752]

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?

[@tasneema9957]

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?

[@princecachinedu]

This is great but I couldn't find the figma tokens on plugin in figma, please I need help on that.

[@updates4043]

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?

[@oremakindeboluwatife9676]

hii, thank you so much for this video but I want to ask, what’s the purpose of creating various references design tokens and sending to the developers even after creating the actual system design token?

[@RavitejaYarra-hq2ji]

Can you make a video on margin & Padding in ui

[@preciousgiftchinedu7373]

How do I determine the typography of different devices. Seeing as material 2 isn't really working on my laptop

[@cryptopuncher]

Second view ✌️. Thanks boss

[@anjumayoub9077]

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.

[@iredeadekunle2707]

Hi Sir, thanks for this video. Quick one: my Figma tokens plugin doesn't display the JSON tab. please what can I do?