Axure Tutorial: Make Sign In Prototype

Introduction

The Sign In interface is the interface we have met in almost all websites. Today, let's learn how to make a basic Sign In interface. 

Features to be Realized


1. If no username or password is entered, click the SIGN IN button to hint the user with username error information.

2. If the user name or password is entered incorrectly, click the SIGN IN button to hint the user with password error information.

3. If the user name or password is entered correctly, click the SIGN IN button to show the sign in succeed information.

Widgets Setup

1. Create basic sign in interface. Two text fields, one button and one header are needed.

2. Make hint information through 3 labels.

3. All contents are created as dynamic panels, and status 2 is a sign in succeed text

Interactions Setup

 

When the sign in button is clicked, you need to judge the text in the username and password text fields.

1. If the length of username is equal to 0, Please enter username text will be shown;

2. If the length of password is equal to 0, Please enter password text will be shown;

3. If username or password is entered incorrectly, Username or password error! will be shown

4. Otherwise, the state of dynamic panel will change to state 2 of Sign in succeed

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).


Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.