You should never underestimate the role of a good home screen in the success of your mobile app.
The obsession with getting the home screen right is not exactly new.
Before mobile apps, websites were the go-to digital medium. Even then, companies used to specially hire UI/UX experts to create the perfect website home page.
Your homepage should be at the forefront of explaining the exact offerings of your company. There is no other webpage that is more important in this regard.
It is natural to see the importance of a great website homepage translate into a yearning for app home screen optimization.
A great home screen is crucial for making sure a mobile app performs well on key app metrics. These KPIs include the likes of app retention, session duration, churn, engagement, and more.
The main challenge is this – how to design a great home screen?
Designing a home screen on AppMySite
App development and design are not what they used to be some years back. AppMySite has made no-code app development a real possibility now. Even app design is a simple matter of a few clicks on AppMySite.
You can design the home screen of your mobile app on AppMySite through a ton of customization features. There are a number of design options available for WordPress users trying to create an app for their blog.
While the available features are easy to use, some initial guidance can set you on the right path. It is important to follow the best design practices to
Designing the screens preceding the home screen
Contrary to popular belief, the home screen is not the first thing your users will see upon launching your app.
The launch (splash screen) and user onboarding screens come before the home screen. While the latter only appears once when you user will arrive for the first time, the launch screen will always appear on app launch.
It is thus wise to design the screens preceding the home screen well to make sure the latter actually makes an impact.
a. Designing the launch screen
On the AppMySite platform, the splash screen is referred to as the launch screen.
The following steps explain how you can design a splash screen on AppMySite.
- Select Launch Screen under Appearance on your AppMySite account.
- Select a background for your launch screen. You have three options when it comes to selecting a background – a solid color, a picture from the free AppMySite image library, your own background design.
- You also add a logo or some CTA text on the background image. Select the alignment of the logo or CTA w.r.t the background image. You can update the size, color, and font of the CTA text as well.
- Preview everything you change on the live preview screen to the right.
The launch screen should ideally be something simple and soothing. This screen will only appear for 2-3 seconds. It doesn’t make sense to add any important marketing message here. You only need to make sure the overall aesthetic matches the tone of your overall mobile app design.
b. Designing the log-in and sign-up screens
Designing the user-onboarding screens of an app well is very important. You cannot hope to get people to the home screen of your app without a smooth user-onboarding process.
Here’s the stepwise process of designing the log-in and sign-up screens on AppMySite-
- Select Login and Sign up under Appearance.
- You will first need to select a background image. You can choose to display a background image, choose a solid color, or display both by setting Image Opacity.
- You can select an image from the AppMySite free library or upload your own design.
- Select Or to either display background image or solid color. Select And to display both together.
- Next, add your app logo. You can create your own logo by adding text and choosing size, font, and color. Alternatively, you can choose to upload your own icon design.
- Select a color theme for your screen. This will dictate the color of the buttons on your login screens, the button text, and the field text.
- Preview the design on the live screen on the right side of the page.
Make sure there is design consistency between the launch screen and login & sign up screens. This is just to make sure that the onboarding process is cohesive on a graphical level.
After creating a good launch screen and designing the user-onboarding screens, it is time to design the home screen. On AppMySite, the home screen is referred to as the dashboard. In the next steps, we will discuss everything you can do to design the home screen of your WordPress app.
Step 1 – Section colors
Select Dashboard under Appearance to design your home screen. This section will help you fully customize your home screen before you go from WordPress to App for Android and iOS.
The Section Colors tab enables you to set up the color scheme of various sections on your home screen. The following sections explain how you can set up your section colors-
- Choose the Background Color for the section.
- Choose the Heading Color. This will help you select the color in which the heading is displayed on the home screen.
- Select a Button Color. This will colorize the View All button to the right of the section heading.
- Select Button Text Color. This will add a color to the text of the button by the heading.
You can scroll over the color panel to settle on a color or enter HEX or RGB values for each of the above fields. Make sure the section colors you choose assimilate well with the overall home screen design you have in mind.
Step 2 – Dashboard header
Your home screen will contain a header. The Dashboard Header tab enables you to add a header name.
Generally, the dashboard header contains the name of the mobile app. You can experiment with CTAs and other kinds of marketing messages to add to the header.
The steps here explain the brief process of updating the dashboard header.
- Select Settings on the Dashboard Header tab in the Dashboard section.
- Enter the header you wish to see in the Rename field.
- Preview the change on the live preview screen on the right.
Step 3- Design Main banner
The next step is designing the main banner. AppMySite offers a ton of design options for you to create the perfect banner.
Banners are a common part of home screens. Most of the apps you use have banners on the home screen. The following steps lay out the process of adding a banner on AppMySite.
- Select a banner image. You can again access the premium AppMySite image library for high quality artwork. Alternatively you can upload your own banner design.
- You can bypass the banner image entirely and simply choose to fill the banner background with a solid color. Scroll over the panel to select a color or enter a HEX code or RGB values
- Enter banner text. Generally, app companies tend to add a CTA in the banner. Choose a CTA that assimilates well with the banner.
- Select the color, font, size, and alignment of the banner text.
- Check the preview screen on the right to get an idea of how the banner looks on your home screen.
You can shift the banner image down in case you want to alter the order in which each section appears. Just select the move icon beside the tab name and shift the banner up or down.
Step 4 – Blog banner
Many bloggers have a blog banner on their website. Website banners can serve a lot of purposes. Bloggers can promote specific blog posts that bring in more engagement or revenue. Business websites on WordPress can use it to promote specific landing pages that can convert incoming visitors.
AppMySite enables you to import a blog banner from your WordPress website and display it on the home screen. Both the blog and main banner can raise the aesthetic appeal of your home screen.
All you need to do is activate the toggle on the Blog banner tab. Doing this will automatically import your blog banner to the home screen of your app. You can customize the position of your banner by selecting the move button on the blog banner tab and moving it up or down.
Step 5 – Blog Categories
You can do a lot with Blog Categories on AppMySite. Category display is very important because your users will springboard from one part of the app to another with categories. It is very important to get the overall display of your category section right to ensure smooth app navigation and discovery.
The following steps explain how to manage category display on AppMySite-
- Select the number of columns you wish to display your blog categories within. You can choose up to four columns.
- Choose the shape of your category tiles. You can choose between a sharp square, a rounded square, and a circle for your category tiles.
- Select a background color for your category tiles. Scroll over the color panel or enter a HEX code or RGB values to choose a color.
- Choose the color you want to show your blog category names in. Again, you can select a color by moving over the panel or entering a HEX code or RGB values.
- Select the categories you want to display on your home screen. Here are the options you get in the drop-down menu –
- Parent categories – Select this option to only display the primary categories from your WordPress website on the home screen.
- Populated categories – Select this option to display categories that at least contain one blog post.
- Selected categories – Select this option to manually select the categories you want to display. After selecting this option from the dropdown menu, the Select Categories button will appear. Click on it. You will be directed to the Home Blog Selection page. Turn on the toggle for a category you wish to display. You can also choose to display specific subcategories under a main category. Hit Save when you’re done
- Select the order in which you want to display your categories with Sort Categories by option. You can choose to sort categories alphabetically or based on the number of blog posts in each category.
You can again use the move button in the Blog Categories tab to shift the entire section up or down.
Step 6 – Popular blogs and Recent blogs
It is always a good idea to populate your home screen with curated sections that display specific blog posts. This provides visitors options beyond the generic blog categories section to explore the content on your app.
The common sections you can display on the home screen of your WordPress app are popular and recent blogs.
Popular blogs simply refer to the posts on your blog that get maximum readership. Recent blogs refer to the posts you’ve published recently.
The next step is thus updating the appearance of the Popular blogs and Recent blogs section on your home screen. All you need to do in this step is turn on the toggle on the tabs of each of these sections.
You can use the move button on the tab of each of these sections to update their order of appearance on the home screen.
Step 7 – Web view
The web view option enables you to display a simple web view interface on your app dashboard. You can leverage this option in case you already have a well-designed web page that you wish to display in a mobile environment.
The following points explain how you can add a web view interface to your mobile app dashboard-
- Activate the toggle on the Web View tab
- Enter the URL of the web page you wish to display in the web view interface. This can only be a webpage from your own website.
- Select the Show my website’s header and footer toggle if you wish to display your website menu in the web view interface. Disable this option if you only want to display app menu.
The web view interface will replace all other sections of your home screen designed previously. You can preview the web view interface as your home screen by downloading the AppMySite demo app on your mobile device.
Step 8 – Pages
The last section you can customize for your home screen on this free online app maker is the Pages section. This section will appear at the bottom of your home screen. You can choose to disable it completely by turning off the toggle in the Pages tab, or customize its display.
Here are the steps you need to follow in order to design the ideal home screen for your app-
- Activate the toggle in the Pages tab and choose Select Pages.
- You will be redirected to the Home Pages Selection page. Here you will find all the various pages of your WordPress blog.
- Choose Show All if you want to display all the pages or specifically select the pages you want to display.
- Hit Save and continue.
You cannot alter the position of the Pages section on the home screen. It will always appear at the bottom.
Step 9 – Preview your home screen
The final step is previewing the home screen you created on AppMySite. After you’re done connecting your website and app with the AppMySite WordPress plugin, you can preview your app.
The following steps explain how you can proceed-
- Go to App Preview.
- Here you will find two mobile emulators – one for Android and the other for iOS.
- Select the device you wish to preview your app in. AppMySite provides multiple device options on both Android and iOS emulators.
- Tap on the emulator screen to start. You will soon see your home screen design.
- Evaluate the overall working and design aesthetic of the home screen. You can go back and make changes to any section you please. The changes will automatically be reflected in the App Preview.
- You can take screenshots of the home screen within the emulator and initiate the process from the beginning using the restart button.
- To test your app on a real mobile device, download the AppMySite demo app on your smartphone. You can then preview your app in a real device environment and get a much better understanding of how it works.
Designing the home screen of an app is a very challenging process. Even when working with an effective app creator online, you need to have a clear design vision and a penchant for understanding user experience.
This piece breaks down the process of designing a home screen for your WordPress app on AppMySite. You can also leverage a ton of other features on AppMySite on your way to building an app.
Besides using the featured ingrained in the platform, you can also purchase app add-ons that provide additional value-added services. These add-ons will further smoothen your app journey and help you build a great app.