UI Design For Coders

In this video you will learn important design principles and what to think about when creating UI/layouts including contrast, typography, whitespace, etc

Designcourse YouTube Channel:

Adobe XD Project File:

💖 Become a Patron: Show support & get perks!

Website & Udemy Course Links:

Follow Traversy Media:

0:00 - Brad's Intro
0:58 - Gary's Intro
2:41 - A look at the first design
6:12 - Header Redesign
18:21 - Hero Section
31:00 - Features Section
38:00 - Testimonials Section
47:58 - Review & Final Thoughts

[DesignCourse]

Thanks for having me on. It's an honor for sure!

[COLUMBIA]

I want to take some time to just appreciate the incredible work Brad does and his immense dedication to giving us useful/education content. I've seen many YouTubers take a break without even mentioning leaving, they just disappear. Yet Brad took the time to be open and honest(like always) about his current situation and how he needs a break. On top of this, he continues to provide quality content by hosting other amazing YouTubers.

Without Brad, I wouldn't have the knowledge or love for coding as I do now. Without Brad, I would not have found other great YouTubers like DesignCourse.

Take all the time you need to feel better Brad. I look forward to your return and feel better.

[alcatrazz.]

2:02 "It is horribly ugly"
Me: *Sweating because I made something very similar yesterday and was proud of the UI*
Guess this tutorial REALLY is needed for people like me

[gonzaddv]

Best crossover in web dev history no cap !

[eduriseworld]

This is super awesone, Traversy you're inspiring us a lot in making project based videos as well. Thank you for the hard work.

[TheGitGuild]

This is actually really important topic in a well put together video. Us, coders generally lack in design and marketing skills. So if you make a marketing version of that, it would be amazing as well !

[lesterjohnpulanco]

These two great youtubers/developers are the reason why I am now a Web Designer. No crap. Since college, I am watching them especially Traversy. I started subscribing to him since 2017 when he has around 100k subs at that time.

[lourenxoweb]

Already hyped to watch the video. You and Gary are one of my inspirations so I couldn't be happier!

[MutebiBashir]

Almost an hour got done without me noticing. Thank you Traversy. Please make more of such videos.

[steffy]

Gary's coursetro was one of initial tutorials I watched for angular when I just started, when I was in my job's first day...I joined as a Java dev at my first job after University, didn't knew a thing about angular, but my position required to learn frontend as well...so Gary's videos did help me in my baby steps ...so happy for this cross over ...would love to have one with academind's Maxmilian and Mosh hamedani...I love their way of teaching ♥️

[TheDeathMongrel]

Brad, thanks for keeping true to your word. Quality. I don't think in all of my searches I've ever come across DesignCourse, if you hadn't asked him here.

[josuebarros-desenvolvedorw]

I am a fullstack web developer with php but I'm having a hard time doing the UI for my websites and systems... i will start to watch this wonderful video because I love Brad and Gary's work!!!

You two rocks!!!

[christerjohanzzon]

If you are looking to get yourself a degree in Front End, all you need is right here. Take Brad's courses for all the "back end" stuff...and take Gary's for all UI/UX front end stuff. Then head over to your local University and you'll have no problems getting that diploma or certificate. You could even skip university completely and apply for job positions, but most employers do prefer a degree or certification in the tehcnology.
Great content, Brad and Gary! Really appreciate it!

[DeepakKumar-obps]

This is exactly what I always wanted. I follow both of you, I have been following Design Course for UI UX advices. And I am primary a back-end developer this is the PERFECT amalgamation.

[TheJacklwilliams]

I need to step back through this and take notes. This is great stuff. As someone who is working to freelance in the field, the amount of things to master is huge. Thankfully, in the past, I've been complimented on some of the UI work I did (hundred years ago) and also in regards to presentations, etc... However, having some "rules" and understanding some of the concepts laid forth is very useful. This, is gold. Nice work. Thank you, subscribing to your channel. Brad, once again, you are the man, great guest star on today's show! ;-)

[Rizon]

This tutorial will bring my Myspace to a whole new level.

[ead]

God damn! I was aware Brad had taken a break but I sure was delighted to hear your voice.. In my head I was like, yo! It's Gary! Great to have you on here.. 😆

[lifeslittleescapes]

Thanks Gary Simons...
I thought I never would be good enough in front end...
During this period, I accidentally found your design fundemental free course...that course gave me confidence, and I still can't believe that I have improved a lot...and my friends are amazed by my change now...
Bt unfortunately I am unable to take ur course on scrimba...

Bcs it's too expensive for me... it's more than my monthly income...

Anyway thanks a lot

Thanks a lot...

[davidconnelly]

I've watched a few of Gary's videos before. I might have even gone through a paid course or two. Gary Simons is a class act. For somebody to be an expert at both coding and design is super rare. I cannot think of anyone else who has quite the same skillset as Gary. Great video! Thank you, Brad and Gary.

[vikrantbhat]

Thanks @brad for having a diverse video like this on the channel!