Madbax Navigation - Premium Animated Banner

Search Madbax

Find courses, tutorials, and creative resources

Enter to search
↑↓ to navigate
Esc to close
Madbax Navigation - Premium Animated Banner

Search Madbax

Find courses, tutorials, and creative resources

Enter to search
↑↓ to navigate
Esc to close
Home Courses UX/UI Learn UI Design by Watching Pros – Design Vault Access
UX/UI

Learn UI Design by Watching Pros – Design Vault Access

Share

Real-time customer support chat UI
1 hr 36 min

Learn how to structure clear, user-friendly layouts for high-stakes interactions like chat support. In this session, you’ll see how a senior designer handles states, edge cases, layout, and typography for a functional and accessible UI. Watching this can transform how you design components users rely on daily—especially when clarity and speed matter most.

Figma design file showing mobile chat interface layouts and component states for a customer support app
Redesigning a blog website
1 hr 43 min

This demo video walks you through a blog redesign—perfect for learning about hierarchy, readability, and balancing text-heavy layouts with visual storytelling. You’ll uncover practical tips on color, typography, and layout that you can use for any content-heavy product or marketing site. It’s a crash course in designing digital spaces people actually want to read.

Blog page layout in Figma with text-heavy content and imagery, demonstrating principles of hierarchy and readability
Responsive landing page’s hero section for a photo editing app
1 hr 31 min

Great landing pages don’t just look good—they convert. This demo focuses on layout, imagery, color, and CTAs that work, with insights into responsive thinking and storytelling design. Whether you’re working on SaaS products or mobile-first marketing pages, these real-world strategies are ones you’ll come back to again and again.

Figma canvas featuring layered circular photo elements and green sparkle icons for a product marketing hero section
Redesigning a restaurant’s web menu
53 min

Menus are deceptively complex: this demo shows how to simplify dense info into clean, inviting layouts that anyone can navigate. You’ll learn subtle tricks around visual hierarchy, typography, and usability that can apply to any info-heavy UI, from food ordering to product listing.

Dark-themed restaurant menu design in Figma, showing visual hierarchy and category navigation
Animated onboarding flow in a mobile app
1 hr 19 min

Explore how to use motion to guide, delight, and educate new users in this mobile onboarding redesign. You’ll learn animation basics, prototyping, and flow thinking—perfect for making your own mobile apps feel more polished and intuitive.

Figma frames displaying onboarding screens with icons, motion paths, and onboarding content structure
iOS news mobile app (dark mode)
1 hr 45 min

Dive into a real-world dark mode case where accessibility, efficiency, and consistency are at the core. You’ll gain perspective on color systems, scaling components, and keeping structure tight even in content-rich designs. The patterns here apply far beyond news apps—think dashboards, social feeds, or any content-driven product.

Dark mode interface of an iOS news app in Figma, with color tokens and Figma variables in a data table
Responsive table for a SaaS platform
2 hrs 2 min

Tables are one of the hardest components to design, especially when data is complex. This 2-hour walkthrough shows how to make them work beautifully—covering layouts, data visualization, and responsive strategies that will seriously elevate your B2B or enterprise UI work.

SaaS platform table design in Figma showing applicant data, responsive layout, and interface controls
Accessible mobile bank profile creation
1 hr 04 min

Accessibility isn’t optional—it’s essential. This demo tackles how to build inclusive interfaces for critical tasks like financial apps. You’ll see decisions unfold around color contrast, form clarity, and inclusive UX, giving you tools you can apply to any future form-heavy or high-trust UI.

Related Articles
The Group Buy Vault

Practical Class on Essential Motion Graphic Designer Tools: C4D, AE, and AI

Step forward as a motion graphic designer fully prepared for modern industry...

The Group Buy Vault

Brand Design: From Practical Work to Portfolio Completion

This course provides complete preparation for becoming a Brand Experience (BX) designer,...

The Group Buy Vault

Escaping the Mass-Produced Look: Drawing Handsome Men That Perfectly Suit Your Taste, Tailored to Body Type and Impression

Escape generic, mass-produced character designs with this male character drawing guide by...

The Group Buy Vault

Unleash the Power of Unity: 14 Unique RPG Game Effects

Learn practical RPG game visual effect techniques directly from game VFX artist...