arrow_back
Module 1: Basics of Web UI designing
CH 1: Course introduction
Website ui design course in hindi
⬇️ Modules
CH2: What is Website UI Designing?
Video: What is website UI designing
💼 Interview Q and A
❓Quiz for module 1
Module 2: Fundamentals of Website UI Designing
CH3: UI elements glossary
Video: UI elements glossary
✏️ Extra Notes
CH4: Grids and layouts
Video: grids and layouts
Bootstrap 5 Responsive Grids for Mobile, tab, website and dashboard by graphics guruji
CH5: Typography
Video: Typography
FROM YouTube: font colors in ui designing
✏️ Extra Notes
CH6: Colours and gradients
Video: Colors and gradients
Video from YouTube: UI Design Color Theory
Video from YouTube: How to choose UI colors scheme
✏️ Best 10 tools for UI colors selection
CH7: Shadows
Video: Shadows
⬇️ Shadows collection v1 figma file
⬇️ Most common used UI shadows kit Adobe XD
CH8: Buttons (CTA)
Video from YouTube: Everything about BUTTONS in UI design components or elements
Video: Buttons
✏️ Extra Notes: 10 tips to use buttons in UI design
CH9: Images, illustrations and icons
CH 9 Icons images and illustrations
✏️ Top website to get FREE icons, illustrations and images
🔥⬇️ Bonus: Premium illustrations kit free with this course
CH10: Forms and input fields
Video: Form and input fields
Video from YouTube: Selection controls in UI design
👨💻 Live class 2: Revision of CH8 to CH10
CH11. Data tables
Video: Data tables
CH12. White Space Padding & Margin
Video: White space Padding & Margin
✏️ Extra notes: White space in UI designing
CH13. Navigation
Video: Navigation
✏️ Extra Notes: Navigation in website UI designing
CH14. Web design UI principles
Video: Web design UI principles
Video from YouTube: Top 12 UI design principles part 1
Video from YouTube: Top 12 UI design principles part 2
⬇️ UI design principles ebook
15. Communication with client
Video: Communication with client
Getting help from ChatGPT (AI) to communicate with clients
✏️ Content for practice with ChatGPT
CH16. A complete process of Web UI designing
Video: A complete process of website Designing
⭐ ✏️ Revision notes
⬇️ Bootstrap 5 Design System - UI Kit
💼 Interview Q and A
🔥 Bonus Module: Learn Figma tool
Figma 2025 course intro
Figma learning kit for figma 2025 course
Figma 2025 Intro - Class 1
Figma interface - Class 2
Working with layers - Class 3
Figma Constraints - Class 4
Pen tool and icons creation - Class - 5
Typography tool - Class 6
Masking - Class 7
Styles - Class 8
Styles: Common issues & solutions
Auto layout - Class 9
Autolayout: Common Issues & Solutions
Components and variants - Class 10
Components & variants: Common issues & solutions
Animations and Prototyping - Class 11
Dandoff, Dev mode, file sharing - Class 12
Figma plugins - Class 13
Mobile App Design - Class 14
Webpage design - Class 15
🤝 Interview Q and A on Figma tool
Module 3: Let's design a complete website
CH17. Understanding website project
Video: Understanding website project
⬇️ Anatomy of a simple webpage
CH18. Sitemap, User flow and IA
Video: Sitemap, Userflow and IA
CH19. Getting project inspirations and moodboard
Video: The problem we face everytime
YouTube Video: How to train your brain for creative thinking
Video: Getting inspiration and moodboarding
CH20. Wireframing and planing
⬇️ Website Mid-fidelity wireframe course figma file
Video: Low fidelity wire framing on paper
Video: Mid fidelity wire framing part 1
Video: Mid fidelity wire framing part 2
Video: Mid fidelity wire framing part 3
Video: Mid fidelity wire framing part 4
CH21. Final website UI design with design system
⬇️ MyClinic Website High-fidelity wireframe exercise course file
⬇️ MyClinic Website project course final file
High fidelity wireframe part 1
High fidelity wireframe part 2
Responsive UI designing
CH22. Prototyping and exporting of website assets
Website prototyping in figma
Export design for clients and developers
CH23. Website Hero section designing tips
Video: Website Hero section Designing
CH24. Redesigning of a website
CH24 Re-designing a website
⬇️ Before and after redesigning a home page
Usability Heuristics by Jakob Nielsen
⬇️ Heuristic evaluation template v1
CH25. Understand term Scannable UI design
Video: Scannable UI Designs
✏️ How to Make Web Interface Scannable Notes
✏️ Revision notes
Assignment 1: Website UI Design
❓Quiz for module 3
💼 Interview Q and A
😁 Give your Feedback for Module 3
🔥 Bonus: Learn with 10 different website designs templates
Learn through 10 different website projects
⬇️ 10 Website templates figma files_v2
Module 4: Landing page designing
CH26. Anatomy of a landing page
Anatomy of a landing page
CH27. Getting inspiration for a landing page
Getting inspiration for a landing page
CH28. Best practices of designing landing page
Best practices of designing landing page
✏️ Best practices notes
CH29. Understanding landing page project and design
Understanding landing page project and design it
⬇️ MyClinic Landing Page project figma file
✏️ Revision notes
Assignment video
Assignment 2: Landing page design
❓Quiz for module 4
💼 Interview questions landing page
😁 Give your Feedback for Module 4
Module 5: Sales page designing
CH30. Anatomy of a sales page
Anatomy of a sales page
CH31. Getting inspiration for a sales page
Getting inspiration for a sales page
mobile first approach
✏️ Mobile first topic notes
⬇️ Sales page real project figma file
CH32. Best practices of designing sales page and design
Best practices of designing sales page
✏️ Best practices notes
CH33. Understanding sales page project design
Our sales page project design
⬇️ MyClinic Sales Page project for course figma file
Assignment video
Assignment 3: Sales page design
❓Quiz for module 5
💼 Interview questions sales page
😁 Give your Feedback for Module 5
Module 6: E-commerce website designing
CH34. Anatomy of an e-commerce website
Common page types & Anatomy of an e-commerce website
Anatomy of an e-commerce website
CH35. Getting inspiration for an e-commerce website
Getting inspiration for an e-commerce website
CH36. Best practices of designing E-commerce websites: The checklist
Best practices of designing E-commerce websites
CH37. Understanding e-commerce website project, create site map and design
Project intro
Vastra e-commerce project course file_v1
Userflow and Information Architecture
Wireframes low and mid fidelity
Moodboard and Design system
Final UI design with responsive
Case study for behance portfolio
Assignment video e-commerce website
Assignment 4: E-commerce website designing
❓Quiz for module 6
💼 Interview questions e-commerce website
😁 Give your Feedback for Module 6
Module 7: Dashboard/SAAS tools UI designing
CH38. Anatomy of Dashboard
Anatomy of Dashboard
Grid sizes kit Website Dashboard tabs mobiles v1
CH39. Getting inspiration for Dashboard
Getting inspiration for a dashboard
CH40. Best practices and principles of designing a perfect dashboard
Best practices and principles
CH41. Understanding dashboard project
Understanding dashboard project
CH42. Let's design a complete Dashboard (My clinic App's dashboard)
Low fidelity wireframe
✏️ Key metrics cards based on dashboard topics notes
Design dashboard home page
MyClinic Dashboard project figma file v1
Design dashboard's other pages
Responsive dashboard
Prototype and testing of dashboard
Live Dashboards for inspiration
Assignment video dashboard
Assignment 5: Dashboard
🔥 Bonus: SAAS products
What is SAAS product?
✏️ Free Kits dashboard Figma files
SAAS project intro
Dairy Mangement SAAS project
Information architecture
User flow diagram
Low fidelity wireframes
Final UI design
Assignment 6: SAAS Project
❓Quiz for module 7
💼 Interview questions Dashboard and SAAS products
😁 Give your Feedback for Module 7
Module 8: User Interface Design Patterns
UI design patterns intro
UI design patterns_v1
CH43. Input pattern
Input patterns
CH44. Navigation pattern
Navigation patterns
CH45. Data design patterns
Data design patterns
CH46. Onboarding
Onboarding patterns
CH47. Social design patterns
Social design patterns
CH48. Other patterns
Other patterns
Module 9: Portfolio, CV, interview and earning plans
CH49. Website design portfolio making
Website portfolio making on behance
CH50. Resume/CV making
Resume making guide
Free template for resumes
CH51. Interview preparation
Worth ₹2600 101 Interview UX UI Q and A
Interview preparation guide
General Interview questions ebook
CH52. Earning plans
Earning plans
Assignment 7: Make ATS proof resume
🔥 Bonus: ❇️ AI tools for UI designing
One page website design using AI tools
Multi page website design using AI tools
Event landing page design using AI tools
Sales page design using AI tools
Dr Dashboard design using AI tools
Dairy dashboard using AI tools
Crack Interview task or new projects using AI tools
ChatGPT for UI designers
Use of ChatGpt for UI UX designs v1 by graphics guruji
Wireframes using AI
Notes: Figma AI plugins list
😁 Final feedback for the complete course
Assignment 8: Home page using AI
Live Workshops
Home page design and planing
Website home page redesign checklist
Website redesigning