5 easy ways to improve your canvas app design

If you are new to Power Apps canvas apps, the chances are that your apps look like the example below. And nothing wrong with that, it’s a perfectly functional little app! It’s just not very exciting or sexy when it comes to design.

But you can easily improve the design without changing the user interface at all. In Power Apps canvas apps the beauty is often in the finishing details, and by details I mostly mean these:

1. Fonts & font size
2. Border thickness
3. Field hover effects
4. Radius
5. Button effects

In this blog post I will go through all of the above and give you easy tips on how to make them look more polished. And in the end you will see an example of how it looks when you put them all together ❤

1. Fonts

I love typography, but sadly Power Apps only has a small set of fonts available. The default font is Open Sans and it is actually a nice font and suitable for most apps. However, you should experiment with the available fonts and choose one that works for your app.

My preferred fonts in Power Apps are Lato and Lato Light, and often I like to use them both within the same app. I like how fresh and crisp they look compared to other available fonts. So when in doubt, and when you have no brand guide to follow, give them a try.

You probably have an idea whether your app is used on mobile devices or not. If your app is used mostly on mobile devices, the default font size is usually good and you don’t have to adjust it. However, if the app is primarily used via browser, you almost always need to decrease the default font size. Test your app both on smaller laptop screens and big external screens to find the right size. The key here is to remember that if you decrease the font size, you need to adjust your field heights accordingly. Otherwise it will just look a bit silly.

2. Border thickness

By default most controls come with very, very thick borders. They look almost decent on mobile devices but in everywhere else they look too chunky. It takes a lot of time to fix all the borders, but it’s always worth it.

For example, manually adjusting the border thickness for all the fields in your form will instantly make it look more polished. Such an easy trick ❤

3. Field effects

By default all text input fields have a fill color as a hover effect and it is definitely not pretty. I usually get rid of the hover fill color entirely or at least replace it with a more subtle fill color. This makes a big difference, just like the field border thickness, so it’s worth to the time.

If I choose to go completely without hover fill color, I usually adjust the hover border color slightly to highlight the hovered field. I don’t recommend using green or red for borders because they can be associated with validated fields (for example red border might be used to indicate that the email address in the field does not match the criteria for an email address).

4. Radius

Some controls, such as buttons and text input fields, have rounder corners. To my eyes zero radius looks the prettiest, but the beauty is in the eye of the beholder and I don’t judge your radius preferences. But whatever you choose, stick with it and make it a thing. For example, don’t mix and match rounded and square buttons.

If your control is a square, you can turn it to a full circle with radius. It’s a handy trick if you want to, for example, create rounded profile pictures like in the example below.

I’m not a huge fan of rounded corners when it comes to text input fields though… But there is at least one scenario where it works nicely; in search bars!

5. Button effects

When you customize your buttons, by example changing the fill color, don’t forget that buttons have hover and pressed effects. You want to adjust them accordingly so they all match the color scheme you’ve chosen for your app. It’s too easy to just customize the font color and fill color and forget the rest.

If you only adjust the fill color, everything else probably ends up looking a bit out of place. Like that blue hover fill color with the green border below.

So when you customize your buttons, remember to customize everything.

Putting it all together

Just as a reminder, here is how the automatically generated SharePoint list based canvas app looks with all the default values:

In the app below the user interface is exactly the same, but I’ve used the simple tips from this blog post to make it look more polished. It is really all about finishing details that elevate the look & feel of your app.

Here is a more detailed list of the improvements I made:

• I used Lato and Lato Light instead of the default font
• I decreased border thickness for all input fields in the form
• I got rid of the hover fill color for text input fields (not visible in the picture though)
• I gave choice selection tags a a more subtle fill color (light grey)
• I adjusted the field height slightly
• I changed the theme color to Forward Forever red ?

And remember, if you need help with your apps, we’re here too.