Articles in this section

See more

Designing your App's Look and Feel

Pavlos Kaimakis
  • Updated
Follow

Overview

You can create a dynamic design for your app's (iOS/Android/PWA) look and feel utilizing customizable display settings for your app's: 

  • homescreen (navigation buttons, desktop home button text, additional buttons, tabs, menu type, background color, branding images, and more)
  • navigation (app and button icons, button and menu text, background color, and more)
  • features' global styling (UI bar text, main text color, background color, font settings, and more)

Below you can find an overview of the design functionalities to create an app with your desired layout.

Information

The following video presents an overview of the Design menu:
 

You can access the Design menu from the BiznessApp CMS, by navigating to Create > Design. The Design menu has three tabs: 

There is no predefined sequence that needs to be followed while designing an app on this platform. The customers are free to try different things at any stage!

mceclip0.png

Note: While you begin the app building process with the Design Step, you can always add or adjust the design as you please after you have moved on to the subsequent steps.

 Back to top

Description

Homescreen

The following functionalities are available in the Homescreen section:

1 Slide Out Menu You can choose one of these options as the home screen Layout. You can find more information below under the 'Layout' Subsection.
2 Grid Menu
3 Scrolling Menu
4 Tab Bar Menu
5 Background Color You can select a background color. This is the color below your home screen background image. 
6 Branding You can add the customer's company logo using the BiznessApp's Branding feature.
7 Homescreen Background You can upload or choose a homescreen background image.
8 Carousel Images You can add up to 5 rotating Carousel Images.


mceclip1.png

 

Layout

The Layout(options 1-4) is the first thing you will be called to select when you navigate to the Homescreen Section.

You can select one of the following types of layout for the Homescreen:

  • Slide Out Menu
  • Grid Menu (Note: It is not supported for tablet versions)
  • Scrolling Menu
  • Tab Bar Menu

mceclip0.png
 

More Button

For the Grid and Tab Bar Menu, if you have more features than that can be displayed on the menu, a More button is added to extend the menu options. 

Grid Menu Tab Bar Menu
mceclip0.png mceclip1.png

 

This button is added as a feature. Hence, you can configure it under the Create > Build section. Here, you can change the text/language of the Feature Name and add a Feature Icon. 
 

mceclip2.png

Back to top

Once you are done with the Layout Configuration, you can scroll down on the Homescreen section to view and configure the following additional options:

  • Sliding View: You can change the Sliding View to List or Grid.
  • Menu Hint Text: You can use this option to display a text label next to the menu icon.
  • Additional Buttons: Call Us, Directions, and Share. (Note: Available only for the Slide Out and Tab Bar menus).
  • Shortcuts: Add Shortcuts to the features within the app. 
  • Desktop Home Button Text: You can customize the desktop home button that is used to navigate to the Home screen when viewing on a desktop

mceclip6.png

It should be mentioned that:
  • The Phone number for 'Call Us' and the Directions are pulled from what is configured in the Contact Feature.
  • These shortcuts are placed on the Home Screen, and only visible if the Slide Out Menu or Tab Bar Menu is used.
Slide Out Menu  Tab Bar Menu
mceclip2.png mceclip3.png

Note: In the case of an iOS app there are another two fields that appear: the 'Shortcuts' and the 'Desktop Home Button Text' fields.

  • iOS Status Bar: This option enables the iOS Status Bar for the home screen only.mceclip4.png

Back to top

Navigation

The following are the functionalities in the Navigation section:

1 Icon Color Choose the icon color.
2 Menu Text Color Select the text color for the menu.
3 Menu Background Color You can also choose the background color for the menu.
4 Homescreen Shortcut Color You can also choose the color for the homescreen shortcut.
5 More Options

Clicking on this option provides the user with the following options:

  • Enable or disable the button text and icons.
  • Add a custom icon background image.

Note: Once a custom icon background image has been selected in the global design to be used for all the features, there is no need for a feature icon as this would not even need to show up. Adding a feature icon will cause design issues for the icons of the features.

 

mceclip3.png

Note: If you notice that the navigation icons are not displayed, make sure that the icon and the text colors are not the same as the background color.

 Back to top

 Global Styling

The following are the functionalities in the Global Styling section:

1 Main App color You can choose the color of the main app.
2 UI Bar Text Color You can choose the text color for the UI bar.
3 Main Text Color You can also choose the main text color.
4 Background Color You can select a background color.
5 Font Select a font.
6 Font Weight Select the font's weight.
7 Global Screen Background

Add a global background image.

Scrolling down further will provide you with a header background image option. Adding an image will override the UI Bar Background Color

 

mceclip0.png

Note: All settings in the Global Styling section will apply to all the features throughout your app. If you wish to create a custom design for one of your features, use the Custom Design option in the Build section.

Back to top

Related Articles

Related articles

Comments

0 comments

Please sign in to leave a comment.