How to design app home screen?

This article will cover all the information that you will need to customise the home screen of your mobile app.

Section Colors

Click on Settings to expand the tab menu. Follow the steps below to set up your section colors.

Background Color

  • Open the color panel under Background 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.

Heading Color

  • Open the color panel under Heading 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.

Designing the Main Banner

The main banner is displayed on the header of your home screen. It’s important to spend some time designing the main banner with the help of banner image, color fills, banner text attributes.

In this section, we will talk about the elements that will help design a perfect banner for your home screen.

Banner Design

You have the option of designing your banner using an image or simply filling it with a solid color. Both of these options are discussed below.

Select or Upload Banner Image

Choose an image from AppMyite’s library or upload one from your device.

Follow the steps below to select an image from the image library.

  • Click on the field under Select Image Banner.
  • Enter a search term relevant to your design.
  • Click on the image you like when you find it and select DONE.

Follow these steps to upload an image from your own device

  • Click on the Upload Image button at the top right corner of the image library.
  • Click anywhere on this screen to upload an image from your device.
  • You can also drag and drop the image.
  • Click DONE to save your image and proceed.

Make sure the image file meets the required specifications.

  • File format: PNG, JPG
  • File size: 1125 * 480 px

Select Solid Color

Follow these steps to fill the banner with a solid color.

  • Open the color panel under Select Solid 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.

Banner Message

The banner message refers to the text on your banner image. Try to craft an engaging message for your audience. Here are the design elements you need to take care of.

Banner Text

You can add a message to your banner. Set the banner text as explained below.

  • Click on the Banner Text field and enter your message.
  • The character limit is 15. Keep your banner text within the same limit.

Font

Here’s how you select the font for your banner text.

  • Click on the Font field to open a drop-down menu.
  • Select the font that best suits your needs.

Select a font that complements the overall design of your app.

Font Size

Set the font size for your banner text with the following steps.

  • Click on the Font Size field to open the drop-down menu.
  • Select your preferred font size for the banner text.

Color

Select the font color for the banner text with the following steps.

  • Open the color panel under 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.

Align

Adjust the alignment of the text as you want it to appear on the banner.

  • Click on the buttons under Align to set your text on the left, center, or right of the banner.
  • Preview the text alignment on the right side of the screen.
  • Select the alignment for the banner text.

Click DONE to save design settings for the Main Banner section.

Designing the product categories section

This section will talk about designing the product categories for your app home screen.

Column

Click to open the drop-down menu. Select the number of columns you’d like to distribute the product categories within.

Categories with Image

Selecting this will import the relevant category images from your online store.

The category images are imported from the category images set on the website. Therefore, make sure that you set images for all product categories on your website.

Categories with Color

Select this to style and customize product categories with attractive solid colors.

Shapes

Select the shape in which you’d prefer to display the product categories. You can choose between sharp, round, and circle as shapes for your category tiles.

Text color

Select the color for the category names.

Show categories

Select the exact product categories that you’d like to showcase on the app home screen. The display options in the drop-down menu include:

Parent categories

This will populate the parent product categories from your website.

Populated categories

This will populate the product categories from your website which have the highest number of products in them.

Selected categories

Select this option and click on Select categories to manually hand-pick the product categories that you would like to populate on the app dashboard.

Sort categories by

Select the way you’d like to sort the categories on the home screen. You can sort the product categories in alphabetical order or the number of products in each category.

Designing the Blog Categories Section

This guide will talk about customising the blog category section of your app home screen.

Column

  • Click to open the drop-down menu.
  • Select the number of columns you’d like to distribute the product categories within.

Shapes

  • Select the shape in which you’d prefer to display the product categories.
  • You can choose between sharp, round, and circle as shapes for your category tiles.

Background Color

  • Select the background color for category tiles.

Text color

  • Select the text color for the category names.

Show categories

  • Select the exact blog categories that you’d like to showcase on the app home screen. The following are the available options in this drop-down.

Parent categories

  • This will populate the parent blog categories from your website.

Populated categories

  • This will populate the blog categories from your website that have the most blog posts in them.

Selected categories

  • Select this option to handpick the blog categories that you would like to populate on the app home screen.

Sort Categories by

  • Select the way you’d like to sort the categories on the home screen.
  • You can either sort the blog categories in alphabetical order or based on the most populated categories.

Web View

This feature will enable you to display a webpage on your mobile application.

  • Click on Settings in the Web View tab.
  • Enter the URL of the webpage that you’d like to display on your app home screen.
  • You can also enable the toggle to display the header and footer of your website in the app.
You can turn off the display of all other sections in case you’d like to display only the webpage.

Pages

The page management section enables you to handpick the pages you want to showcase on your app home screen. The following steps explain how the process works.

  • Click on Select Pages in the Pages tab. You will be redirected to the Home Pages Selection page.
  • Turn off the ‘Show All’ toggle and select the specific pages you want to display. Keep the toggle on if you want to display all the pages.
  • AppMySite provides you the option to display up to 100 pages.

Click on Save when you’re done.

Designing the Section themes

In this part, you can rearrange the different sections of your app home screen. These sections include.

  • Sale Items
  • Recently Viewed Products
  • Featured Products
  • In Cart Products
  • New Products
  • Blog Banner
  • Recent Blogs
  • Blog Categories
  • Popular Blogs


All these sections are designed in the section color field. The sections you get to display may differ depending on the type of website you choose. For instance, you won’t see options to display product-related sections if you choose Blog as your website type. Conversely, you won’t see blog-related sections if you choose Ecommerce as your website type.

Visibility and Arrangement

Section Visibility

You can choose the sections you wish to see on your home screen. To display a section on the home screen, turn on the toggle button in the section tab. To hide a section, turn the toggle button on the section tab off.

Rearranging the Sections

You can rearrange all the aforementioned sections of your app. Follow the steps discussed below.

  • Hold the anchor button on the left of each section tab and drag.
  • Place the section wherever you want.
  • Keep experimenting until you reach an arrangement that is relevant to users and aesthetically optimal.
  • Click on SAVE at the bottom-right.

Rename section-header

Customizing headers on the home screen helps you personalize your app for your users. On AppMySite, you can rename the headers on your home screen within minutes.

The following steps explain the process:

  • There is an edit icon next to every section header. Click on the icon.
  • Enter the new header name.
  • You can preview the new header on the live screen to the right.

Finally, preview the changes on the live mobile app emulator to the right. Click on SAVE and proceed to the next step.