In the previous post, we designed a Login page using Tink.
Let’s move on to designing the
Sign Up page no-code way using Tink.
This is the basic format of a Sign Up page that we usually see on mobile / web apps.
We will need Basic widgets like Text, Text Field, Elevated Button, Text Button, Divider, Icon button, etc. To position the Basic widgets, we will need Layout widgets like Column, Row, Container, etc.
Let’s build the page step by step.
Add the Text widget by dragging it from the Widgets panel to the screen. Provide Theme style as
Headline 4 and change the value to
Sign Up. Text Size will get automatically adjusted.
You can change the property of the widget by selecting the widget from the screen or Navigator and changing the settings from the right-hand side Properties panel.
Add another Text widget. It will be added vertically in a column just after the
Sign Up text. Change the value to
Add Text Field widget after that. Text Field will have an infinite width and it will cover the width of the screen. Provide left and right spacing of 40 pixels and it will get contained within the screen.
Click on the spacing rectangle and enter
40 by clicking the initial
0 value of the right and left sides of the rectangle.
Users can enter the Email value in this text field using a physical or onscreen keyboard.
Next, we will provide round border to the Text Field. Provide a Radius of 5 pixels and the corners of the Text Field will get rounded with a Radius of 5. Provide a border width of 2 pixels.
You may enter similar kinds of settings for the focused border, enabled border, error border, etc.
Change the color of the border by clicking on color settings. A color box pops up. You may enter the RGB value (DC7C7C) by clicking on the edit box or choosing the color from the panel. Apply the same color to other Text Field widgets and Buttons.
Add another Text widget with the value
Password followed by a Text Field widget. Apply the same settings as described above.
Add Elevated Button widget and provide left and right spacing of 40 pixels. This will ensure the alignment of Text Field widgets and the button. Change the text value of the button to
Next, we have a divider line below the Elevated Button. Add the
Divider widget by dragging it from the Widgets panel.
Again provide left and right padding of 40 pixels.
Row Layout widget and place three
Icon Button widgets alongside each other.
Icon properties and select the Facebook icon. Change the color of the icon as well.
Similarly, change other icons by searching
Row Properties to keep the icons at the Centre. Set Main Axis Size as
Max and Main and Cross Axis alignment as
Row Layout and add
Text Button widgets alongside each other with Centre alignment as before.
Change the value of the Text widget to
Already a User?. Also, change the text value of the button to
LOGIN. Make the text underlined by clicking underlined
U from the Decoration section of the Text Properties.
Now we will change the alignment of the Text. Make the
Sign Up text (from the top) center-aligned from the Properties panel. Also, set the axis alignments to
Centre for the last Row with the Text and Text Button.
Provide 40 pixels spacings on the Left side for the Email and Password Text widgets. This will ensure the alignment of Text Field widgets and corresponding Text widgets.
Now we will position the widgets on the screen. Select the column where all widgets are placed.
Change Main Axis Size as
Max and keep Main axis alignment as
Space Evenly. This will ensure vertically equal spacing between the widgets.
Change Cross Axis Alignment to
Stretch. This will stretch the Elevated button to align with the Text Fields.
At last, adjust the Theme style of the Text widgets. You may keep the
Sign Up text style to
Headline 6. It depends upon your design how to style the Text.
This completes our design of the Sign Up page. Isn’t it simple?
Do try to design your Sign Up page - with No Code!
Your valuable feedback is appreciated to improve our product.
Hypi is happy to help with the implementation of your Mobile or Web applications!