Logo
Made with

Wizards

Wizards are step-by-step processes that guide users through complex or multi-step tasks. They are particularly useful when a task involves multiple inputs, decisions, or configurations that might otherwise overwhelm the user if presented all at once. Here’s a breakdown:

Key Components of a Wizard in UI

  • Step-by-Step Navigation:
    • Progress Indicator: Shows how far the user has progressed and how many steps are left.
    • Example: "Step 2 of 5."
  • Clear Instructions:
    • Each step should focus on a single task or question, keeping the user focused.
  • Back/Next Buttons:
    • Allow users to navigate between steps easily.

Wizards Component

Wizards Component is a framework for designing and laying out user interfaces using increments of 4 pixels (or points) for spacing, sizing, and positioning elements. It ensures consistency, alignment, and balance in the visual design, making interfaces more predictable and easier to scale across different screen sizes.

Wizard

Wizards

4-Point Grid System is a framework for designing and laying out user interfaces using increments of 4 pixels (or points) for spacing, sizing, and positioning elements. It ensures consistency, alignment, and balance in the visual design, making interfaces more predictable and easier to scale across different screen sizes.

Wizards
Wizards Tab
  • 1
    Horizontal Padding: 16px
  • 2
    Radius: 25 x 25
  • 3
    Padding between text and Icon: 16px
  • 4
    Padding between two wizards: 16px
  • 5
    Icon Size: 16px
  • 6
    Height of Tab: 28px
  • 7
    Font size: 14px Regular
  • 8
    Active: 14px Medium

Vertical Wizards

4-Point Grid System is a framework for designing and laying out user interfaces using increments of 4 pixels (or points) for spacing, sizing, and positioning elements. It ensures consistency, alignment, and balance in the visual design, making interfaces more predictable and easier to scale across different screen sizes.

Layout and margin
Vertical Wizards Tab
  • 1
    Vertical Padding: 14px
  • 2
    Horizontal Padding: 4px
  • 3
    Line Height: 24px
  • 4
    Radius: 24px X 24px
  • 5
    Font Size: Active - 16px Medium
  • 6
    Font Weight: Inactive - 16px - Normal
  • 7
    Number Size: 14px Regular
  • 8
    Line Thickness: 1px