My Power Apps UI Design Process

Happy New Year! I can’t believe it’s 2022 already. I took some time to relax and recharge over the holiday season and I hope you all were able to as well.

Have you all heard of this word puzzle game called Wordle? It’s a simple and fun daily word game that I got a little obsessed with during my down time.

As I was playing this game, it occurred to me that it would be fairly simple to re-create this in Power Apps. So, me being the Power Platform geek that I am, sought out to re-create this game in Power Apps.

As I was building this app, I realized that there are a ton of educational concepts that you can take away from the app. I decided to make a series of videos and blogs about some of these concepts. For the first blog, I thought I’d start out by covering the concept of building the user experience in Power Apps and the design side of things.

Choosing an app building approach

Why start out with covering design first, you ask? Great question. It has to do with my app building methodology. When you’re getting started building any app there are two main approaches you can take.

One approach is what I call “data first”. This is where you focus on the data and logic layer of the application first. In the case of the Wordle app, this would mean that I would choose to figure out how to get the list of words and how to handle the word validation and logic in my app first, while saving the look and feel and user experience for last.

The other approach is “design first” and this is the approach that I tend to favor when I’m building Power Apps. With this approach, you focus on getting all of the design elements squared away first. You’ll do things like gather brand standard information (logos, topography, color codes, etc) to use in your app. And you’ll consider how the app needs to flow (what controls should be there, how should they look, how many clicks, etc).

My favoritism towards the design first approach stems from my background in consulting. Customers are visual first and they want to see progress fast. You can easily “fake” some of the logic pieces up front while providing the client with a good idea of how the app will look. There really isn’t a right or wrong approach here and it will vary by circumstance. You choose the approach that’s best for you and your cicrumstance.

Find an inspiration for your design

Newsflash: As much as I hate to admit it, I don’t have an artistic bone in my body. I really struggle with design, and I mean like really struggle. Trying to create a nice-looking slide deck? Forget about it. That’s what this next step in my design process is so important.

The next thing I’ll do is I try to find some existing app that is close to what I’m trying to build to use as inspiration for my design. The ideal situation would be that I have a graphic designer or a more artistically inclined business stakeholder who can provide a design file of how they want the app to look. But unfortunately, that isn’t always possible. So, when that’s not an option I either look through the power users forums or I use this site called Dribbble which has a ton of app designs: Dribbble – Discover the World’s Top Designers & Creative Professionals

In the case of my journey to mimic the Wordle app I had a big advantage. I had a live site which I could borrow styling from to use in my Power App!

Browser Developer Tools Are Your Friend

And this is where I use my good friend right click and inspect in my web browser. Also known as “developer tools”.

As you can see, I can simply click on an element on the page that I want to know the styling for, click “inspect” and I can see all of the styles used for that element. From there, it’s just a matter of opening up my app and filling in those styling properties in the right spots.

Don’t Accept the Defaults

Once I have all of the styles that I’ll need for my design the next step is to start adding controls in Power Apps and quickly changing all of the default styling. When I was thinking about this step, I couldn’t help but be reminded of something Abel Wang used to say, “Don’t Accept the Defaults”. This certainly applies to building out a good-looking UI in Power Apps. If you remember one tip for design in Power Apps then I hope it’s this one. The biggest thing you can do to make your Power Apps look instantly better is to change all of that default styling that’s included.

This applies not only to our text input borders, label colors, etc, but also to our images and fonts. There are some good built-in icons in Power Apps. But there are thousands of more SVG icons available out there for us to use which could give our apps a more polished look. Same concept with our fonts. Power Apps only has a handful of standard fonts included in the font dropdown. But we aren’t limited to that. We can incorporate any font by simply going to the font property and typing in the name of the font in quotes.

If you want to see a walkthrough of all of these concepts, be sure to check out my corresponding video:

If you’d like to purchase a “Don’t Accept the Defaults” t-shirt in memory of Abel Wang with proceeds benefiting Girls Who Code, check out this site: Don’t Accept the Defaults – Abel Wang | Bonfire