This articles contains tips when you start to design your app.


1. Navigation style


Choose the right navigation style:

  • Creating an app for use with a lot of items: choose for the sliding menu;
  • Creating an app with just a few menu items: choose for the text menu (5 items) or icon menu.


Read more tips about choosing the right navigation style here or how to configure your homescreen.



2. Background image format


Design with an iPhone 5 in mind.  The screen dimensions for an iPhone 5 are 640 x 1136px. Please keep the sizes of an iPhone 4 (640 x 960 px) in mind while designing so that items will fit both screens.


Pay close attention to the alignment of the background images. If there is text or an important visual element in the image you want to avoid this being cropped by smaller screens or improper image alignment. For more information, click here.


Always test the skin on both Android and iOS to make sure it looks more or less the same.


3. Use these Blocks while designing


Add the following blocks to check your design:


  1. Excel - Flowershop demo file:
    - add some items to the list (by dragging items on the layout editor)
    - go to the Advanced tab: add a search bar by adding some search bar fields > to check your search bar;
    - go to the Advanced tab: and add the favourites option > to check your favourites icon;
  2. Facebook;
  3. Twitter;
  4. Information building block;
  5. Submenu with tabs, with two blocks.


This will make sure that your settings look great in all the different kind of screens.


4. General Design settings


  1. Fill out all the colours at the green “Design” block > Settings > Colours.
    Our system will copy all those settings to the "Menu" block. Just double check the color for the titles on the home screen. Maybe you want them different on the home screen.
  2. Add all the imageson the "Design" block > "Design" tab > Images 
    • ** the default button and the tab header button will color with the other settings
    • The back button has a minimum canvas size of 88px x 180 px;
    • The info button has a canvas size of 88px x 88px;
    • The browse buttons also need to have a canvas size of FREE x 88px
  3. Do not forget the browse mode and transition
    Choose for example browse mode: from right and transition: horizontal slide.


5. Homescreen Design settings


  1. Upload the background image of the homescreen at the blue design block > Design.
  2. Set your home screen settings at the blue “Design” block > Settings to make sure the blocks on the homescreen are shown on the right place of the screen.
    Here is more information how to design your homescreen