Best practices to design the home screen

Best practices to design the home screen



This article shows you practical tips and tricks to design a perfect home screen for your app. For basic understanding of home screen design, please take a look at Design the home screen.

Before we start, it's helpful to know that you can always preview your design using our preview panel and preview app. And don’t forget to save changes when you’re done.

JMango360 home screen structure



App's home screen lets users get the most important pages within your app quickly. JMango360 app's home screen consists of one slideshow and one or more button rows. While designing the home screen, make sure you keep this structure in mind to ensure the actual buttons are supported by the structure.

Slideshow is a great choice for sale promotions. You are allowed to create a slideshow of as many slides/images as you wish and disable the slideshow if you no longer want it. The recommended image size for slides is 1125 x 800 px. Regarding buttons, you are able to create multiple button rows, each of which is 400 px height and can contain no more than three buttons. 
The design of your app's home screen (and your app in general) must stay consistent with your webstore and well reflect your brand identity. We highly recommend Adobe XD and Photoshop for prototyping and photo editing because of their vast features and functionality. If you are a Mac user, you can also consider Sketch as a cost-effective and lightweight UI design tool. For splitting images into buttons, PineTools is sure to be a handy online tool you can rely on. 

To get started, you should study and analyze your webstore design to build a foundation for your mobile app design, based on your brand, content, and app objective. After choosing your patterns and app base layout, move on to sketching your design ideas and building a basic version of your home screen (prototype). Once you have your prototype laid out, you can start creating each home screen button. 

App design best practices



JMango360 has defined app design best practices that deliver successful apps. Below are our top best practices:
  1. Keep it short. Your app's home screen should not be longer than 2 - 3 pages as most users don't scroll further.
  2. Highlight promotions or actions. Use the slideshow or button rows on the first page for promotions or actions. Make sure to specify the exact sizes for the slideshow or button rows to make updates easy without re-doing the complete design.
  3. Optimize the user experience. Besides product catalogs, you can create buttons for blog, newsletter, contact information, shopping support, etc. In addition, if you have a loyalty program, you can make a link to a webpage with information about your loyalty program and explain the process in the app. Without loyalty program integration, points will be collected in the app but can't be redeemed.
  4. Strengthen your brand. Add a footer with social media icons and/or trademarks. It's nice when your app users can open your Facebook or Instagram fan page from your app.
  5. Clean the side menu. Avoid overwhelming users by grouping information pages in sub-homepages. 

Tips and tricks for button design

#1 - Buttons with border

Buttons with border can add more "air" to the home screen and elegant-ize your app. Just add a (white) background to the bottom of the layer stack and make sure the size of the border stay consistent between buttons.



#2 - Buttons covering 2 or more button rows

Do you know that a single button can cover 2 or more button rows? It's just a matter of design! You can create big buttons and then split them horizontally into equal parts, each of which is actually a button row in our platform.

When uploading the images of the same button to our platform, make sure you link relevant images to the same product catalog or page.



#3 - Half-screen buttons covering 2 button rows

Each button row can contain up to 3 buttons. You can create vertically long buttons that account for one-third or half of the screen and cover 2 button rows as in the screenshots below. 

Same as #2 above, just create big buttons and then split them into parts. When uploading the images of the same button to our platform, make sure you link relevant images to the same product catalog or page.






    • Related Articles

    • Design the home screen

      Home screen is potentially one of the most important screens in your app. Designing a home screen that is both visually compelling and high-converting is incredibly essential. This article will show you how.  Before we start, it's helpful to know ...

    • Basics and overview of app design

      After successfully creating an app, your next step is to design your app the way you want. JMango360 provides you with a range of useful features to help you get a beautiful and attractive app. Where to design your app? You design your app in ...

    • How to promote a specific product on the home page?

      Required app version: Native App - 2.60.3 | PWA - 1.4.1 You might want to promote a specific product on your mobile app or PWA using slideshow or buttons on the home page. Follow the steps below: Go to JMango360 Back Office > Design > Home ...

    • Take a first look at your app

      Using the Preview App, you can take a first look at your app. Let us walk you through through some basic tasks you will be doing while using your app. App's home page Home page is potentially one of the most important screens in your app. It contains ...

    • How to integrate with your loyalty program?

      JMango360's standard offering does not support loyalty program integration. That said, you can still present your loyalty program in your app as a menu item or a home screen button/slide. The only limitation is that the app loyalty points can be ...