Interactive UI/UX Crash Course

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

[@riyaparekh8338]

TYSM

[@imaginationturtle5447]

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.

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

[@whynow7035]

The fact all of this is free is absolutely crazy, much better value than the product design course I’m currently taking in university 🙏🔥🔥

[@gravijax]

Great content. It's rare I'll watch a 6 hour video but it's super well presented and insightful. Thanks.

[@usamaamjad-z3m]

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

[@embo_5787]

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

[@rafaelfonseca7942]

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

[@nouhailawarda]

thk u so much i finished this course and this is the beginning of my ui ux path towards mastering it

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

[@drinlajci7388]

u got shredded bro, nice.

[@poppingjaz]

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

[@slapp.martines]

Gary, bless you.

[@rawanack9196]

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

[@designerdude07]

Feels awesome being mentioned 3 times in there 🥰

[@ahmadasyraf665]

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

[@madhurchaturvedi5551]

I thing i am switching my career after this Video Coding too UIUX

[@everythingnaruto5682]

you, my sir, are a chad. awesome!

[@Angshu1038]

Great stuff. Another 30-days series pleaseeeeeeeeeee ❤

[@sdskodali4971]

yes pleasee

[@flawxy4445]

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

[@Sales-ki7lx]

Why is this guy so jacked

[@ImaginativeEra]

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

[@yusufsami9573]

Extremely Amazing

[@moviezpoint935]

Mannn yorrrrr biceps 🤯

[@multipointcreative5167]

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

[@paradox9091]

Thank you 🤩

[@omarahmed51512]

This guy is jacked, damn.

[@NIKHIL-d8g5r]

1:30:00

[@qad1miy]

Nice Work )

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

[@aghileslounis]

Excellent content! Please add timestamps.

[@godigitize904]

Thank you bro

[@WaleedMujtaba]

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

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

[@TheIndianOutcast]

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

[@aleksandarstanisic1848]

Ty man. 😊

[@chriscap3784]

please give timeline in this video

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

[@Subbu-q1h]

Is this crash course enough for beginners? Anyone?

[@giripiri7557]

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

[@3dmodelling-vk2ud]

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

[@giripiri7557]

which keyboard are you using?

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

[@rabailahmed24]

Bravo

[@EnglishRain]

Legend

[@TheDailyFa]

Siigma coach

[@littlebitrelaxation-calmre8602]

Please add time stamps

[@PrinceNsude]

how can i submite my work ?

[@Supersingularity4ever]

timestamps please

[@starkrizwanali]

Add 2024 in video title please add now increase reaches

[@MdMostafizurRahmantitu]

wow

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

[@SebaOnl]

Я СМОГУ!

[@DanielHDme]

GAH DEMMMMMMM

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

[@Bhavishya_est]

Daaammmmm

[@Bythewaymridul]

sir your biceps were teaching me not you

[@jamespaterson81]

Rodriguez Gary Thompson Shirley Martin Michael

[@DoraSpring-m9o]

Lee Donna Anderson Daniel Miller Barbara

[@EquipteHarry]

Allen Michelle Clark Anthony Brown Jennifer

[@jadabloomfleming2318]

Moore Dorothy Jackson David Miller Anthony

[@NicolaHartman-e6p]

Walker Edward Walker Patricia Young Jeffrey

[@adityagaming7876]

his arms are bigger than video🥸

[@estherayewoh1077]

Karen’s of the internet 💀

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