app design and layout

39
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.

Upload: my-app-editor

Post on 13-Apr-2017

394 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: App Design and Layout

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.

Page 2: App Design and Layout

Go to the ‘Design’ tab on the navigation panel to start customising out your content.

Page 3: App Design and Layout

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.

Page 4: App Design and Layout

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’

Page 5: App Design and Layout

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.

Page 6: App Design and Layout

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

Page 7: App Design and Layout

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.

Page 8: App Design and Layout

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.

Page 9: App Design and Layout

Press ‘save’ on the top right so that you don’t lose any changes.

Page 10: App Design and Layout

To edit the layout of your app, go to the ‘Layout tab’ on the navigation panel.

Page 11: App Design and Layout

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.

Page 12: App Design and Layout

If you choose the ‘Slider’, there will be no further changes for you to make.

Page 13: App Design and Layout

Grid View

Page 14: App Design and Layout

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.

Page 15: App Design and Layout

Press ‘Add Splash Image’.

Page 16: App Design and Layout

‘Drag and drop’ an image to upload or choose to browse to upload an image.

Page 17: App Design and Layout

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.

Page 18: App Design and Layout

Press ‘update’ to save changes.

Page 19: App Design and Layout

To add your own custom icon for your bottom tabs, press ‘Add Tab Icon’.

Page 20: App Design and Layout

Either drag and drop an image in to the blue space or press ‘browse’ to upload one from your computer.

Page 21: App Design and Layout

Choose whether you would like to link the tab to a particular feature, or content on your app or even an

external website.

Page 22: App Design and Layout

Choose a background colour for your app by pressing the drop down menu which will display a colour palette.

Page 23: App Design and Layout

If you would like more than one row of tab icons then select either 2 or 3 rows.

Page 24: App Design and Layout

The navigation icon is the icon used to open the slider menu. Use the preloaded icon or upload your own.

Page 25: App Design and Layout

If you would like the tab icons to have a background image upload your own custom ‘Grid Background

Image’. 

Page 26: App Design and Layout

Press ‘save’ to update your changes.

Page 27: App Design and Layout

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.

Page 28: App Design and Layout

Start uploading your image by clicking ‘Add Tile’.

Page 29: App Design and Layout

Label the image that you are uploading

Page 30: App Design and Layout

Select which size you would like to upload your tile as, by selecting the diagram of the layout you want to pick.

Page 31: App Design and Layout

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.

Page 32: App Design and Layout

Select your image by dragging and dropping it on to the platform or browsing for one on your computer.

Page 33: App Design and Layout

Choose whether you would like to link the tile to a particular feature or content on your app, or even an external website.

Page 34: App Design and Layout

You will notice that the images you upload will puzzle together depending on the layout you have chosen for that image.

Page 35: App Design and Layout

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.

Page 36: App Design and Layout

You can also delete and edit a tile by pressing the edit or trash can icon on the image.

Page 37: App Design and Layout

The navigation icon is the icon used to open the slider menu. Use the preloaded icon or upload your own.

Page 38: App Design and Layout

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.

Page 39: App Design and Layout

Press ‘save’ to update your changes.