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

Рет қаралды 409,266

Күн бұрын

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!

Пікірлер: 225

@DesignCourse Жыл бұрын

Watch the 2nd part of this series, where we use HTML and CSS to make it a reality in the browser: kzfaq.info/get/bejne/gdJjobKJttC6noU.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 10 ай бұрын

Thanks for letting know that you took a paid course

@ahall9839 9 ай бұрын

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 10 ай бұрын

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.

@uifry 9 ай бұрын

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.

@riveto_ir Жыл бұрын

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

@jasonlantz3808 Жыл бұрын

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

@abdisamadkhalif4283 Жыл бұрын

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

@priceandproduct Жыл бұрын

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

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

@user-si1do8zg9d Жыл бұрын

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

@sunitaugwuja9367 Жыл бұрын

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

@ernesto8273 Жыл бұрын

The video quality is wonderful. 2023 energy

@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 8 ай бұрын

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.

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

@mahammujahid5920 Жыл бұрын

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

@xiaodhruv7693 7 ай бұрын

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

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

@robertoerazo6844 Жыл бұрын

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

@tonystarkmowa Ай бұрын

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

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

@sul-dev Жыл бұрын

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

@user-sc5kf4mj8q 2 ай бұрын

yes we can do both

@karinljunggren22 7 ай бұрын

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

@okiroroobrutheanagho8779 Жыл бұрын

Nice. Please keep doing more of this. Thanks

@SERAPHINADILUPI 9 ай бұрын

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

@ZebrazRus 2 ай бұрын

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

@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

@Dylanwade_ 11 ай бұрын

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

@Shivangi-ry8ly Жыл бұрын

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

@faizanahmed9304 Жыл бұрын

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

@TheTimeCapsule00 Жыл бұрын

AMAZING CRASH COURSE!!! THANK YOU

@amirankusht8286 10 ай бұрын

Very affordable and practical, thanks!

@aidrivendesigners Жыл бұрын

Absolutely Amazing Teacher and clean design!!!

@ruthchernous6087 7 ай бұрын

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

@davidkubacka329 Жыл бұрын

Great course , thanks for uploading !

@Hapixdesign Жыл бұрын

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

@ravenalexa Жыл бұрын

Amazing. Will be purchasing the course!

@sul-dev Жыл бұрын

This is awesome. Great job!

@azure3379 Жыл бұрын

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

@indikasandun8997 Жыл бұрын

Thanks a lot ❤. This is very informative

@abigaillee18 Жыл бұрын

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

@sherazkhalid1975 Жыл бұрын

A great tutorial. Learnt a lot from your course.

@UsmanJamil000 10 ай бұрын

Learned a lot! Thank you so much

@bostonsamus9466 Жыл бұрын

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

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

@malithkanishka8433 11 ай бұрын

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

@LouraBarrand-hi6nr 9 ай бұрын

thanks i never think that will work so good job!

@sachetkk3828 Жыл бұрын

Thank you sooo much you helped alot with tips and tricks

@kareem2928 Жыл бұрын

Thank you, You are really awesome!

@marwaklach1381 10 ай бұрын

Great job ,Thank You So Much ! 😍

@iRushab 9 ай бұрын

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!

@graftdigital Жыл бұрын

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.

@michalbasar 3 ай бұрын

great course, thanks a lot!

@roninspect4357 Жыл бұрын

Thanks a lot for the crash course

@ahmadradman2006 6 ай бұрын

I really enjoyed it, thank you so much .

@margaret_rejnowska Жыл бұрын

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

@carromgoalspocket2147 10 ай бұрын

it reaally cover most of the web design thank you

@vathclass Жыл бұрын

Appreciate that!

@hassaneoutouaya Жыл бұрын

Thank you so much !

@oscarcuban1319 7 ай бұрын

Most EXCELLENT course thanks !!!!!!!

@saadowain3511 Жыл бұрын

Through the years. Still amazing as we know you

@marnix1 Жыл бұрын

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

@matchettxyz 6 ай бұрын

ur a legend gary, lots of love from ireland

@spaula1114 Жыл бұрын

thank you so much for that

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

@user-iv9mj4oz6p 9 ай бұрын

Thank you very much, Gary

@a_pifagor Жыл бұрын

Thanks a lot!

@updates4043 9 ай бұрын

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

@muqaddaswahid2069 Жыл бұрын

Awesome, what a detailed video ✌✌✌✌

@BetaBilim Жыл бұрын

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

@burugdoy9032 11 ай бұрын

Thank you!

@gambomaster Жыл бұрын

Thanks 🙏

@girlpnclyrics6371 9 ай бұрын

Really thanks man

@user-tm5dg2uv4u Жыл бұрын

thank you very much i learn your video alot

@drkl9066 Жыл бұрын

Amazing!

@ClayENMusic 11 ай бұрын

Thank you man, you saved me my career.

@makysujo1986 7 ай бұрын

Thanks!!!

@Beasts679 Жыл бұрын

Sir thanks for course i learn so much from you

@sjoodsjood Жыл бұрын

Thank u 💖 more videos

@muhammadtaif6592 Жыл бұрын

very helpful just amazing

@harishnegi316 Жыл бұрын

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

@Younes07770 Жыл бұрын

What makes this different from the Ultimate Figma Crash Course 2023 - Full Layout by Example Video? Trying to figure out which one to watch. Thank you.

@Yayesew Жыл бұрын

በጣም አመስግናለው

@toanbui1256 9 ай бұрын

Hi, I want to ask you about Design system. Do we need a Design system first? or when we do design we will just design component look like you do it?

@abdullahansari9409 Жыл бұрын

Hey! So im having a weird issue. When I try to group select the "browse our collection" text with the button, it doesn't show the autolayout option for some reason. any tips? thanks in advance!

@laterlivingbetter 6 ай бұрын

I’m a complete newbie to this. Would you recommend just following what you’re doing? Practise makes perfect?

@ivikiiii3169 Жыл бұрын

Thank you

@user-hm2oi6qc1c 7 ай бұрын

Thank you very much. Please which online business can I embark on?

@bithagrop2539 Жыл бұрын

Tysm

@apenino 5 ай бұрын

great work sir

@mikoajrybarski760 Жыл бұрын

Thanks

@extremecouponing91 9 ай бұрын

Amazing course 😁

@fvandrade Жыл бұрын

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

@jeannoelhonisch7037 8 ай бұрын

If you get the same Problem with the presentation mode, only getting the presentation view, 1. Select the “Prototype” tab in Figma. 2. In the “Device” section, select “None” or any other suitable device. These settings determine how your design is displayed in the presentation view. If you select “None”, the design will be displayed without a device frame, which can be helpful if you have a desktop design and don’t want it to be displayed in a mobile frame.

@HariharanJayagobi Жыл бұрын

42:24 shift+A makes it into a auto layout and also a frame. Why can't we use that.

@debbieifeoma4841 11 ай бұрын

Thanks gary

@job1cr0re. Жыл бұрын

thank you very much sir ji 🥰🥰🥰

@hakimmaghnem6288 Жыл бұрын

This deserves a million views

@Beginnings.Unfold Жыл бұрын

i love this and i made it too sir Thankyou

@AmaanKhan-od7ts 10 ай бұрын

Hey Gary! I'm facing the issue while hovering on to image it takes a delay to adjust the image.

@darko8585 Жыл бұрын

Hey, I have a problem with Figma I hope you can help me. When I click present project, the project/desktop is very small. It has black bars on the sides, top and bottom. To look through the project I have to drag with my mouse. I even tried opening the project through a link, and it's the same. Any solutions?