Search for the Right Document
< All Topics
Print

Wireframe Description for “User Registration” Page

1. Page Layout

  • Header: At the top, a simple header containing:
    • Company logo (left-aligned)
    • A “Login” button (right-aligned)

2. Page Title

  • Text: “Create Your Account”
  • Position: Centered below the header in a large, bold font

3. Registration Form Fields

  • Field Labels and Input Boxes: Aligned vertically with clear labels:
    1. First Name: [Text Input Field]
      • Placeholder: “Enter your first name”
    2. Last Name: [Text Input Field]
      • Placeholder: “Enter your last name”
    3. Email Address: [Text Input Field]
      • Placeholder: “Enter your email address”
      • Hint Text: “We’ll never share your email with anyone else.”
    4. Password: [Password Input Field]
      • Placeholder: “Create a strong password”
      • Hint Text: “Must be at least 8 characters, include uppercase, lowercase, and a special character.”
    5. Confirm Password: [Password Input Field]
      • Placeholder: “Re-enter your password”

4. Error Messages

  • Position: Directly below each input field (only visible if there is a validation error)
  • Text Example: “Password must contain at least one uppercase letter.”

5. Buttons

  • Primary Button: “Register”
    • Style: Large, prominent, centered, with a bright color (e.g., blue or green)
  • Secondary Button: “Cancel”
    • Style: Smaller, less prominent, located to the right of the “Register” button

6. Terms and Conditions

  • Checkbox: “I agree to the Terms and Conditions”
    • Link: “Terms and Conditions” opens in a new tab or modal
  • Position: Below the password fields, before the “Register” button

7. Footer

  • Text: “Already have an account?” followed by a “Login” link
    • Position: Centered at the bottom of the page

8. Additional Elements

  • Visual Aids: Minimal icons next to each field for clarity (e.g., an email icon next to the email input)
  • Progress Indicator: A subtle progress bar or step indicator if part of a multi-step registration process (optional)
Table of Contents