This document contains guidelines for designing your app. Designing an app consists of two parts:

  1. 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 optimized for reading content with clear readible text. 
  2. 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.
    Read more tips on whatsettings you can make in this article.




This article tells you which kind of features you can use to change the general design of your app. 


You can read also the overview article about designing home screens or all about the detailed settings.


If you want to make bigger changes to the design of your app, we advise you to make a copy of your app and try it first on a copy. 


Designing Content blocks


You can configure the way for all the content blocks for your app at once. This makes that the Twitter block, your products list or an information screen in your app all have the same look and feel. 



  1. Open your app from the My Apps dashboard.
  2. Select the "Design" tab in the left sidebar.
  3. Select the yellow "Design" block .
  4. In the middle pane you see all the settings to design the content blocks. In the previewer in the right pane of your screen you see an example screen with all the different element you can configure. Use this screen to see how different combinations of your color settings and your background image look. This will help you to decide if all the text is legible.


On the "Settings" tab you can find the following kind of elements to define the design of 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 legible.
    The setting for List View are 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 a specific image or integrate the navigation bar in the background image.


On the "Images"/"Design" tab you can find all the images that are used in the app, for example the Back button to go back to the home screen, Next and Previous to browse through a list of articles or products.


  • You can use the Photoshop file to design all the images at once in Photoshop. Use the action script in the downloaded zip file to cut out all the separate images and upload the images all at once. 
  • If you do not upload images, the default buttons are shown.
  • You can even design the way the Music player looks.


On the "Animation" tab you can define the animations for your HTML5 app. This setting is not available yet.


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: