Login & sign up screens

The log-in, sign-up, and forgot password screens are crucial as parts of the user onboarding process. Designing the launch screen on AppMySite can be divided broadly into three steps: designing the background, logo, and buttons. 

Let’s take a look at designing your onboarding screens:

Background image

There are three ways using which you can design the background image for your login, signup, and forgot password screens:

Choose an image from the library

Follow the steps below to choose an image from the AppMySite library for your background:

  • Click on Upload Background Image. You’ll be redirected to the AppMySite image library. 
  • Choose an image for your background design.
  • 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 Background Image. You’ll be redirected to the AppMySite image library. Select Upload Image at the top right corner of the image library. You’ll be redirected to the upload image screen.
  • Click on the window to upload an image from your device. 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.

Make sure the image file meets the required specifications.

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

Fill the backdrop with a solid color

Follow the steps below to fill your background with a solid color:

  • Click on Select Background Color to open the color panel.
  • Choose your preferred color. 
  • You can also enter a hex code or RGB values to choose a 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.

There are two ways you can design the brand logo:

Create the logo on AppMySite

The following sections cover the different design options you have to create the logo of your login and signup screens. 

  • Logo text: Enter a text of your logo. You can enter up to 15 characters of your logo. 
  • Logo color: Choose a color for your logo. You can also enter a hex code or RGB values to choose a color. 
  • Logo font: Choose a font from the drop-down menu for your logo. 
  • Font size: Choose the size of your logo’s font.

Upload your own design

Follow the steps below to upload your own logo.

  • Click on Upload in the Logo section. 
  • Click on the window screen and select an image for 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 x 1024 px

Color theme

Follow the steps below to choose the color of the fields and buttons of the login, signup, and forgot password screens.

  • Primary color: Choose the primary color from the color panel. You can also enter a hex code or RGB values to arrive to select a color.
  • Secondary color: Choose the secondary color from the color panel. You can also enter a hex code or RGB values to arrive to select a color.
  • Button color: Choose a button color from the color panel. You can also enter a hex code or RGB values to arrive to select a color.
  • Button text color: Choose a button text color from the color panel. You can also enter a hex code or RGB values to arrive to select a color.

Click on SAVE when you’ve selected the color for your onboarding screens. Preview the design of your login and signup screens on the live screen. 

Previous articleColor theme
Next articleLaunch screen

Related Articles