Skip to main content

Interactive Prototyping & Flow Guidelines

Overview​

This guide outlines standards for building interactive UI prototypes, user testing flows, and micro-interaction animations across Learnille frontend apps.

⚡ 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!").