The UI/UX Crash Course for 2023 - Learn UI/UX Design
ฝัง
- เผยแพร่เมื่อ 13 มิ.ย. 2024
- 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! - แนวปฏิบัติและการใช้ชีวิต
Watch the 2nd part of this series, where we use HTML and CSS to make it a reality in the browser: th-cam.com/video/Kl3nOXQjVnQ/w-d-xo.html
Will be glad for this
I’ve been expecting these tutorials 😊
❤️
Thanks for inspiring us. We are waiting.
Kyle got me here. Lol
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!
Is it really worth it? did you also try his css paid course?
stop gimmicking
stop lying!!!!!!!
Thanks for letting know that you took a paid course
Were you comatose?
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.
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.
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.
I just fall in love with this class. This is an incredible class indeed. Thanks, Gary!
I love love this tutorial, leant really a lot. was skeptical at first but grateful I took it. Thanks
Thank you , love your content and your teaching style. This is a great crash course for figma.
love your stuff.... it's nice when someone can bridge the gap between dev and design....
Congrats on the 1M, Gary! Thanks for the crash course!
This was incredible, thankyou you for this detailed video. looking forward to more videos like this.
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!
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.
You are so easy to listen to! Love your work!
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.
less than 24 minutes and I can already say that you are such a good teacher! Thanks 😘
The video quality is wonderful. 2023 energy
You're excellent teaching, thank you so much for this content!
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.
Nice. Please keep doing more of this. Thanks
Thankyou soo much! This crash course has been really helpful. 😊
My favorite part was when you explanin the word "subjetive" for those who are not native in English like me. THANK YOU FOR THAT.
Very affordable and practical, thanks!
Absolutely Amazing Teacher and clean design!!!
AMAZING CRASH COURSE!!! THANK YOU
This is hands down the best figma and designing course in the entire youtube 🙌
Amazing. Will be purchasing the course!
Great course , thanks for uploading !
Thanks a lot ❤. This is very informative
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.
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. ;)
@@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. 😆
Really thanks it took me nearly 2 hours on watching your video and doing things in my figma
great course, thanks a lot!
Thank you very much... learnt a lot! 😍
This is awesome. Great job!
A great tutorial. Learnt a lot from your course.
Learned a lot! Thank you so much
This hour long video fully convinced me to pursue a career in this. Genuinely informative, interesting and so well explained. Thank you!
hows it going ?? would love to follow throught w this as well !
I have never done anything like this, this was so much fun!
12:37 You can also hold [Shift + Alt then drag] to duplicate and move in 1 action
yes we can do both
Thank you brother for this video! congrats for 1M subs
Great job ,Thank You So Much ! 😍
thanks i never think that will work so good job!
Thank you sooo much you helped alot with tips and tricks
Great stuff! I didnt find the link to dl the font at the start, still valuable to watch!
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
I really enjoyed it, thank you so much .
Most amazing introduction to Figma. Thanks for this valuable contribution.
Thank you, You are really awesome!
wooow
mehn i'm so thrilled right. Thanks so much, i really learnt a lot within few minutes.
Most EXCELLENT course thanks !!!!!!!
The best tutorial video I have seen in the field of design, thank you👌👌
Thanks a lot for the crash course
Thank you so much !
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.
Appreciate that!
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
it reaally cover most of the web design thank you
Thank you very much, Gary
Thanks a lot!
Thanks!!!
Thank you!
Thank u 💖 more videos
Awesome, what a detailed video ✌✌✌✌
very helpful just amazing
thank you so much for that
Through the years.
Still amazing as we know you
ur a legend gary, lots of love from ireland
በጣም አመስግናለው
Can you create video about your approach when designing a mobile app for different phones (Apple vs Android) and design systems?
thank you very much i learn your video alot
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!
Amazing session sir as always you're great sir, thank you so much for this session ❤❤
Thanks 🙏
great work sir
Amazing!
This is a brilliant tutorial video. Can you create an updated video as the Auto layout has got some major update?
it would be great if you publish a book or a course about ui design for developers.
Really thanks man
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!
Thanks gary
Sir thanks for course i learn so much from you
This was awesome. I'm so glad I watched it, I learned tons of stuff and had a lot of fun discovering Figma. Thanks!
Thank you man, you saved me my career.
Thank you
Tysm
U r amazing ❤❤❤
Thanks
Amazing course 😁
Thank you very much. Please which online business can I embark on?
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.
i love this and i made it too sir Thankyou
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?
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!
Please make full video on Design System for Web project from scratch to medium level
This deserves a million views
thank you very much sir ji 🥰🥰🥰
ayyyy where my fellow DesignCourse students at?!
Aí fazia tempo que não usava css... mas com seu vídeo 📹 retornei mas não 👎 tenho muito como aplicar por aqui
42:24 shift+A makes it into a
auto layout and also a frame. Why can't we use that.
I’m a complete newbie to this. Would you recommend just following what you’re doing? Practise makes perfect?
You are awesome bud..