How to apply your branding to your One Model instance - Branding User Guide

A strong brand story can help you convey to your customers the value that you provide when they interact with your brand across various touchpoints. In a similar way, users such as employees also expect to be offered the same experience at every touchpoint when they interact with your brand internally within your organisation. Therefore it is essential that the brand experience and identity is consistent regardless of application/ system being used to ensure it aligns with your business objectives.

 

One Model offers you the ability to configure your branding elements within the application where the UI/UX can seamlessly integrate within your broader system landscape and is coherent to your corporate style. Within the application you can configure colours, text buttons and logo to be consistent with your brand allowing for great user experience and enhance your storytelling capabilities.

 

Additionally, when the branding setting is used in conjunction with the embedding capability (link), your UI will be tightly integrated and uniformed throughout. This guide provides an detail step by step instructions on how to enable branding settings in the new UI/ UX as well as in detail explain each of the branding settings functionalities so that you can understand how to configure your own branding style within the application.

 

Branding Settings Configurable Items

  • Main Colours (Defines the main colours of the system, which will impact and automatically refresh the default colour value for all UI components on the page.)

  • Logo (Manage site logos appearing on site login page, navigation bar area)

  • Navigation Bar (Customize navigation bar visual style, includes main background colour, hover indicator and selected menu colour.)

  • Page Header (Customize page header visual style, includes page header background colour, texts and icons’ colour in header area.)

  • Standard Button (Define the standard button visual style, which be used across the whole site.)

  • Highlight Button (Define the visual style for special button – highlight button, which appears to get users focus and hint the important control.)

  • Hidden Impacts (All items impacted by your branding settings but not appear directly on the branding settings page.)

Enabling ‘Branding Settings'

 

1) Users that can configure changes to company settings (Application Access permission CanConfigureCompany) are able to change branding settings.

 

2) Understand your company branding rules and prepare logo files (we suggest using png files which has transparent background), get all colour values you will use in the system (we use Hex colour code in all branding settings. eg. White = #FFFFFF).

 

Using ‘ Branding Settings'

1) Open ‘Branding Settings’ Page

 

2) Colour Picking Tool

 

There are 2 ways to define the colour for a UI item.

  1. Input Hex colour code.

  2. Click colour picker to select the value from pop-up colour picking tool.

3) Reset

 

Use ‘Reset’ button to clean your inputs and revert back to One Model default visual style.

4) Save your changes before leaving the page.

 

Please save your changes by clicking ‘Save’ icon before leaving the page to make all changes take effect.

 

Main Colours

In the Main Colours section, the user can control the default colours of the product. By default, the settings below have been used. To change the colours the user can enter in the HEX colour code, or you can use the eye colour dropper by selecting the colour square tile which will open up the colour palette where you can choose desired colour.

 

Branding Colour: This setting defines the main colour of the One Model application, it will impact the application navigation bar, default home page background, storyboard pages, page header tabs and deco bar/ lines. sets the main colour for the homepage, storyboard pages and page header tabs.

Main Contents Colour (Text/ Icon): This setting changes the colour for the main text’s and icons which can be used as a label on the button, contents in a table, options in the menu such as the name of Storyboards in the Storyboard library and buttons such as filter, filter dimension and refresh in the storyboards tab.

Main Contents Background (Menu Background & Table Background): This setting changes the background colour of most of the UI components such as buttons, dropdown, Input box, popup window and tables such as storyboard library and drop-down sub-tabs in the menu bar.

Text Link Colour: This setting changes the colour of text that are hyperlinked.

Page Background: This function changes the pages background colour such as storyboard’s in storyboard library, storyboard library home page, and some admin pages.

Adding more Colours :You can add more colours by clicking on the add more button and also have a name for it .

Reset Button : Clicking the reset button allows you to revert back to the default main colour settings .

 

 

1) Power of the Main Colours

 

We provide simple and flexible user controls to help you organize the site visual system. Colour value in ‘Main Colours’ impacts all the following settings on the page. Once you finish the settings in ‘Main Colours’ section, the other sections will refresh their default colour value accordingly.

 

2) Branding Colour

 

Branding Colour is key for the whole UI system. Changing your branding colour in ‘Main Colours’ will automatically set up the visual style for navigation bar, highlight button and other UI elements.

3) Main Contents Colour

 

This setting changes the colour for the main text and icons which can be used as a label on the button, contents in a table, options in the menu such as the name of Storyboards in the Storyboard library and buttons such as filter, filter dimension and refresh in the storyboards tab.

 

4) Main Contents Background

 

This setting changes the background colour of most of the UI components such as buttons, dropdown, Input box, popup window and tables such as storyboard library and drop-down sub-tabs in the menu bar.

 

5) Text Link Colour

 

This setting changes the colour of text that are hyperlinked.

 

6) Page Background

 

This function changes the pages background colour such as storyboard in storyboard library, storyboard library home page, and admin pages.

 

7) Add Custom Colours in ‘Main Colour’

 

In most cases, a company may have multiple colours in their branding system. If you have set your company primary colour as the ‘Branding Colour’, and also need a place to add your secondary colour, please use ‘Add More’ to store the new colour.

 

8) Use Added New Colours in Following Settings

 

After finishing the ‘Main Colours’ settings, you can find your new added colours in following settings. Open any dropdown menu under ‘Navigation Bar’ ‘Page Header’ ‘Standard Button’ or ‘Highlight Button’, you will see the new colours have been added as extra options.

Logo

Use this section to manage your company logo:

 

Navigation Bar

In this section you can adjust the visual style for the navigation bar on top of the page. All colour options in dropdown menu under this section are defined in the ‘Main Colours’ section.

 

1) Settings for Unselected Standard Status

 

Navigation Bar Background Colour: This setting defines the main background colour for whole navigation bar (Unselected Menu).

Navigation Bar Text/ Icon Colour: This setting changes the colour of the text and icons on the navigation bar (Unselected Menu).

2) Settings for Selected Status

 

Navigation Bar Selected Item- Background: This setting changes the colour background of the selected menu on the navigation bar.

Navigation Bar Selected Item- Text/ Icon Colour: This setting changes the colour of the text and icon of the selected menu on the navigation bar.

 

 

3) Settings for Navigation Bar Menu Hover Status

 

Navigation Bar Hover Indicator: This setting changes the colour of the deco bar on top of the menu when user hovers over the menu.

 

 

4) Settings for Navigation Bar Proxy User Indicator

 

Navigation Bar Proxy as User Indicator: This setting will indicate to user in front of account menu that they are not logged in their account but in a proxy user account.

 

Page Header

Page Header is the cross screen header bar under navigation bar on top of the page. In this section you can adjust the visual style for page header, includes header bar background and text / icon colours on the bar.

 

Settings for Page Header

 

Page Header Background: This setting changes the background colour of the header bar.

Page Header Text/ Icon Colour: This setting changes the colour of the text and icons on the page header.

 

Standard Button

This section controls the colours for the standard button. You can redefine the visual style for different button status: Normal / Hover / Press / Focus. Commonly, if you haven’t changed the general contents of the main colours section i.e. ‘Main Contents Colour (Text / Icon…)’ or ‘Main Contents Background (Menu Background / Table Background…)’, it is ok to leave the standard button settings as default settings.

 

1) Settings for Button – Normal Status

 

Normal Button - Background: This setting defines the background colour of standard button – normal status

Normal Button - Text: This setting defines the text and icon colour of standard button – normal status

Normal Button - Border: This setting defines the border colour of standard button – normal status

 

2) Settings for Button – Hover Status

 

Hover Button – Shadow: This setting defines the shadow colour of standard button – hover status

Hover Button – Background: This setting defines the background colour of standard button – hover status

Hover Button - Text: This setting defines the text and icon colour of standard button – hover status

Hover Button - Border: This setting defines the border colour of standard button – hover status

 

3) Settings for Button – Press Status

 

Press Button – Shadow: This setting defines the shadow colour of standard button – press status

Press Button – Background: This setting defines the background colour of standard button – press status

Press Button - Text: This setting defines the text and icon colour of standard button – press status

Press Button - Border: This setting defines the border colour of standard button – press status

 

4) Settings for Button – Focus Status

 

Focus Button – Border: This setting defines the border colour of standard button – focus status.

Highlight Button

 

The Highlight button is also known as a ‘stand out’ button which indicates to the user that the button has an important behaviour of feature of the application. By default, the ‘Highlight Button’ will apply ‘Branding Colour’ as the button background colour, and ‘Main Contents Colour’ as the button text colour. In some cases, you may have a dark branding colour, which will impact your ‘Highlight Button’ background colour. Please double check your ‘Highlight Button – Text’ colour, make sure to choose a light text colour and make the text readable.

 

1) Settings for Highlight Button – Normal Status

 

Normal Highlight Button - Background: This setting defines the background colour of highlight button – normal status

Normal Highlight Button - Text: This setting defines the text and icon colour of highlight button – normal status

Normal Highlight Button - Border: This setting defines the border colour of highlight button – normal status

 

2) Settings for Highlight Button – Hover Status

 

Hover Highlight Button – Shadow: This setting defines the shadow colour of highlight button – hover status

Hover Highlight Button – Background: This setting defines the background colour of highlight button – hover status

Hover Highlight Button - Text: This setting defines the text and icon colour of highlight button – hover status

Hover Highlight Button - Border: This setting defines the border colour of highlight button – hover status

 

3) Settings for Highlight Button – Press Status

 

Press Highlight Button – Shadow: This setting defines the shadow colour of highlight button – press status

Press Highlight Button – Background: This setting defines the background colour of highlight button – press status

Press Highlight Button - Text: This setting defines the text and icon colour of highlight button – press status

Press Highlight Button - Border: This setting defines the border colour of highlight button – press status

4) Settings for Highlight Button – Focus Status

 

Focus Highlight Button – Border: This setting defines the border colour of highlight button – focus status

Hidden Impacts

Changing the ‘Branding Colour’ option will automatically overwrite the visual style for many of the UI elements in the system. Here are some hidden impacts you will see.

 

 

In conclusion, by applying the above instructions, you should now be able to configure your branding settings within the application.

Was this article helpful?

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.