Interactive UI/UX Crash Course

www.protopie.i... 👈 Use code DESIGNCOURSE for 10% off of Protopie!
bit.ly/3ReMZD0 👈 Learn UI/UX Today (Code: UI2024 for 25% off)
-- Today, I'm releasing the full 30 days UI/UX crash course in a single video for those who wish to access everything through a single video. This crash course covers a ton of ground with a lot of interactive challenges!
The Figma Community File (Open this to access the design):
www.figma.com/...
Let's get started!
#uiux #uidesign
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesi...
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]

Soon, we will start involving ourselves with more advanced ui and motion design!

[@sdskodali4971]

yess sirrr

[@Mahnoor123-y5n]

waiting sir

[@anishamalhotra6195]

Yesss please

[@diaarraaa]

this is amazing thanks to y’all !!

[@MuratKarakus-to4tr]

Hi, is this gonna happen? Will there be more to this course? Because I really need to learn some. advanced stuff as well. I was thinkin of startig this series but felt a bit beginner level, I need at least intermediate. Please tell me you will be making more of these...

[@deepmoitra4638]

00:01 Learn UI/UX design in a 6-hour course 02:11 UI focuses on aesthetics and visuals 07:03 UI/UX design tools are pivotal for interface development. 09:30 Tools for UI/UX design and testing 14:05 Understanding the purpose of navigation bars. 16:15 Place client's logo with proper alignment and whitespace 20:14 Designing with training wheels on reduces the thought process 22:18 Font size plays a crucial role in establishing visual hierarchy. 26:30 Grouping and styling elements for better UI/UX design 28:48 Using contrast and accessibility checker for web content accessibility standards 33:01 Aligning elements using Auto layout 35:05 Ensuring equal white space and alignment for better UI/UX design. 39:19 Establish grouping through whitespace and alignment. 41:23 Reviewed various submissions for UI design improvements 44:59 Improving visual hierarchy and consistency in design elements 46:45 Visual hierarchy issue addressed with button design 50:39 Designing a hero section for a website 52:33 Designing an effective hero section for a product 56:19 Adjusting line height and alignment for better visual appeal 58:22 Visual hierarchy is key in UI design 1:02:28 Adjust padding and text alignment for better UI/UX design 1:04:35 UI/UX design allows elements to extend beyond layout confines for illustrations and unimportant elements. 1:08:47 Color contrast is important for visual hierarchy 1:10:43 Discussing the integration of a fictional service for virtual instruments 1:14:42 Improving UI elements for better visibility and hierarchy 1:16:40 Improving card design and call to action placement 1:20:29 UI/UX Crash Course covering navigation, hero section, and card design with upcoming challenges and changes in design types. 1:22:10 Install the Iconify plugin for easy access to icons. 1:25:43 Proper spacing and font choices for UI elements 1:27:53 Maintain appropriate white space for better UI design 1:32:13 Tips for copying and pasting with styling 1:34:48 Design user cards to fit the landing page theme 1:38:46 Adjustments for visual balance and user experience 1:40:49 UI/UX design changes for card elements 1:44:39 UI/UX design must be responsive for all device sizes. 1:46:31 Addressing navigation in responsive design 1:50:20 Considering layout adjustments for responsive design 1:52:24 Using Whit space effectively in designing UI 1:56:43 Understanding and adjusting design elements for different screen widths. 1:59:04 Adjust size and proportions for better UI 2:03:34 Reviewing tablet and mobile UI design submissions 2:05:30 Optimizing white space for improved UI flow 2:09:33 Improving layout by reducing white space and optimizing design consistency 2:11:30 Improvements made in UI/UX design including line height and color adjustment. 2:15:26 Improving UI elements for better layout and readability. 2:17:28 Translate desktop design to tablet and phone layouts 2:21:32 Optimizing white space and font size for better clarity in design. 2:23:34 Proper element spacing is crucial for readability 2:27:33 UI/UX design adjustments for better alignment 2:29:36 Importance of getting forms right in UI/UX design. 2:33:22 Improve visibility of text fields with stroke and proper contrast 2:35:13 Styling text fields and error handling in UI/UX design. 2:39:27 Designing states for text fields 2:41:18 Visual indicators for active and error states in text fields. 2:45:25 Switch to prototype mode and set up the states and transitions. 2:47:16 Fixing the error state and adding a call to action button 2:51:22 Customize checkboxes and input fields using AIify plugin 2:53:16 Design revisions are crucial for UI/UX improvement. 2:57:10 Designing desktop UI using columns and spacing 2:59:05 UI/UX design feedback on color, graphic, and form elements 3:03:02 Utilizing same concepts for interactive UI/UX design 3:04:46 Creating button with default and hover state 3:08:58 Adding interactions in Adobe XD 3:11:09 Troubleshooting and adjusting element properties 3:15:23 Creating an infinite scrolling Marquee 3:17:20 Creating and adjusting components in UUX design 3:21:28 Introduction to Animation & Interaction Challenge 3:23:24 Explore animations and prototyping in UI/UX design 3:27:30 Implementing Speedy UI transitions 3:29:58 Using generative AI to enhance UI design workflow 3:33:51 Using website background patterns to enhance design 3:35:51 Discussing embellishments and modifications in UI design. 3:39:56 Demonstration of editing and merging layers in Figma for design workflow. 3:42:27 Using Firefly tool in Illustrator to create vector-generated assets for UIs 3:46:28 Using embellishments to change the look and feel of a layout 3:48:21 Demonstrating the process of creating and positioning shadows using the pen tool. 3:52:28 Using mid-Journey AI tool for image generation and applying glass morphism technique for UI elements. 3:54:43 Adjusting background color and opacity for better visibility 3:59:05 Get creative with layout design and style 4:00:58 Review of different designs and making necessary adjustments 4:04:46 Improving design by simplifying elements and enhancing contrast. 4:06:36 Simplification and optimization of UI elements. 4:10:15 Improved UI design for enhanced readability and clarity 4:12:12 Learn to create dark mode UI for provided layout 4:15:52 Consistency in color application is important. 4:18:09 Improving UI contrast and readability. 4:22:26 Creating a toggle button for light and dark mode variation 4:24:30 Focus on changing colors and not adding or moving elements. 4:28:04 Focus on simplicity and strong typography in hero sections 4:30:07 Create a unique single-page landing page for your design portfolio or agency. 4:33:51 Unique layout design for web professionals 4:35:44 Design concept of elevating digital interactions with animated UI 4:39:36 Transitioned from busy layouts to modern, clean designs 4:41:38 Topography and design execution need improvement 4:45:52 Designing navigation and page titles 4:47:48 Design upcoming shows display 4:52:13 Customizing design elements for better visual hierarchy 4:54:12 Designing curriculum page for a coding platform 4:57:59 Simplified UI adjustments for curriculum page 5:00:04 Adjustments made to UI for better visual hierarchy 5:03:55 Design is good, minor adjustments needed 5:05:55 Focus on creating a dashboard design with efficient use of space 5:09:35 Adding drop shadow for separation and date picker placement 5:11:25 Creating a date selector and sidebar navigation for a UI layout 5:15:22 Designing first page orders with key elements 5:17:35 Tips for selecting and using icons effectively. 5:22:00 Design a statistics feature with additional elements. 5:23:41 Optimize UI design for better usability 5:27:40 Improving UI design through color and stroke adjustments 5:29:38 Ensure proper color contrast for better readability 5:33:27 Improve visual hierarchy and contrast for better user experience. 5:35:20 Improving readability and layout for better UI/UX design 5:39:24 Enhancements made to portfolio section 5:41:27 Simplify design by removing borders and adding white space.

[@estherayewoh1077]

Amazing. Thank you

[@DiffamaNature]

Not all superheroes wear capes. Thank you fella

[@abhisheksagare1809]

Thank You

[@gyamfijohn3066]

This is the genesis of my UI / UX career, and I am starting with you, and I hope at the end of this course things are going to be great.

[@embo_5787]

Awesome all in one! Please add timestamps if you can to jump between. Thank you so much ❤

[@usamaamjad-z3m]

this course was very amazing. please make 100 days advance UX-Ui challenges.

[@ShehryarKhtk]

Starting my UI UX journey with this as my first video. THANK YOU IN ADVANCE DesignCourse.

[@ArtTipswithJohnS.-ty7nr]

same here

[@Nyame-Studios-BOURNEMOUTH]

same here

[@rafaelfonseca7942]

Because of this crash course, you've just got a new subscriber!

[@aminansar5294]

Awesome stuff sir. Thanks for putting in so much effort to make this course. Very valuable

[@estherayewoh1077]

Best tutorial out there. Thanks for posting this 😊

[@maraxoff6393]

The best ui ux course

[@slapp.martines]

Gary, bless you.

[@drinlajci7388]

u got shredded bro, nice.

[@designerdude07]

Feels awesome being mentioned 3 times in there 🥰

[@flawxy4445]

Please get us some advance course on this. looking forward to it. Thanks.

[@everythingnaruto5682]

you, my sir, are a chad. awesome!

[@rawanack9196]

How useful ❤❤ Thank u sir I really appreciate ur efforts ❤

[@ahmadasyraf665]

I thought rob halford from judas priest in 80s doing tutorial😅but thousand thanx to you and really appreciate your videos..thumbs up

[@poppingjaz]

Great stuff!! You looking like a buff 70's Judas Priest guitarist lol

[@Angshu1038]

Great stuff. Another 30-days series pleaseeeeeeeeeee ❤

[@sdskodali4971]

yes pleasee

[@ImaginativeEra]

who is going to finish this course in 1 day? :P

[@PrinceNsude]

i have stayed 5 days now 😂😂 so bad

[@yuiitodoro7791]

U both finished this ?

[@Dipj01]

If you're a newbie, don't finish this in 1 day, you'll have poor retention

[@giripiri7557]

using consolas as a font adds a steep learning curve of figuring out it's a font that needs downloading..it would be more beneficial if you use default fonts or state the obstacle your viewers need to cross. that way you make sure people with lower levels of frustration tolerance can follow the course...would say you're dealing with accessibility then, as some folks with learning difficulties will try to use this video to learn. if you use yt analytics, that will explain why people stop watching the video :)

[@vladislavpalenik329]

If you have learning difficulties, you definitely should not even try to learn stuff from youtube and such. The material is great, no one says is entry level OR for everyone. Why don't you try to create something for free AND for everyone to be available before criticising others that have done much more for the community than this pathetic comment of yours.

[@yusufsami9573]

Extremely Amazing

[@moviezpoint935]

Mannn yorrrrr biceps 🤯

[@ImaginativeEra]

please make a master class for them who already knows figma and working. make them advance from mid. :D

[@Sharmarke35]

Hello, I have created a template that I would like to save and use in my WordPress site. Could you please provide me with the steps on how to save it as a template? Thank you.

[@TheIndianOutcast]

Man, I thought Axl Rose jumped out of somewhere to teach UI UX design 😂😂😂.

[@omarahmed51512]

This guy is jacked, damn.

[@giripiri7557]

anyone else having problems with browser memory and Figma lagging extremely? apparently, Figma uses up to 2gb per tab, and since this community file is big, any changes make big problems :/ best would be to just copy separate files and do ourselves, but as a non-paying user of Figma, I can only work on limited number of files...

[@paradox9091]

Thank you 🤩

[@WaleedMujtaba]

Great, how can i learn graphic design? give me some tips, Thank YOU

[@godigitize904]

Thank you bro

[@aghileslounis]

Excellent content! Please add timestamps.

[@qad1miy]

Nice Work )

[@multipointcreative5167]

Lessons 3 - 14 are not available on the Figma file Pages. Is there another way to access those?

[@aleksandarstanisic1848]

Ty man. 😊

[@EnglishRain]

Legend

[@3dmodelling-vk2ud]

can someone help me with form design, I can't understand this topic more clearer

[@lastspoil5547]

Do you have a trailer for your UI UX course that’s on your website? I want to enroll but I want to know what I’m getting into. 😂

[@Ackerman-GOD]

started with this challenge and figma changed it's UI :D so i have no idea where to use features like components

[@ahyesthatguy60]

heyy... just right click on any frame (and if its a normal element right click on that then a menu pops up where u select the frame selection option) and the click create component from there.

[@TheDailyFa]

Siigma coach

[@giripiri7557]

how did you add this gradient of color from bottom at 1:18:20 ?

[@DanielHDme]

GAH DEMMMMMMM

[@giripiri7557]

which keyboard are you using?

[@Bhavishya_est]

Daaammmmm

[@NIKHIL-d8g5r]

1:30:00

[@rabailahmed24]

Bravo

[@chriscap3784]

please give timeline in this video

[@starkrizwanali]

Add 2024 in video title please add now increase reaches

[@Bythewaymridul]

sir your biceps were teaching me not you

[@PrinceNsude]

how can i submite my work ?

[@jamespaterson81]

Rodriguez Gary Thompson Shirley Martin Michael

[@Supersingularity4ever]

timestamps please

[@littlebitrelaxation-calmre8602]

Please add time stamps

[@MdMostafizurRahmantitu]

wow

[@MrDubanddnb]

im 12 mins in the video and im disappointed he didn't mention "Lunacy" which is also open source and with free plan. Should i continue watching :D?

[@DesignCourse]

I haven't heard of Lunacy in a long time!

[@MrDubanddnb]

I guess Penpot also isn't bad at all, if you are ok to use web/cloud based solution. For the 2-3 hobby projects, I did with Lunacy, i could say it is doing pretty good job

[@adityagaming7876]

his arms are bigger than video🥸

[@DoraSpring-m9o]

Lee Donna Anderson Daniel Miller Barbara

[@EquipteHarry]

Allen Michelle Clark Anthony Brown Jennifer

[@jadabloomfleming2318]

Moore Dorothy Jackson David Miller Anthony

[@estherayewoh1077]

Karen’s of the internet 💀

[@NicolaHartman-e6p]

Walker Edward Walker Patricia Young Jeffrey

[@edwards438]

White Robert Robinson Michael Young Helen

[@GraceCalvin-f2y]

White Kenneth Taylor Paul Thomas Ronald

[@mostlyoldschool]

I'll resume at 4:44:35

[@christophermenardi1782]

Fantastic insight on interactive UI/UX! #mediaartssbcc

[@marcuslinux785]

wow