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.
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!
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.
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.|
|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.|
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
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|
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.
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
- 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|
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.
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.|
Clicking on this option provides the user with the following options:
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.
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.
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
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.
- Building your app's features
- Overriding The Global Design For A Specific App Feature
- Design Menu and Buttons and Shortcuts Are Not Visible
- PWA Design Looks Different On Desktop Than Previewer
- Homescreen Additional Buttons Are Not Showing
- Disabling the settings gear button color
- Changing the UI Navigation Bar Color
Please sign in to leave a comment.