Adobe XD CC Tutorial

Registration Screen

In this article, we are going to learn How to create a Registration Screen using for our application using Adobe XD CC? For this article, we are going to use Adobe XD Document which we created in our last article. In our last article, we create a Login Screen for our Application in Adobe XD. Following is the download link for Adobe XD document which we created in last tutorial article.

FileDownload
Dealsatoxyz_Login_Screen.xdLogin to Download

Our registration screen is going to look similar to Login Screen. So let's first create a copy of Login Artboard. For this select Login artboard by clicking on artboard name. Finally press (command + d for mac users), it will create a copy of Login Screen. Let's first rename our artboard to Registration. Now we need to change Login header to registration header. For this select Login text. If it is in the Login group (A group of Rectangle and Text) then you need to double click on the text element. Then again double click on the text element to start editing its text. Replace Login with Registration. Finally if required realign the text item. Now, rename the login group and its elements name. For this open layer, panel search for Login Header group and then rename it to Registration.

Our Registration Screen is almost done. Except we need to add two more text boxes. One for Confirm Email and another for Confirm Registration. We are going to place Email and Confirm Email Side by Side. Similarly, we are going to place Password and Confirm Password Side by Side. For this first reduce the width of existing email text box and password text box.

Once you have enough space copy email and password text box and place immediate right to Password and Email.

Next, we are going to add a text hint for all the text boxes. We forgot to add text hint for login screen so we are going to also perform the same action for Login Screen text box also.

For adding a text item just select the text tool and place following text in respective text boxes.

  • Email
  • Confirm Email
  • Password
  • Confirm Password

Following image shows the final text boxes.

Now we need to Modify the footer. Rename Sign In button to Sign Up button. Change the bottom text element text to "Already Have Account? Login Here". For reset password text element change text to "Terms & Policy". Delete Activate Existing Account text element.
Following is the image for final Registration Screen.

Our registration screen is now ready. Next, we are going to Reset Password and Verify Mobile, Email Screen. Following is the download URL for Registration Screen.

FileDownload
Dealsatoxyz_Registration_Screen.xdLogin to Download
...

About The Author

Hello, I am Mayank Sanghvi I am primarily a BI developer with experience in MSBI and Cognos BI Suit. Also having interest in various other technologies such as Android, Java, C#, ASP .NET and other. I enjoy learning new technologies and share my experience with others.

0 Comments
Leave A Comment

Please login to post your valuable comments.

add