Improving. The look and feel of your canvas apps can often be as simple as just applying
some basic styling to your input controls and some very subtle
but simple uses of container controls. Today I'm going to show you how to take your power app
from looking like, Well, a power app, and instead turning it into a modern
mobile design. That is what people expect
when they're using a mobile app. You can apply these concepts to your own
apps and really make things look nice. It's going to be a short video,
a simple video, but some tips and tricks that you can use to really level up
your design. You can download
the solution file for this from my GitHub. The link is in the description
and of course, subscribe. Hit the notification bell
if you want to keep learning UI UX tips to make your canvas apps pop. I'm Ryan Johnston. And now let's get creating. Okay. So as usual,
let's begin with the end in mind. We're going to create this little
very simple input concept where we have a hover color
with this light blue border, some light gray background,
some shadowing underneath the buttons, and this nice rounded frame
that it all is in. What we're going to start with
is your typical power input control, where we've got,
you know, very boxy, very square design and look
and we're going to turn that into this. So I'm going to right now
just duplicate this basic one that we're going to start
with as kind of our foundation. And again,
you can download the files off my GitHub or if you just wanting to recreate this
on your own, I mean, this is just very basic, a rectangle with a label
on top of it, a cancel button. I don't even have a button attached to it.
It's just the icon. And then one label a text input, another
label, a text input and two buttons. That's all we need to start with. Now what we want to do is style this
a little bit better, and a lot of times that means creating
a container that this can all live in. And so let's start
by creating a container. We're just going to do a regular old
container here and we are going to make it the width of our screen
minus say, 50 parent dot width, -50. And same thing with the height, parent's height, -50. And then let's center it. And this,
of course, is our centering formula, which you just got to be able to like type
in your sleep when you're doing canvas
app design, parent dot with minus software divided by two,
and that is your centering. And then the same thing for height, we just changed that to height,
did a copy and paste there. Okay.
So now we've got this container centered. Let us fill this with a nice white color
and then we're going to fill the background of this thing
with like a pile. It's just like a light gray. Let's get rid of this blue rectangle
and we're going to move our container. We'll call this container background, and let's put it all the way down
at the bottom and let's give it some rounded
corners will go a radius of 20. And already it's looking better. And let's actually go with
a semi bold shadow on that. Now, remember when if you are UX design
the things that you want to pop off the page need to have a lighter color
than the things behind it. So we're going to make this entire thing
pop off the page by making it white versus the background,
which is gray. And then by adding shadowing, it's
going to pop off even more. The more shadow that you do,
the more it's going to come off the page. And so you want to choose the controls
that you want your user to really focus on. That's the stuff that you want to pop. And so we've got this input area. We're going to create this container. We're already looking better now. Then we can no longer see our header. It's hiding around up here. Let's change that to a
let's not go black, but let's go like a dark kind of a slate. Gray and let's give this thing
a little bit of breathing room. I kind of like that. So let's line
everything up on this update. We're not going responsive with this. I'm not going to take the time
to calculate all this stuff. We'll just drag and drop
and make things work nicely. So we'll select both of these as well. We're going to make all of these
this kind of slate gray color, and let's drag this out and just drag it
straight over it. well, it's not quite perfect. There keeps when I move up on me
and then let's change all of our fonts. I do not like open Sans later lato. Whatever it is
is what I like to work with. So we're selecting everything. I want to make that lato
and that's looking much better. All ready. Okay, let's make our input controls. Also shorter here. Smaller. So we've got a little more margin,
a little more breathing room. All right. Let's let's talk about what
we're going to do here, what we want. You know, when we put our mouse
over these input controls, they give us that kind of typical blue
look that we get in power apps and we're going to change up
these blues a little bit. And I like to change the rounded corners. Let's go ahead and grab these. We can control our IS border radius. We did 20 on that outside box. Let's see if 20 is too much. Maybe a little. Let's let's do 15 and see what we think about that 15. Well, now 150 15. Okay. I like that. Great. Now,
before we go deal with our input controls, I forgot all about our cancel icon,
which is hiding up here. So rather than having this gaudy giant X, let's give it a nice round cancel icon. So we're going to change this to a
a dark gray. What are we doing here? Maybe like the slate light. Slate. Let's try this now let's not let this X
just hang out here all by itself. Let us add a another container and we are going to make it
sporting radius zero. And you know what? We'll keep a tiny little shadow on it. Let's make it 60 by 60. Actually, it's like 50 by 50. And we're going to put our X inside this container and we want a little circle inside of it. Well, we've created a rectangle container,
And now let's fill it with just kind of a light gray and go lighter. Light gray. Now, I want this to be a circle,
not a rectangle. So how do we do this? Well, the lovely thing with these containers
are to make a circle out of it. We simply make a rounded rectangle
with the border radius being basically 50% of its width
and height, which means that that corner is going to go all the way around
to half the length and height of the box. And then you have four border. Ray. Right, Right. Type radii that go half the length. It's going to turn itself into a circle.
So we're a height of 50. If we do a border radius of 25,
then we now have a circle. All right,
let's make our X our icon smaller. Let's go say 30 by 30 and let's center it and go with our
you know, do I saw that patient? No. Apparent dot width, minus soft width, divided by two. Let's copy that. Paste that into the
Y will change the width, the height. Copy. Paste and boom,
we've got a nice pretty little button. And so now let's move
this thing over to our right edge. Okay, That's a much better
looking X than this monstrosity. All right, So we've got
and then, of course, you get out, of course, a button element to that
or just stick with the icon and use. It's on select however you want to,
but you get the idea for the styling. Okay,
let's go back to our input text controls. So I'd like to make this a little more subtle of a of a border. So rather than this really, like, dark
blue, let's go with like a, you know,
something more along these lines. I'm going to copy this hex code,
and I kind of like that. Okay. I like that for, like, the selected color. So, in fact, let's do that. We're going to go in here
and we're going to say focused border color is color value, and we will do this hex code. And remember, we copied and pasted this
from our color picker. And so this is gonna be our focus
color border, which we're also going
to make the same as our hover. So let's do hover border
color will make we'll just do self dot focused border color. Okay so now that when we hover over that,
that border color shows up. And then for our actual border color,
let's do another one of these nice gray colors. Just a light gray. Ooh, I like that. Okay. And then we're going to let's make the hover fill color
a light gray as well. And so we're going to go hover, fill. And you know what? What if we do it the same as the border self? That border color, that's. Yeah, that's too dark. So let's do color fade self to border color and let's go 20% lighter. Now. Let's go 50% lighter now. So just really subtle. Okay. I like that. That's nice.
And so let's let's go here on that. We're not bothered by other things
and we click on that and that's good. Now notice
how that border got super thick. So that's our focus. Border thickness, I think that's
a little too, you know, in your face. So let's go change our focused border
thickness to from 4 to 3. So it makes it a little bit thicker,
but not too much. That's good. I like that. Okay, now then, let's give
this make this thing pop off the screen. You could, you know,
if you really wanted things to pop, you could make this part like gray
and then keep the input. TextBox White. That would make it pop. But we've already got this gray background behind our container
for this update record card. And so I think what we're going to do
is rather than changing any color, let's make this thing
have a little bit of a shadow to it and let's go in here and make some of our
let's do this container cancel styled and I've already named
it that container canceled. That will work. Container or this no container icon ISO canceled. And then we've got our header
which is label header on this add style too,
because our my demo is just regular style label first name styled to text, first name style file too. And I'm going to actually do a copy
and paste on this a little bit. So we're not going to give up
the last name. Okay. We're going to add some shadowing. Now, unlike a container control,
a text input control
does not have any kind of a drop shadow. So what we have to do
is actually got to fake a little bit here. We're going to create another container. We're going to create a container that will have our shadow and then we'll
put the text input inside of it. So let's look at our let's
go ahead and bring this down. Container six is going to come down
to our text first name. So we'll call this container
first name styled. I recommended that that's my demo text or we're going to call this,
we'll just call it container First name. Forget the style. First name. Okay. There we go. Now let's just give it the same properties
as our text field. So our text field has an X of 59
and a Y of 211. So we're going to say X is 59 and 211 and then our text field has a width of 524
and a height of 70. So we're going to go 524 and up and 17. Okay. And then we going to take our text
control and we're to paste it inside. so you can see we've got this kind
of squared off border thing going on here. So what we need to do is we need to change the border
radius of the container to the same border radius of our button,
which was I believe it portrays a 15. So there we go. Our border radius is all set and our we're going to set our border at zero
because we're going to use the border from the button. And then for our drop shadow,
let's go with regular and look at that. So now it looks like our text input
control has a dropped shadow,
but it's really from the container. Now, you could create this text input
and have it all squared off with no border whatsoever and
do all of your styling in your container. That actually might be
the cleaner way to do it and then just fill it with your text input
and give it a border of zero and it'll just fill
that container accordingly. So let's do this,
let's copy this container and then we're in to move up
so we don't paste it into itself and let's move it down and our text input on last
name has an X of a Y value of 375. So when I change this copy
to a Y value of free 75 and what was our x value here? An x value of 59 an x value is nine K
and then delete the original text. Last name
we're going to change this to con last name and I misspelled that. Who cares for right now? And then we want to change this text. Last name. last name. I'll call this last name style too. Whatever you want to call it. Just name it
something that makes sense. Okay. look at that. What have I done? I must have clicked in somewhere
or doing something at some time. Border zero. There we go. So does that look nice? We've got a nice record here,
lovely looking, and we click on to it. Okay, now let's mess with our cancel
and submit. Let's do some styling here. I personally don't like having a border
to my buttons in this sort of a context. And so let us give this a border of zero and same thing. Now cancel.
We're going to do a little differently. Let's keep its border. Let's actually fill it with white and do text color
of kind of a medium gray and give it a just this. Yeah, this light gray
border is already looking pretty good. Let's take this back down to 100%. And I like that. Just kind of a simple border,
if not the thing that pops. What you want to pop is a submit button. Now, then the submit button pops. Let's grip, make the submit button. The fill color is going to be
let's actually make it the same as what our border, our our hover border
color was on our text inputs. And so we're going to do focused border
color is a text first name styled to job focused border color. And that gives us sorry,
I just put it in the focus. Border color. This is
this is what we're doing for the fill. So there we go. Okay. Now it gives us a nice bright blue. Now we put our mouse over it
and it suddenly goes right back to that kind of ugly, you know, sort of predictable power, blue color. So let's go to our hover
fill, hover, fill, hover, fill. There we go. And we're just going to go self
dot fill and let's do a color color
fade route to make it slightly darker. And so we'll do -20%. And there we go, slightly darker,
and we click on it. It inverts itself
and gives us a thick border. And I think that's just fine. And so let's go here. That looks good. Notice that we still have
this focused border around it. I just don't like in general,
the focus borders. So let's go change. Focus border thickness to zero on this. We've just got our our color good
And then on cancel we need to change that let's change its hover color
to like a like a nice gray. When we click it's
going to invert the color. It looks like it's inverting the color
even on hover. So let's just go with a dark gray. I think that will work fine. So hover color is let's actually make it the same as the
as the as the as the text color. So we'll say self dot color and then what have I done wrong? Hover color is self taught color, which is gray. Yes, that's blue. What have we done? that's hover color, not hover fill. See mistakes made. I could just add a title,
but now you saw me make a mistake. So there we go. So I say that the hover color,
we're going to say it was white, right? Color, dot white. I don't remember,
but we're going to go with it and we'll say hover fill is self
dot color. There we go. That's what we're after. Great of white. Okay.
I think they pretty well got this here. We've got a nice looking text input
and we've got our our name and then we put our mouse over it and
it turns nice gray and our submit goes. Now, you know, one of the things I like
this is the little UI UX thing. It's a very subtle change
between the submit hover and the submit off, but we're going from
like a dark to a light. And the text, the the,
the text color changes. I think that's too much. Let's make it more subtle
like the submit button. So let's go back and let's change
this cancel hover color is going to be the soft
color. We're not going to change it. And then let's make the hover fill to be a much lighter
or a much come on, a much lighter gray. So hover fill is going to be color fade self that color and let's go 70% lighter. Does that feel more? I still feel like it's too much. Let's go 90%. Whoops 90. Not nine. There we go. I feel like that is much more consistent. The differential between the full fill
and a hover fill and the full flight and this light gray that feels to my eye
very similar. And you can do this
as an exercise in your apps where you kind of go back and forth
between things and make sure that the that the experience
from one control to the other is very similar and that you don't have,
you know, things that are crazy like for example,
something you could do I'm not going to do it,
but you could do it right now. A button control does not have a
a drop shadow to it, but you could come in
and apply this same concept of putting a button inside of a container
and giving the container shadow. You could do that to make these buttons pop up the page
the same as the input controls. I would probably do that
if this were a production app. I would put these in containers and
give them a shadow so it all matched up. Let's, by the way, adjust our sizing here
so that they have margin. These are things that you notice
in a well-designed app where there's plenty of margin, where there's space,
there's room to breathe, where you use colors
or shadowing to create a sense of depth. And that's just what you don't
get in the basic powerapps design. There's no sense of depth, there's
no shading, there's nothing that makes these fields pop off the page
any more than anything else. It's very square, It's very boxy. This design gives us more style,
more contrast. The fields pop off the page
and we have a much better experience. So that's a basic design. You can take these concepts
of rounded borders on your input controls, using containers
to create shadows behind any object. You can be input controls or otherwise
creating dimension that causes things to pop off the page, whether you're
using color or whether using shadowing. These are concepts that you can apply
to make your power apps look amazing. Modern input Controls. I've used the word modern some,
but I'm not talking about modern input controls, as in the modern controls
provided by Powerapps. They're just not ready yet. There's not enough customized version
that can be applied to them. And so we're really waiting for those
to develop more before I start using them. I am still using the classic input controls for everything
and then just styling them the way I want. Go out there to Google
or on Figma search the community for UI UX interfaces
and look at those designs. Apply those concepts to your power app. You'll find that a lot of them
look very, very similar. And so if you design your apps
to look like what you're seeing as the top search results on Figma
in their community designs, you're probably going to end up
with something that looks really nice. Go out there, make the design happen. Subscribe
for more of this kind of content. I'm Ryan Johnson and now I look forward
to seeing what you create as you go out there and create something awesome.
