This document contains guidelines for designing the home screen of your app. Designing an app consists of two parts:
- the general look of the whole app: this the way all the content blocks, for example your products list, twitter feed or your company profile in your app will look. The design needs to be optimised for reading content with clear readable text.
- the home screen: this is the homepage / start screen that customers see when the app is first opened. All the blocks of your app are accessed via the home screen. This page is used for showing of your brand, mostly via the background image.
This article tells you which kind of features you can use to change the home screen of your app.
You can read also the overview article about changing the general design of your app.
Designing the Home screen
The home screen is the homepage / start screen that customers see when the app is first opened. The blocks of your app are accessed via the home screen. This page is also used for showing of your brand, mostly via the background image.
The most important choice to make is the view or navigation style. Do you want to have an icon menu, text menu or a sliding menu that slides away to the left?
To give the app a consistent look and feel, it is important to use complementary design settings for both Home screen and the screens of the content blocks.
The color scheme can be the same or reversed. While using a sliding menu, you usually reverse the background color and text color, to divide the sliding menu from the content blocks.
For Icon menu's en Text menu's you will probably use a background image in the homescreen with some branding on it. The names/icons of the blocks of the app need to be placed on the of the background image where its is a bit more calm.
You can read more about make choices for the design of you homescreen in this article.
- Open your app from the My Apps dashboard.
- Select the "Design" tab in the left sidebar.
- Select the yellow "Home Screen" block.
- In the middle pane you see all the settings to design the homescreen of your app. In the previewer in the right pane of your screen you see the homescreen itself. You can try out changes to see how they look. If you do not like them, hit the "Cancel" button on the top right corner.
On the Tab Settings you can find the following kind of elements to define the design of the home screen. These settings will differ per navigation style :
- View: The most important part of the home screen is the way the blocks of the app are shown. Do you want to use only text, icons or both? Or do you want the menu to show in a sliding menu on the left. You can choose the best navigation style based on the purpose of your app, the amount of blocks and if you can design great easy to understand icons for every block. Here is an article how to choose a navigation style for your app.
- Menu Layout : Define where on the screen the blocks of your app are shown.
If you use a background image with your logo on the top, you can position the menu on the bottom of the screen.
You can also decide if you want to use only the block names, or also show the block icons. Set the amount of Columns and Rows and the Position. In some advanced menus you can also set the Margin. - Text: Define the position of the block name and the Font size.
- Icon: If you want icons to be shown, set their Size and Padding.
- The Icon Background Image is the image that is shown beneath every icon which you uploaded at the specific blocks.
According to your settings, the block titles and block icons might be shown on the home screen.
You can find the block name and block icon for every block at the Content tab when you select a block. At the top of the center pane you see the block icon and block name. Change the block name by typing another name and click Save in the top right corner.
Change the block icon by clicking on the small green arrow next to the icon in the center pane and choose Replace.
The color and background settings that available for the home screen are the same as for the content blocks.
- Color Settings : for example text color, title color, etc. Make sure the text can be read clearly. You can also make the font size bigger or change the text font to make the text more readable. The setting for List view is used when showing lists, like list of products, tweets or FAQ's.
- Background image: When designing for blocks, the background image should be blurred, calm and offer no distractions, so the text can be read clearly. You upload the background image in an iPhone 5 format. Set the alignment right, so the background image will look great on other smartphones as well.
- Navigation bar: The navigation bar is the bar at the top of your app screen which displays the title of the screen you are viewing at the moment. You can use this specific image or integrate the navigation bar in the background image
(examples of navigation styles for the Home Screen)
NOTE: AppMachine also offers our users the option to change the design settings on a per block basis. When you open a block you can select the Design tab and click on the blue “Add Custom Design” button. This means that the block will follow the design settings set in this tab and ignore those set in the green “Design” block. The settings from the green “Design” block can subsequently be restored if needed.
Other related articles: