Designing Your App's Look And Feel
You can create a dynamic design for your app's (iOS/Android/PWA) look and feel by utilizing customizable display settings for your app:
- home screen (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.
You can access the Design menu from the BuscaApp CMS, by navigating to Create > Design. The Design menu has three tabs:
- Global Styling
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:
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.
Tab Bar Menu
You can select a background color. This is the color below your home screen background image.
You can add the customer's company logo using the BuscaApp's Branding feature.
You can upload or choose a homescreen background image.
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 Home screen Section.
You can select one of the following types of layout for the Home screen:
- 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.
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
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 are 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:
Choose the icon color.
Menu Text Color
Select the text color for the menu.
Menu Background Color
You can also choose the background color for the menu.
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:
Main App color
You can choose the color of the main app.
UI Bar Text Color
You can choose the text color for the UI bar.
Main Text Color
You can also choose the main text color.
You can select a background color.
Select a font.
Select the font's weight.
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.
Overriding The Global Design For A Specific App Feature Via Custom Design
You want to create a specific design for an app feature different from the Global Design which is used across the app. This article shows how you can achieve this by enabling the Custom Design functionality to override the Global Design.
You need to create a separate design for a specific App Feature that will not conform with the Global Design already (created in the design phase of your app's lifecycle). This feature's design may call for something unique compared to the rest of the features' design (eg a unique background image or adjust the color scheme) and thus cannot be shared across all the app.
For such cases you can use the Custom Design, which appears within the Build option of the app dashboard under each feature. This way you can create the customized design of your preference for the features you wish.
1. Navigate to Create -> Build -> <Feature_you_wish_to_customize_the_design_for> ->Custom Design and click Enable (In the example below, we selected an Info-3-Tier).
2. Choose navigation Buttons.
Customize the button that appears next to your feature in the list view.
- Show Icon: Toggle on to display a feature icon.
- Icon Color: Select the feature icon color.
- Text Color: Select the Button Name text color.
3. Choose Screen Styling
Customize the in-feature header, background, and style.
- Choose Color Scheme: Choose from our modern color schemes. Use the Custom Color settings to customize colors on an individual basis.
- Header Background: Click the icon to select the Header Background Color, set the Image Overlay Opacity, and select or upload a header Background Image.
- Header Text and Color: Select the feature header text color.
- Header Text Shadow Color: Select the feature header text shadow color.
- Screen Background: Click the icon to select the feature background image and enable/disable the Blur Effect. You can select or upload a Screen Background Image here.
Note: On the Info-Tier feature the Screen Background image applies to the Comment tab and not to the Description tab.
- Font: Select the font for the in-feature content.
- List Color Theme: Select a color theme for the feature or customize each color setting individually below.
- Section Name: Select the Bar and Text colors for the Section Name.
- Odd Row: Select the Bar and Text colors for Odd Rows.
- Even Row: Select the Bar and Text colors for Even Rows.
- Button Text Color: Select the in-feature Button Text Color.
- Button Background Color: Select the in-feature Button Background Color.
4. Once settings have been adjusted as desired, click Save at the top to apply the custom design model.
Note: This can be reverted back to the Global Design at any point by clicking Use Global Design > Save.
Now the specific feature which you have enabled the Custom Design for will not inherit the Global Design settings and will appear exactly as per the Custom Design you created.