app design and layout
TRANSCRIPT
To start designing your app make sure you are on the ‘App’ view of the platform. This is located in the middle of your header bar.
Go to the ‘Design’ tab on the navigation panel to start customising out your content.
If you would like your colour set to be a default theme press ‘Browse Themes’ and choose the colours you would like to be used on your app, otherwise you can manually adjust them by going to
the header bar settings and choosing a background and text colour.
Under the header bar click the browse button to add a logo, choose the background colour from the colour box on the right which will
open a colour palette. Choose a colour and click on ‘okay’
Expand the category header section to customise it. Choose the title font from the drop down menu
alongside, then you can choose a colour for the text and background.
You can then edit the content section by expanding it and once again choosing the background and title font from the drop down list, then add the colours for the
title, body and background
If you’ve chosen to go with the ‘slider view’ for your app’s home screen, then here is where you can
choose the sliding navigation colour for your app.
If you would like to see the changes while you are making them, press the ‘preview’ button on the top header bar where it will give you the QR code to
scan, to be able to download the preview app from the app store and google play.
Press ‘save’ on the top right so that you don’t lose any changes.
To edit the layout of your app, go to the ‘Layout tab’ on the navigation panel.
Begin making it your own by choosing your app interface. (This is how it’s viewed on the Home Screen). There are 3 options to choose from : Slider, Grid or Tile.
If you choose the ‘Slider’, there will be no further changes for you to make.
Grid View
If you choose Grid View, you will need to upload a splash image. This is the image that will be viewed on the Home Screen of your app.
Press ‘Add Splash Image’.
‘Drag and drop’ an image to upload or choose to browse to upload an image.
Choose whether you would like the splash screen to link to a feature, feature content or website. This means that
if the splash screen is clicked, it will take you to the content that you have specified.
Press ‘update’ to save changes.
To add your own custom icon for your bottom tabs, press ‘Add Tab Icon’.
Either drag and drop an image in to the blue space or press ‘browse’ to upload one from your computer.
Choose whether you would like to link the tab to a particular feature, or content on your app or even an
external website.
Choose a background colour for your app by pressing the drop down menu which will display a colour palette.
If you would like more than one row of tab icons then select either 2 or 3 rows.
The navigation icon is the icon used to open the slider menu. Use the preloaded icon or upload your own.
If you would like the tab icons to have a background image upload your own custom ‘Grid Background
Image’.
Press ‘save’ to update your changes.
Tile View The Tile View is a good layout option if you would like to have multiple images and buttons on your App’s Home
Screen.
Start uploading your image by clicking ‘Add Tile’.
Label the image that you are uploading
Select which size you would like to upload your tile as, by selecting the diagram of the layout you want to pick.
Once you have chosen the size you would like to go with, the image upload area will update the size that you will need to upload your
pictures as, accordingly.
Select your image by dragging and dropping it on to the platform or browsing for one on your computer.
Choose whether you would like to link the tile to a particular feature or content on your app, or even an external website.
You will notice that the images you upload will puzzle together depending on the layout you have chosen for that image.
Rearrange the order of your images by hovering over the tile you would like to move and pressing the arrow button to move back and
forth.
You can also delete and edit a tile by pressing the edit or trash can icon on the image.
The navigation icon is the icon used to open the slider menu. Use the preloaded icon or upload your own.
If you would like to have a border around each of the images, then select the border width.
If you do not want the border set the border width to 0 px.
Press ‘save’ to update your changes.