This is a sequel to my previous blog post: 5 easy ways to improve your canvas app design.
Whether you build apps in a small company or a big company, one thing is for sure: the company has a brand.
In this blog post I will go through five easy ways to apply company branding to your Power Apps canvas apps:
- Add logo
- Use company colors
- Select fonts
- Design graphic elements
- Create a template
1. Add Logo
I’m starting with the obvious here; adding a logo is the easiest way to apply company brand to the app. Just make sure that the image file is high quality and preferably with a transparent background.
If your company has a brand guide, make sure to follow the logo guidelines. Usually it’s not permitted to alter the logo in any way, for example by cropping it, rotating it or changing its colors.
2. Use company colors
The color theme of your app plays the most important role when it comes to applying the company brand.
Usually there are one or two primary colors, plus some accent or secondary colors. The company brand guide should tell you which colors to use and how to use them correctly.
If there is no brand guide, take a look of the company website as a whole. What is the most prominent color and what colors are used as an accent? This should give you a rough guideline of how to use the company colors in your app.
But how do you get the correct color values if there is no brand guide with hex codes? Are you supposed to just eyeball it?
You can install a color picker extension for your internet browser and get the colors directly from the company website. For example, ColorZilla is available for Chrome, Firefox and Edge (from Chrome extension store).
Use ColorZilla or any color picker tool you like to pick the color you need from the company website. Make sure that the displayed sample color is the one you’re actually looking for.
Usually the color value is picked up as a hex code, for example #BE0027. Hex codes can also be used in canvas apps, as long as you drop the # symbol from the beginning. Go to the custom color tab to paste the code to the Hex field. Later you can grab the RGBA value from the formula field.
I like to create a company color palette with either rectangles or buttons and use labels to display the RGBA values next to them.
3. Select fonts
Most likely the company brand font is not available on Power Apps. In theory you can use any font in your app, but the custom fonts only work if the user has the font installed on the device.
The fonts provided by Power Apps are safe to use, though they too look a bit different on different devices and internet browsers.
I like to take a screenshot from the website and add that to my app as a font reference.
For example, in the picture below, the upper text section is a screenshot from our website. And then I have tried to match the look with the font and font weights available in Power Apps.
However, I feel that with fonts you should always aim for clarity and readability. So start with the closest match but adjust the font if necessary.
4. Design graphic elements
You most likely need some buttons and icons for your app, and for these the company website is usually the best source. Take a look of the graphic elements in the company website and try to replicate them in your app. Don’t forget to match hover and pressed effects as well.
You can upload your own icons and other graphic elements to the app, but remember that they don’t have the same properties as the built-in controls. If you use custom elements that are meant to be clicked, add a transparent button on top of them to indicate this to the users. By default custom elements don’t appear clickable and it can be confusing to the users.
You can usually get pretty far with the built-in controls, especially if you combine buttons and icons. You can find different ideas of how to combine them to create your own graphic elements below. You can do a lot just by modifying the radius and padding values.
5. Create a template
Would it be awesome if you could make your own company theme in Power Apps and use the theme easily across all your apps? Unfortunately, Power Apps still does not support this. You can build your own component library and reuse them across all of your apps, but that is not quite the same.
So what to do instead?
Create a template app with controls you can easily copy-paste to new apps (you can copy and paste controls from one app to another app). And of course, you can also copy the whole app using the “save as” feature.
For this copy-paste purpose I always build my company brand screen first. I design all the graphic elements I need and collect them under one screen, where I can easily grab them. This saves a lot of time as customizing controls afterwards is tedious work.
Putting it all together
It’s easy to put together apps with company branding if you’ve taken the time to design the elements first. In the example below, I have used the default SharePoint-list based app again. The user interface is the same in both of the apps so you can see the difference these visual changes make in the look and feel.
Here is a more detailed list of the changes I’ve made:
- I added a footer with our logo
- Used white and black as primary color and red as an accent color
- Created icons and graphics that match the ones used in our website
- Selected a font that is a close match to our official brand font
- Followed all the tips from my previous blog post of how to improve canvas app designs
If you want to see how our internal apps actually look like, here are some examples:
And hey, if you need help creating a company theme for your canvas apps, we’re here!