Interactive Prototyping & Flow Guidelines

Overview

⚡ Interactive State Maps

1. Multi-Step Course Creation Wizard Prototype Flow

[ Step 1: Basic Info ] ---> [ Step 2: Media Upload ] ---> [ Step 3: Curriculum ] ---> [ Step 4: Pricing ] ---> [ Step 5: Submit ]
(Title, Category, Bio)      (Thumbnail, Trailer)          (Sections, Items)           (Tier, Discount)          (Validation Queue)

• Validation Guards: Step transition disabled until current step fields pass Zod schema validation.
• Auto-Save Draft: Changes sync to local storage and server draft endpoint on input blur.
• Staggered Animations: Step changes transition smoothly with horizontal slide keyframes (translateX(20px) -> translateX(0px)).

🧪 UI Prototyping Best Practices

1. Realistic Mock Data: Avoid “Lorem Ipsum”. Use realistic course titles, instructor names, and pricing values.
2. Interactive Loading States: Test skeletons (<SkeletonCard />) and spinners during async data fetches.
3. Empty States: Provide clear, action-oriented empty states (e.g., “No consultation bookings yet. Share your profile link to get started!”).