The home screen is the most important screen of your app. This is the first screen people see and which they use to navigate through your app. This tutorial will give you some tips and tricks how to make your home screen more attractive.
https://support.appmachine.com/support/solutions/articles/80000978180-home-screen-overview
Choices to make
- Choose your color scheme. Take a good look at your website, logo or products. Choose 3 to 4 colours at the most and use them through the whole app. On the Internet there are websites which you can help to choose a color scheme:
https://kuler.adobe.com/nl/create/color-wheel/
http://colorschemedesigner.com/csd-3.5/ - Choose your Menu type/Navigation Style wisely. Please check here for more information about navigation styles.
- You can Configure your Homescreen via the tips in this article.
- If you use icons in your menu, using your own icons is much nicer than the default icons. Upload the icons at the different building blocks.
- Choose your Background Image. Use a background which is not pushing itself to the foreground. If your image or photo attracts too much attention, you can use an overlay color to make it less prominent. Make sure the blocks are clearly visible. The goal is that your users can find the information in your app.
- A menu with few items is more visually appealing than one with many items. Use Submenu blocks to minimise the amount of buttons on the home screen.
Steps
- Open the "Content" tab of your app;
- Select the blue "Home" block in the left corner of the screen
- At the Settings tab, you can select the Navigation style (View)
- At the Design tab, you upload the background image and the colours of the Title text and the Navigation bar.
Inspiration
Here are some apps with an amazing front screen.
Tapas and Taxis - Text menu
Number 1 uses a text menu. The background image contains a photo of food and the text "Tapas & Taxis" and the AppMachine logo at the bottom are included in the image.
At the three blocks at the homescreen we uploaded images with a white transparent rectangle and the name of the block on it.
Armin van Buuren - Sliding menu and Icon menu
The second example is our Armin van Buuren app. It uses 2 menus. The main home screen menu is a sliding menu which can be opened with the small button in the top left corner (three stripes).
The 6 blue blocks you see is a submenu block with a Icon menu with 3 columns and 2 rows. The icons (the white transparent images) are custom made. The blue square is uploaded once at the Submenu block > Settings > Icon Background.
Marcel Woods - Image menu
Number 3 looks very complicated but uses a image menu. At every block an icon/image is a image with the brown skewed shape and the name of the block on it. Because the angle of every button was different, we couldn't use an icon background, because then the brown image will be the same for every block in the menu.
Read more tips how to design your homescreen.