UI/UX

8 topics

• UI vs UX: The Real Difference
• UI as Feel, Not Look
• Why Most UI Work Is Mediocre
• Visual Designer vs UI Designer
• The Death of Decoration Thinking
• UI as System, Not Screens
• Why AI Hits UI Generalists First
• The Modern UI Designer's Role

8 topics

• What Moves the Eye in an Interface
• Size, Weight, Color, Space as Hierarchical Tools
• The 1-2-3 Rule: 3 Levels of Hierarchy Only
• Focal Points: The Element That Breaks the Scan
• Reading Patterns: F, Z, and the Real Ones
• Why Designers Make Everything Important
• The 5-Second Hierarchy Test
• Hierarchy as Decision Making

8 topics

• Typography Beyond Font Selection
• Typeface vs Font vs Typography
• Type Scale: Why 8 Sizes Beat 20
• Line Height for Interfaces
• Letter Spacing: The Small Adjustments That Matter
• Font Pairing: Logic Over Taste
• Body Text: The Unsung Hero
• Arabic Typography: Why It's 10x Harder

8 topics

• Color Theory for UI Designers
• Functional Color vs Brand Color
• Color Systems: Primary, Secondary, Semantic, Neutral
• The 60-30-10 Rule and Its Limits
• Dark Mode: It's Not Just Flipping
• Color Contrast for Accessibility and Design
• Color as State Communication
• Why Designers Use 27 Colors

8 topics

• The 4pt and 8pt Grid: When and Why
• Spacing Tokens: Small, Medium, Large as a System
• The Whitespace Lie
• Optical Alignment vs Mathematical Alignment
• Padding vs Margin in Design Thinking
• Density: What Fits What
• The Tight-But-Breathing Balance
• Layout Systems as a Visual Language

8 topics

• Redesign a settings screen using only spacing and typography (no color changes)
• Take 3 components and design 5 states for each
• Build a type scale for a finance app vs a social app
• Design the same screen in 3 visual personalities (Stripe, Linear, Editorial)
• Create a color system for a healthcare product
• Design empty states for 5 different scenarios
• Redesign a real product's form (real estate, banking, e-commerce)
• Take a screen and find 10 spacing and alignment mistakes

8 topics

• Stripe's Checkout: Every Detail and Why
• Linear's Command Bar: Type Scale and Timing
• Notion's Empty States: Copy and Illustration
• Apple Wallet: Motion as Communication
• Airbnb's Price Display: Typography Decisions
• Spotify's Player: Hierarchy in Tight Space
• Arc Browser's Redesign: Visual Restraint
• Editorial Sites: Bloomberg, NYT, The Verge

5 topics

• Drop a component, get structured feedback
• Before-and-After component redesigns
• States audit exercises
• Component library reviews
• Live critique sessions

8 topics

• Component Thinking for UI Designers
• Atomic Design Beyond the Buzzword
• Variants vs Instances vs Overrides
• The Seven States Minimum
• The States Designers Forget
• Component Composition: When and How
• The Handoff-Ready Component
• Components as the Design System's Atoms

8 topics

• Motion as Communication, Not Decoration
• Easing Functions: When to Use Each
• Duration: The 200-400ms Sweet Spot
• Microinteractions That Matter
• Loading vs Progress vs Skeleton
• Hover, Focus, Active Transitions
• Motion as State Feedback
• When Motion Becomes Noise

8 topics

• Icon Design vs Icon Usage
• The Icon System: Weight, Fill, Size, Grid
• Consistency vs Personality
• Icon Plus Label vs Icon Only
• Cultural Icon Meanings
• Icons in Arabic Interfaces
• Why Most Icon Sets Online Won't Work
• Building a Custom Icon Set

8 topics

• Forms as the Most Misused Design Surface
• Field Anatomy: Label, Input, Helper, Error
• Validation: When and How
• The Cost of Every Field
• Input Types and When to Use Each
• Multi-Step vs Single-Page
• The Save-and-Continue Decision
• Form Testing Without a Lab

8 topics

• Tables: Design for Scanning
• Cards: When to Use, When to Avoid
• Lists: Vertical Rhythm
• Empty States as Design Opportunity
• Data Visualization Basics
• Numbers in Interfaces
• The 10-Item Rule
• Pagination, Infinite Scroll, Load More: When What

8 topics

• The It-Looks-the-Same Problem
• Personality Without Decoration
• The Stripe Aesthetic vs Linear vs Notion
• Choosing a Visual Direction
• Visual Restraint as a Skill
• Editorial UI: When It Works
• Brutalist UI: When It Works
• Personality Through Small Details