How to design login & sign up screens?

The log-in, sign-up, and forgot password screens are crucial as parts of the user onboarding process. The successful onboarding of users hinges upon the optimality of these screens.
There are three design elements you need to optimize in this step. Here is a comprehensive guide to these three design elements that together shape the user onboarding process.

Designing the background image

There are two ways using which you can design the background image.

  1. Selecting the background design
  2. Filling the backdrop with a solid color

Both these options are explored below.

Selecting the background design

When selecting the background, you can either select an image from the vast AppMySite image library or upload your own design.
Let us discuss both in detail.

Selecting designs from AppMySite design library

  • Click on the Upload Background Image field. You’ll be redirected to the image gallery.
  • Enter a search term relevant to your design and browse for the right image.
  • Select the preferred image when you find it.
  • Click on DONE to save the image.
  • Select ‘and’ to customize the tint color and opacity of the background image. This step is optional.

Upload your own design

If you want to upload your own design for the background, follow these steps.

  • Click on Upload Image at the top right corner of the image library. You’ll be redirected to the upload image screen.
  • Click anywhere on this screen to upload your image file.
  • You can also drag and drop the image file.
  • Select ‘and’ to customize the tint color and opacity of the background image. This step is optional.
  • Click on DONE to save your image.

Make sure the image file meets the required specifications.

  • File format: PNG, JPG
  • File size: 1242 * 2208 px

Filling the backdrop with a solid color

If you choose to fill the background design with a solid color, here are the steps you need to follow.

  • Click on the ‘Select Background Color’ field to open the color panel.
  • Scroll across the color panel to choose your preferred color.
  • You also have the option of entering a hex code or RGB values to choose the optimal color.

Preview the changes you make in real-time with the live emulator on the right side of the screen. Keep experimenting until you arrive at the right background.

Once you are done, preview the background color on the right of the screen. Proceed to the next step when satisfied.

Designing the brand logo

There are two ways you can design the brand logo.

  1. Create the brand logo yourself
  2. Upload the brand logo design

Let us explore both options in detail.

Create the brand logo yourself

You can create your own logo using design elements such as logo text, color, font, and font size. Here’s how you need to proceed.

Logo Text

  • Enter the text in the Logo Text field. Generally, the logo text includes the initials of your brand. You can be creative and experiment with the text to engage your users.
  • Preview the changes you make in real-time with a live emulator.

Logo Color

  • Click Select Logo Color to open the color panel.
  • Scroll across the color panel and find the color that best suits your design.
  • You can also enter a hex code or RGB values to arrive at the color you want.

Logo Font

  • Choose a font from the drop-down menu under Font.
  • Preview the font on the live screen on the right side of the screen.

Font Size

  • Select size from the drop-down menu under Font Size.
  • Check the live preview screen at the right side of the screen and make note of the change in the font size.

Upload the brand logo design

You can follow the steps below to upload your own brand logo.

  • Click on Upload in the Logo section. You’ll be redirected to the upload image screen.
  • Click on the screen to select an image file from your device.
  • You can drag and drop the image file as well.
  • Click on DONE and proceed to the next step.

Make sure the image file meets the required specifications.

File format: PNG, JPG
File size: 1024 * 1024 px

Designing the Button Style

This step involves designing every action button on the user onboarding screens. You can optimize buttons such as REGISTER, SIGN IN, SEND PASSWORD, and others.
Here’s how you should proceed.

Primary Color

  • Open the color panel under Primary Color.
  • Scroll across the color panel and preview the changes on the live emulator. Keep experimenting until you find the right aesthetic.
  • You can also enter a hex code or RGB values to arrive at the color best suited to your design.

Secondary Color

  • Open the color panel under Secondary Color.
  • Scroll across the color panel and preview the changes on the live emulator. Keep experimenting until you find the right aesthetic.
  • You can also enter a hex code or RGB values to arrive at the color best suited to your design.

Button Color

  • Open the color panel under Button Color.
  • Scroll across the color panel and preview the changes on the live emulator. Keep experimenting until you find the right aesthetic.
  • You can also enter a hex code or RGB values to arrive at the color best suited to your design.

Button Text Color

Open the color panel under Button Text Color. Scroll across the color panel and preview the changes on the live emulator. Keep experimenting until you find the right aesthetic. You can also enter a hex code or RGB values to arrive at the color best suited to your design.

Click on NEXT when you’re done designing the user onboarding screens.