Branding Page Tutorial

The Branding Page lets you set up the core elements of your app's branding. Here we’ll go over the Branding Page and how to use it.

S
Written by Support
Updated over a week ago

What is the Branding Page?

The Branding Page lets you set up the core elements of the branding for your app such as the app logo, loading screens, and color scheme. In this article we’ll go over all of the sections of the Branding Page and how to use them.

On this page you can:

  • Upload the image that you want to use as your app’s icon

  • Specify your app’s icon display name (this name displays under the app’s icon on user’s phones)

  • Upload the images that you want to use as your app’s loading screens

  • Change the font used in your app

  • Change the color scheme of your app

How to access the Branding Page:

Simply go to Design >> Branding

What are the different sections of the Branding Page, and how do you use them?

Here we’ll go through the Branding Page tab section by section so that you know how to set up the groundwork of your app’s branding.

First we’ll go through the Loading Screens & Icons section:

App Icon & Display Name

In the App Icon & Display Name section you can upload the image that you want to use as your app’s icon as well as the app name that you want to display under that icon. Here’s how you can set up your app’s icon information:

Step 1: Click on the image upload button to upload the icon image

Click on the image upload box:

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

Note: We recommend that you use a 1024 px. x 1024 px. square as your icon image.

Once you’ve uploaded the icon image type in the icon name that you want to display under the app’s icon on user’s phone screens in the “Display Name” section.

Note: The display name has a character limit of 40 characters.

App Loading Screens

The App Loading Screens section allows you to upload images for the loading screens that will display while your app is loading on user’s screens. Here’s how to set them up:

Step 1: Click on the image upload button to upload the icon image

Just like the App Icon, you should click on the  image upload boxes for each loading screen:

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

Because of the wide array of phone and tablet devices out on the market, you’ll need to upload loading screens in four different sizes:

  • 640 px. x 960 px.

  • 1242 px. x 2208 px.

  • 1536 px. x 2048 px. 

  • 1600 px. X 2560 px.

If you don’t upload images with these exact dimensions, your loading screens will look wrong on user’s phones.

Note: If you make changes to the App Icon, Icon Name, or Loading Screens after your app has been published and is live, you’ll need to contact us at support@appdocumentation.com letting us know what you changed so that our publishing team can resubmit your app for you.

Font

The Font section allows you to select the font that’s used throughout your app. We have a number of fonts that you can choose from. Here’s how you change your app’s font:

Step 1: Click on the arrow next to the font name to open up the drop-down menu

If you would like to change the font that’s used in your app, simply click on the arrow next to the current font’s name to open up the drop-down menu.

Step 2: Select the font that you want to use

Next all you need to do is select the font that you want to use in your app from the list of fonts.

Note: Keep in mind that because Android and iOS devices run different operating systems, some fonts may look better on one device than the other. This is due to the way that the operating systems process those fonts.

Colors

The Colors section allows you to change the color of different elements in your app. Here’s how you change the color of an element in your app:

Step 1: Click on the colored box of the element that you want to change

To change the color of an element in your app simply click on the colored box next to that element’s name.

Clicking on that box will open up a color picker where you can either manually select the color you want to use, or if you have a hex code for your company’s branded color you can enter that in as well.

This will update the color of an element in real-time and your changes will automatically be saved.

Preset Themes

The Preset Themes section is where you can find a number of preset color schemes that you can use if you don’t want to change individual colors of elements in your app. Here’s how to select a Preset Theme for your app:

If you would like to switch over to a pre-set theme, simply click on the theme that you want to use. It’s that simple! You’ll see all of the elements change to that theme’s colors.

Note: If your app is already live and you enable this, users will need to check for new content one more time by either closing the app entirely, waiting 15-20 seconds, then reopening it which will tell the app to automatically check for new content, or manually check for new content by opening the side menu and tapping on “App Settings” then “Check For New Content”. From then on users should see the “New Content Available” message whenever they open the app and there’s new content to download.

If your app isn’t published yet and you enable this, it should be included in the initial submission of your app when you send it off to our publishing team to be submitted.

Related Articles

In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:

Still have questions? No problem! Reach out to us and we’d be happy to help :)

Did this answer your question?