The UI/UX Crash Course for 2023 - Learn UI/UX Design

bit.ly/3IhZwSx 👈 Learn UI/UX Today. Use "UI2023" for 23% Off!
-- Today, I'm releasing my annual UI/UX crash course. You're going to learn about UI/UX design by creating a landing page for a fictional business called 'Fauxica'. We're going to use Figma (figma.com) so be sure to create an account.
Watch the HTML/CSS process of this design: • The 2023 Frontend Deve...
You're going to a lot about UI/UX design, along with many of the features and workflows of Figma. From UI design fundamentals such as colors, typography, white space, contrast, color, visual hierarchy & more.. To Figma components, component variants, auto-layout, the grid, prototyping & more..
Resource file (just a logo!):
coursetro.s3.amazonaws.com/st... (right click / save as)
0:00 - Intro
1:11 - Figma UI Overview
4:00 - Getting Started
5:55 - Creating a Grid
7:10 - Placing a Logo
10:42 - Navigation & Components
19:13 - Component Variants
31:16 - Heading
36:30 - Subheadline
41:20 - Call to Action Buttons
53:20 - News section
55:15 - Stark Contrast Plugin
1:02:39 - Using the Figma Community
1:05:21 - Gallery Section
1:16:24 - Final Result
Let's get started!
#uiux #webdesign #figma
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Watch the 2nd part of this series, where we use HTML and CSS to make it a reality in the browser: ruclips.net/video/Kl3nOXQjVnQ/видео.html

[@sportshome6504]

Will be glad for this

[@pixxellagemedia8145]

I’ve been expecting these tutorials 😊

[@NishalIllustration]

❤️

[@israelamos8896]

Thanks for inspiring us. We are waiting.

[@manggairis]

Kyle got me here. Lol

[@emmanuellaarikpo]

Took a paid course for 7 weeks and i've learnt more in the past hour and a half than i learnt in 7 weeks. Thanks Gary!

[@Jim-bh2tb]

Is it really worth it? did you also try his css paid course?

[@naitikbhavsar4195]

stop gimmicking

[@abdullahtayeh1853]

stop lying!!!!!!!

[@morozovanthony]

Thanks for letting know that you took a paid course

[@ahall9839]

Were you comatose?

[@shishazizou6519]

I love your work! And the way you teach. It will be so cool if you could do intermediate to advance courses on Figma, Thank you.

[@cxrlitosway]

dude, you're a legend. Thank you for your videos, I've looked and looked and came across yours, yours is definitely one of the best.

[@jasonlantz3808]

love your stuff.... it's nice when someone can bridge the gap between dev and design....

[@nasirify]

less than 24 minutes and I can already say that you are such a good teacher! Thanks 😘

[@uifry]

I've learned so much from watching this video. Your attention to detail and the way you break down the design steps make it easy to follow along.

[@abdisamadkhalif4283]

Congrats on the 1M, Gary! Thanks for the crash course!

[@cpjordan254]

Great class! I'm learning Figma while I learn full-stack web development. I quickly realized that coding without a design is painful and ineffective for me. This video has helped me fill in many blanks with Figma and UI design in general. Thank you!

[@Dochu00]

Wow...this is the motivation I needed to move forward. I just started learning Web development..but then again I realised exactly the same..and I hope I get enlightenment from this point onward.

[@user-si1do8zg9d]

Thank you , love your content and your teaching style. This is a great crash course for figma.

[@priceandproduct]

I just fall in love with this class. This is an incredible class indeed. Thanks, Gary!

[@sunitaugwuja9367]

I love love this tutorial, leant really a lot. was skeptical at first but grateful I took it. Thanks

[@chrisbolson]

Thanks for a great tutorial. I am just starting to learn Figma - this type of step-by-step tutorial is great and easy to follow.

[@robertoerazo6844]

You're excellent teaching, thank you so much for this content!

[@mahammujahid5920]

This was incredible, thankyou you for this detailed video. looking forward to more videos like this.

[@ernesto8273]

The video quality is wonderful. 2023 energy

[@karinljunggren22]

You are so easy to listen to! Love your work!

[@ComostroTirsoJose]

My favorite part was when you explanin the word "subjetive" for those who are not native in English like me. THANK YOU FOR THAT.

[@xiaodhruv7693]

This is hands down the best figma and designing course in the entire youtube 🙌

[@SERAPHINADILUPI]

This hour long video fully convinced me to pursue a career in this. Genuinely informative, interesting and so well explained. Thank you!

[@ZebrazRus]

hows it going ?? would love to follow throught w this as well !

[@Shivangi-ry8ly]

Thankyou soo much! This crash course has been really helpful. 😊

[@NadiaOmer]

Great Content and awesome the way you explain about components ..... I am learning UI UX and new to Figma ...... But from this I really wanna join your complete course of UI UX with coding in CSS . By the way I have an illustrator experience. But the way you explain every thing seems super easy to me. Glad to have your amazing guidelines ..... Would love to join your complete course........Thanks Mate

[@limbo3545]

I always coded in HTML and CSS directly. My first impression in figma was that it looks painfully complicated, especially aligning elements and creating some simple effects. On the other hand it seems more intuitive for responsive layouts and I could detect problems while designing. That's nice. I think I give it a try.

[@DesignCourse]

I've made videos on this topic before, but it's always advisable to start first in a design app like Figma, as opposed to winging it in html/css for a few reasons. First, you can iterate (make changes) a million times faster. "Hm, what would this column look like over there?" -- in code, you'd have to restructure a bunch of CSS and/or HTML. In Figma, you just move it over. It makes the process of designing way easier, and you're almost guaranteed a better design 99.9999% of the time. ;)

[@limbo3545]

@@DesignCourse I'm pretty sure you're right. I started with the built-in editor in netscape navigator back in the days and I loved it as a kid. Just use the correct browser. 😆

[@okiroroobrutheanagho8779]

Nice. Please keep doing more of this. Thanks

[@brendan1516]

Love your content. I’ve been using XD for a while and have a bunch of existing projects in that workspace and I’m very comfortable using it. I notice you always use Figma and I was wondering if you would recommend I swap my projects over to be more future proof or if it’s not a big deal.

[@TheTimeCapsule00]

AMAZING CRASH COURSE!!! THANK YOU

[@aidrivendesigners]

Absolutely Amazing Teacher and clean design!!!

[@amirankusht8286]

Very affordable and practical, thanks!

[@faizanahmed9304]

Thank you brother for this video! congrats for 1M subs

[@indikasandun8997]

Thanks a lot ❤. This is very informative

[@sherazkhalid1975]

A great tutorial. Learnt a lot from your course.

[@tonystarkmowa]

Really thanks it took me nearly 2 hours on watching your video and doing things in my figma

[@Dylanwade_]

I have never done anything like this, this was so much fun!

[@ravenalexa]

Amazing. Will be purchasing the course!

[@malithkanishka8433]

Thank you very much... learnt a lot! 😍

[@davidkubacka329]

Great course , thanks for uploading !

[@sul-dev]

This is awesome. Great job!

[@azure3379]

Most amazing introduction to Figma. Thanks for this valuable contribution.

[@marwaklach1381]

Great job ,Thank You So Much ! 😍

[@Hapixdesign]

The best tutorial video I have seen in the field of design, thank you👌👌

[@abigaillee18]

wooow
mehn i'm so thrilled right. Thanks so much, i really learnt a lot within few minutes.

[@ruthchernous6087]

Brilliant UI and Figma crash course. I took a ui course and although it was good with the principles. I got more value learning how to use Figma with this course. Also very well explained and easy to follow. Thanks a lot for taking the time to create and share your videos

[@UsmanJamil000]

Learned a lot! Thank you so much

[@sachetkk3828]

Thank you sooo much you helped alot with tips and tricks

[@kareem2928]

Thank you, You are really awesome!

[@sul-dev]

12:37 You can also hold [Shift + Alt then drag] to duplicate and move in 1 action

[@user-sc5kf4mj8q]

yes we can do both

[@oscarcuban1319]

Most EXCELLENT course thanks !!!!!!!

[@LouraBarrand-hi6nr]

thanks i never think that will work so good job!

[@ahmadradman2006]

I really enjoyed it, thank you so much .

[@hassaneoutouaya]

Thank you so much !

[@roninspect4357]

Thanks a lot for the crash course

[@marnix1]

Amazing session sir as always you're great sir, thank you so much for this session ❤❤

[@michalbasar]

great course, thanks a lot!

[@vathclass]

Appreciate that!

[@a_pifagor]

Thanks a lot!

[@makysujo1986]

Thanks!!!

[@alexbramwell1870]

I'm certain Adobe will pump this into Figma but the catch being it's fully layered (adjustable)
That being an additional sub in a Figma plan no doubt!

[@burugdoy9032]

Thank you!

[@muqaddaswahid2069]

Awesome, what a detailed video ✌✌✌✌

[@matchettxyz]

ur a legend gary, lots of love from ireland

[@user-iv9mj4oz6p]

Thank you very much, Gary

[@bostonsamus9466]

Great stuff! I didnt find the link to dl the font at the start, still valuable to watch!

[@spaula1114]

thank you so much for that

[@gambomaster]

Thanks 🙏

[@carromgoalspocket2147]

it reaally cover most of the web design thank you

[@user-tm5dg2uv4u]

thank you very much i learn your video alot

[@bithagrop2539]

Tysm

[@sjoodsjood]

Thank u 💖 more videos

[@saadowain3511]

Through the years.
Still amazing as we know you

[@Beasts679]

Sir thanks for course i learn so much from you

[@muhammadtaif6592]

very helpful just amazing

[@drkl9066]

Amazing!

[@ClayENMusic]

Thank you man, you saved me my career.

[@iRushab]

White this course was helpful, I am still uncertain if UI principles will be covered in the paid course. The thing that put me off was about random placement of elements, not giving importance to grids and layouts, no typography scales, and the choice of images. I want to learn UI/UX design by the rules first and then decide which rules can be broken and which cannot. Thanks, Gary!

[@ivikiiii3169]

Thank you

[@girlpnclyrics6371]

Really thanks man

[@apenino]

great work sir

[@wibbs88]

Good stuff. Moving onto to your next vid before converting to Next.js.
One thing though on the button. Why not just Auto Layout the Browse our collection text then fill the background then you can adjust padding etc accordingly.? - rather than text, rectangle, align, group, space etc.

[@BetaBilim]

it would be great if you publish a book or a course about ui design for developers.

[@mikoajrybarski760]

Thanks

[@iddl4551]

U r amazing ❤❤❤

[@debbieifeoma4841]

Thanks gary

[@Beginnings.Unfold]

i love this and i made it too sir Thankyou

[@Yayesew]

በጣም አመስግናለው

[@job1cr0re.]

thank you very much sir ji 🥰🥰🥰

[@extremecouponing91]

Amazing course 😁

[@margaret_rejnowska]

Can you create video about your approach when designing a mobile app for different phones (Apple vs Android) and design systems?

[@updates4043]

This is a brilliant tutorial video. Can you create an updated video as the Auto layout has got some major update?

[@hakimmaghnem6288]

This deserves a million views

[@Sam-vz7pf]

You are awesome bud..

[@TheStrategist314]

This course was fuckin dope. Just subbed, here's your comment, and I just signed up for your course. The trifecta.

[@harishnegi316]

Please make full video on Design System for Web project from scratch to medium level

[@nilalias8897]

This was awesome. I'm so glad I watched it, I learned tons of stuff and had a lot of fun discovering Figma. Thanks!

[@kamaliddinsattorov7493]

you are very good

[@bengalipandas]

genius bro

[@shubhamsharma-cw7xi]

awesome

[@MatichekYoutube]

Boss would say ... "make a logo bigger, yes?". Thanks for sharing.

[@didierliango6402]

very interesting

[@cHeeeseEggs]

ayyyy where my fellow DesignCourse students at?!

[@fvandrade]

Aí fazia tempo que não usava css... mas com seu vídeo 📹 retornei mas não 👎 tenho muito como aplicar por aqui