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.
Recommended tools for home screen design
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:
Keep it short. Your app's home screen should not be longer than 2 - 3 pages as most users don't scroll further.
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.
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.
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.
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.
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 ...
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 ...
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 ...
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 ...
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 ...