Introduction to registration screen design

In this learning content, we will learn step by step how to design the Sign in screen, one of the registration screens. First, let's examine the sample Sign In screen design we will create at the end of this tutorial.

The Sign In screen will contain a display area at the top where we can place the app's logo. Below the logo, there will be a message to welcome users; this will be provided by a text (Label) element. Immediately below the welcome message, there will be input fields for entering email and password information. For the password, we see that the Password element provided by Kuika is used. The Password element shows the characters in the form of a star at the time of entering the password. This feature protects password privacy.

In addition to these fields, there will also be a “Forgot Password” button that will redirect the forgotten password to the reset page.

Below the login fields, there is a button for the Sign In process. There will be a 'Sign Up' redirect button where new users will be redirected to the app user registration page.

We will co-create this screen on top of the app's default Sign In screen. 

1. Open the Sign in screen with the Screens panel on the left edge.
2. Select the Panel element via Item Tree.
3. In the Styling Panel, Layout field, remove the None style and add the RegistrationPadding style.
4. Select White from the Fill field.
5. Select the Panel element's parent Column via Breadcrumb.
6. In the Layout area, remove the default Column style and select the None style to reduce the space.
7. Align the Column horizontally to the left.
8. Then select the Row element, the parent of the Column.
9. Remove the default Row style and add the None style.
10. Let's continue by removing the default screen background color. Click on an empty place on the screen. Remove the color defined in the Fill field.
11. Drag and drop a Row on top of the Welcome Back Label on the screen.
12. Convert the Row into a single column.
13. Add an Image element inside the Row and upload a temporary image.
14. Select the Image element and add the Image64 style and add the Radius style from the Border field.
15. Then select the Label with the welcome message.
16. Change the default color and select the H1 style.
17. Select and delete the subheading below the welcome message.
18. Then select the Row with Email Input, remove the Row style, add the None style and delete the default Top padding value.
19. Select Email Input and change the Fill color.
20. In Email Input, remove the styles defined in the Border field and add the InputBorder style.
21. Now do the same for the Row with Password Input and the Password Input element.
22. Then select the Label with Forgot password and change its color.
23. Select the Row with the Sign in button, remove the Row style and add the None style.
24. Do the same for the Row under the button.
25. Then, with Row selected, convert Row into a two-column structure.
26. Move the Sign up Label in the first column to the second column.
27. Select the column on the left and align it to the left.
28. Now select the column on the right and align it to the right.
29. Select the Sign up Label and change its color.
30. Finally, add an image to the screen background and set ImageFit to fit and Position to Right.

Here is the Sign in screen design ready. Similarly, you can make and use different registration screen designs according to your needs.