Sign in Sign up Page Wireframe

Sign In/Sign Up Page Wireframe

This wireframe template outlines the complete user authentication flow including sign in, registration, and password recovery processes. The design emphasizes clarity and ease of use across multiple authentication states.

Sign In Section

• Email address and password input fields

• "Remember me" checkbox option

• "Forgot password?" link

• Social authentication option (Google)

• Navigation to sign up page for new users

Sign Up Section

• "Create Your Account" header with clear instructions

• Email and password input fields

• Newsletter subscription option ("Receive news, updates and deals")

• Terms of Service and Privacy Policy acknowledgment

• Social authentication alternative (Google)

• Navigation to sign in page for existing users

Password Recovery Flow

Forgot Password Screen

• Email input field

• Clear instructions for password recovery

• Reset password button

• Email Confirmation Screen

• Notification of sent recovery instructions

• Instructions to check spam folder

• Option to resend verification email

• New Password Creation

• Password requirements clearly stated (8+ characters, different from previous)

• Password and confirmation password fields

• Reset password submission button

Two-Factor Authentication

• Verification code input interface

• Masked phone number display (***453)

• Option to resend code

• Continue button

Navigation Elements

• All screens include a way to return to the main sign in page

• Clear distinction between primary actions and secondary options

• Consistent layout across different states
This wireframe provides a comprehensive template for implementing secure user authentication while maintaining a clean, user-friendly interface.

Cheers!

Khawaja Rizwan