Lessons

Lesson Info

Paste Properties

Hi there. This video is all about buttons previously I've just drawn rectangles that I just assume everyone will know the buttons and often that doesn't work for me. So I'll show you here. We can do cool stuff where we can just grab button styles pasted on there. Look at that. It's got rounded corners and like a real slight drop shadow looks more like a clickable button. We'll go into a tiny bit of button theory. If the button theory gets a bit boring in the middle, skip to the end where we add the logo and the buttons along the top here and make sure you've got this one. So it again it's adam, Look at that much more clickable. Alright, let's get started. Alright. Time to build buttons and good buttons. So first of all, I want to extend that out. If you remember you hold option while you're dragging our or on a pc drag the corners, it'll do both sides. I'm not sure if I've shared that with you're all going to center. I want it to be about that much and we're going to use our little plu...

g in full placeholder text. Thank you very much, puts a full stop at the end and actually that one here, I wanted to trim the bottom of the text box. Handy plug in. Okay, I want to move them all up a little bit. Maybe there. I want to put my button in now rectangles. Don't cut it. They can sometimes do I draw a lot of my buttons and I'm gonna turn my grid on. You don't have to because I want my button to be fitting the rules. Mm mm mm mm mm That's been nice going to the center. Turn my grid off. Cool. So I do this quite a bit. I'm like, let's just draw a button and that's a button. All it needs is some text in it. So I grabbed my type too, actually grab my little text block, where are you? Make sure it's all consistently the same color, the same size centered. This one is going to be start free trial. I'm going to do it all in caps. Start free trial and I'm gonna use the bowl. I'm not sure. That's not really the time to be doing it. It's okay. So that they're kind of might work as our button because it's got the right language in it. But there's so many times where I've drawn stuff like squares with text in it and people have asked, hey, where's the button to click the start? Free trial. And you're like, man, I've had to double back and kind of design the button a little bit nicer. So where do you get inspiration from? Because inspiration for buttons is one thing and also want to show you this cool piece properties function. We can do the google material. We've talked about it before, but you can just open it here. All right. You might have heard that whenever I say the word google, my phone launches, google assistance. Like hi Siri, ignore google over there. So google material is what I wanted to secretly say to my phone down anyway, we'd segway. So if you go to your exercise files, I've given you in the Ui templates and google. There's this one here for material design. You can download it yourself from the Ui kits, google material and go and find it. I'm going to open it up and in here some really cool high fidelity. That's the difference between that wires like it. We're using this one has lots of colors and fonts and rounded corners and drop shadows. What I'm looking for is buttons and I find I need stuff like this because like, there's not much to that, but it's got a tiny teeny drop shadow to it. The rounded corners make it obvious. So what we can do is I can click on it. I'm going to um group it so that I can kind of just I just want to work on the button bit and we're going to just go to regular old copy. So you could use Control C on a Pc or command Z on a Mac. Just copy it. Jump back to our design, click on this and instead of just pasting it because you just get a copy of it, which is fine. You can get an edit and you can get a paste appearance. That's super cool. It uses the same shape, but it's added the rounded corners. The drop shadows. I can go through now and pick my color. Do you think it needs to be the blue? So that's just a handy trick. Okay? It's gone through. They've picked the blur in the shadow and I'm gonna look at it 100% looks more like a button. So we've done it for a button here, but you can do it from anything in here, anything that you like, you can just copy it. Okay? And it will pull through the style for that. Something is a bit more obvious, zoom out. Let's do this text here. So you're like, you're like, oh, I like hello world here. So I'm gonna copy it. Just double click it so I can get inside the symbol, copy it. So I'm back out, grab this and go to edit paste appearance and it's going to pull this right font, the right size, the right color to match that, that is paced appearance. I'm gonna undo it. I'm going to go on about buttons for a little bit longer if you have to leave. It's okay. There's some good points. Um, I find myself like, I'll show you one of my big faux pas, one of my big foot pas Okay, I'll show you where is it? Here it is there. So I was doing this right, This is an old website of mine and you, that was the buttons, they will look like that and you can see that doesn't look like a button at all. And people were like how do I start the course. And there was a button that looked very similar to this one except it was the red color but it didn't have the rounded corners with a drop shadow. And people were like, how do I start? And you're like well click the button and they're like where's the button? So I had to double back and just kind of add the rounded corners and the drop shadow to it to make it feel like a button and needed the space either side. I didn't do it for this button. I should have Okay, but bad button, better button should be read. No, it's a bad idea. Anyway, old website now, that's not the only way of doing a button. There's lots of things you can do to kind of express buttons. I'll show you one of the Ui kits that I downloaded. That was pretty good. So it is in your exercise files under Ui templates. And there's one thing called other and this one here you can get it from the adobe web site if you go to file Ui kits other, there's this one here. This one's by Naomi Atkinson. Thank you know me. It's really good and it just really expresses. There are different ways of doing buttons right? Like there's about this one here. There's a button with a line on the inside of it. And plus there's little addition of these to greater than less than less than icons to indicate. Like go this way. Sometimes you need those to help indicate it. Sometimes a plus is better. Let's have a look bad scrolling. Where else is some more buttons you can see here. The addition of an arrow helps sometimes a little Plus I want to find the plus one. I know it's in here somewhere. I'll speed this up while I find it. Okay we're back and you might have seen it painfully. There's a whole like button section up here and there's no plus in it. So I'll just fake it. So often people will do this show that there's a more button kind of thing. So Arrow greater than there's lots of ways of communicating buttons and that's what I thought was a good example of lots of the different ones. Now, another thing to consider is the color of your buttons and what they do that red button I showed you earlier, I don't like because it kind of conveys the wrong meaning. I'll show you one of the other projects examples of working on. So this one here, right? You can tell I'm a fan of that color when we originally launched it and we did testing it was just, it was really hard but we didn't have, I didn't have this red color used and I ran out of colors for the buttons. I was just using gray or blue, whatever it was and it was like people were clicking this delete me course button and freaking out because it's a very important button and it really needed it to be read. The other thing I've tried to do in this site is I've tried to give these meanings, so I'd love all these like these buttons here are my addition buttons. So you kind of end up like communicating things with people like training them. You wouldn't want the next screen for the green, you know the green to not, you know this save button to be blue. So I tried to keep all the either additions or saving to be the green preview throughout the site is gray and this kind of like just edit is blue throughout the site and this kind of red is the be careful. I've done it for a few other things we have to do it for as well. You can see there delete save. Where is my little had to make these trash cans red as well because people are clicking them. There's another couple of things I want to show you there is something to do with the end. We're going to draw a couple of buttons but hang around button theory, a couple of cool places you explain it dot org and you search for buttons. There is some cool like I've given you the once over but have a little look at kind of different best practices for buttons. They've got some really cool stuff in here. Let's have a look at this first one here. Hey, it's even the materials button. I don't want to sign up but it kind of gives you the evolution of buttons and I guess not the evolution, but it'll give you the language to talk about this kind of like micro interactions, which we'll do later on ghost buttons. There's just lots of useful stuff you can learn about little simple things, little ui items like this. Another good places you eye movement dot com. I did assertion here for buttons and yeah, just some really cool useful information in here. Plus just some cool examples of buttons like these ones here. Is that a square? Cool. I'm not sure what to call that yet. Like the rounded corner but fully rounded square. Cool. That might not be a word. One of the other things we're experiencing with is my developer came up with this and I thought it was brilliant. So in here we can pick an image and you can upload an image and we're using the image to just instead of like a loading screen and he's got this, which what happens this thing kind of slowly but surely uploads. Watch you see it's going a bit fast now, but it kind of uploads and shows you and indicating through the button rather than doing something separate, which is nice. Anyway, there's more to buttons that meet the eye or at least rectangles that I do. What I'm going to do is build a couple of buttons that we need for this course, plus adding the logo to it before we move on. So what do we need? I'm going to match the size of this because I want it to be consistent and I lie, I'm probably going to make it a slightly smaller size to match in with the grid. Said no more grid, but here we are. Okay. I'm going to probably use now. I want to use an off white. Haven't added it yet. I do like just a slightly off white. Might just be me and put it in there And use that one. Alright, I'm going to duplicate that and use it centered and we're gonna have two buttons up here. There's a login login and use green, My second button going to be the sign up or sing up. I'm gonna make sure they're all lined up nicely. Yeah, now this text kind of sits a little bit lower in here so tap it up, I can hear turn my columns on because I wanted these fellas to be over here. The other thing I want to do is select both of them. I'm going to make sure responsive resize is on. I want you and you and I'm just going to drag it in. You can see if you've got them selected it will kind of tuck the buttons in and I need another one of these needs to be exactly the same size Nice. My column off and both of these guys do not need to be bold back to the regular And to break my consistency. I think 16 is probably public to these two guys. Nice. We're gonna add our logo while we're here as well. So go to file. Let's go to import and in your exercise files under images. I'm going to find the logo. So what do you want? We use logo one S D S V G. Okay. And black against the gray is not going to work. So I'm going to one group. It. Okay, grab all of these guys make it white group, it make it smaller, hold shift. Turn on my grid. You start to see some of the shortcuts become handy. Eventually can turn the grid off and while I'm here, I'm going to add it to my symbols library. This one is going to be my HQ logo. This one's gonna be on black on black and white. Just means how I can use it. That's how I do it. Anyway. Alright, last thing we're gonna do is I'm actually going to pull these out to the edges, holding down the option key. Ok on a pc to get into the sides. Here you go snap a Rooney and I'll use that column to kind of show the edges rather than use the boxes because I want them to spill out to the edge. All right now you can move on. I'm just going to rotate this guy around because I don't like the button is the blue and I've switched the gradient around so that I can use the lighter color, that one there to light. Yeah, there we go. Alright, now we can move on.