Lessons

Lesson Info

Basic Colors & Buttons

Hey there. This video is all about creating buttons, we're gonna make a nice simple button with rounded corners and you can see here, we created some swatch colors we can use throughout the document plus we kind of add some of the just kind of core components to our homepage. Wireframe, everybody's, let's get started. Alright, so colors aren't huge in wire frames, just some subtle colors to show kind of hierarchical changes and kind of separation of different areas. So that's what we're gonna do. Now, first of all, grab the black arrow and click on your navigations. This kind of blue box here. Okay with it selected. You should, it should have no, no border. Okay and have a fill. So the border is the color on the outside and the fill is the stuff in the middle. Now click on the little blue box here and this pulls up our little color palette. Now we're not going to go and change this blue thing just yet. Okay, basically what I want to do because I want to reuse this through it. I want to...

have this little plus button. It just means it's going to be easy to find again when I'm drawing different text boxes, I can click on this and make sure it's all matching up the same color while you are here. It's really handy to have and you can see this little dot here. This is showing me the, you can see I'm changing it in here. It's not really what I want, but I'm going to go back, I'm gonna drag it all the way down, drag, drag, drag, drag, drag and just keep dragging it passed here so it's jammed in the corner and add that. So I want to fall back. I'm gonna drag it all the way to the top and a full white and then I'm going to click on the little blue so that my navigation is back to that blue color. What we'll do is in XD, there's a default color as well. This if I click on this, you can see the border color even though it's not on, you can click on it and say add that, that's the kind of default gray color that goes through all of XD. We might as well keep it consistent instead of trying to guess it. So go all these colors is just one of the color I want to add. And what I'm gonna do is I'm gonna click on the background so let's double click the edge or click the name over here to get the whole outboard selected. And what I'd like to do is at the moment it's filled with white. I'm going to fill it with a slightly off white color so you can see here, I don't want to be this color, but I want it to be just down off here. It's gonna mean there's gonna be a nice contrast when we draw our little white boxes over the top of it. That makes no sense to you at the moment. Okay, because we haven't drawn them but let's just make it a slightly off white if you are typing it in, you can type in hash F zero, F zero F zero. Okay, that's called the Higgs a decimal code. If you're new to web design, that is often the, the color that gets used to describe it. If you're kind of from our graphic design background and you're dealing with RGB or C M Y K, that's what we use when we're kind of dealing with web and app. Not always, but it's the most common one. You can use RGB or hue saturation and brightness. Cool. And while we are here we must hit plus. So I've got that kind of like tinted background color. Cool. So we've got kind of some pre made swatches so we can get consistency through this document. What I want to do is I'm going to click off in the background, I'm gonna grab my rectangle tool and I'm gonna draw a rectangle that goes from the edge here. Okay, all the way on the side, all the way over and it should snap, which is cool. And this is going to be my hero box. Now this hero box. Okay or the welcome box or this top main focus. This is kind of like above the fold. Remember this dotted line here. Okay, so that's what people initially are going to see. So this is kind of what your main call to action would be or your main marketing message or your main sail promotion. So this is kind of gets referred to as a few things, but often it's the hero image. Cool and what I want to do with it, I'm going to move it up a little bit and a couple of things I didn't do is I put in a little bit of padding into the edges of this because I didn't want to bang up against the edge, but it's kind of not what we're doing here. We're using this extra space here. So I'm going to have all these guys and I'm going to get him to the edge there. You to the edge there. So everyone's lined up nicely. Alright, so once I'm here, I don't need this column at the moment. This kind of discolored column to show me the edges. I'm going to use this white box because this, this column I guess gets annoying for me in terms of colors. Now to turn it off. The long way is click on double click the edge OK? Or click the name and go over here and just turn off that for the moment. There is a shortcut though and I'll try not to do too many shortcuts but I end up throwing them in just for the people that really you can just click on the edge and turn it off. That's not a big problem. But if you're on a pc, it's control shift and I want to say apostrophe is an apostrophe, Okay, I'll show you that. Uh that's on a pc on a Mac. It's this one here that is command shift and that one there on my keyboard, it's kind of just across from the colon which is next to the L. Key. Okay, you might have to mash around and see if you can find it. Okay, so there's a shortcut, I use quite a bit, it won't work unless you've got the outboard selected or anything inside that outboard. So you can see I just kind of toggle on and off quite a bit when I'm just working. But now I've got this hero box, it works and that's why we've got that contrast with the background. I want this all kind of segmented up so that that's just kind of hidden in the background. These have a little bit more importance. The other thing to do is I don't need it to move anymore, I'm gonna start working on top of it but it ends up getting in the way so you can lock it. So there's a long way up here object there it is lock, you can see the shortcut command L or you can right click it and say look either way I want it locked and now I can't move it and you can see which is really handy if you want to unlock it. Just click it once with the black arrow and you can see this little liking icon. Just click it and it comes back to life. So I'm gonna use command el control l to lock it. All right, Next thing I want to do is put some text in the middle, grab your type tool and what I'm gonna do is click once and before we start typing we all need to make sure probably by default yours is stuck to white as a font color so when you start typing it's not going to appear. So just set it to black and yours is probably set the left hand, like left the line. I'm going to set mine to center and mine is defaulted to Helvetica. So I'm gonna use the aerial. Now if you are like, man, I can't deal with Ariel or Helvetica as a designer. Just two basic um, something like source sands or open sands is a real common one. You can download them from google fonts or adobe fonts and they are at least a little bit more stylish but are still really crystal clear and simple. So I'm going to start typing and I'm going to call this one headline slash hero box. So it depends who's going to, if I was designing for engineers and other designers in the industry, we can call it hero box, but sometimes a client who doesn't know like they'll be like here or what. Um, so that's why I double double word headline hero box. And what I'm gonna do actually is I'm going to work through and use this blue color throughout and so I'm going to limit my colors to those people there. Okay, so I've got a really limited color swatch. You can change the blue thing to something else that maybe try not to go on brand colors. Just maybe something a little different if you're sick of blue, next thing I want to do is I'm gonna put it in the middle. It's just really handy like to get stuff in the middle. You just drag it until it kind of like finds its home. One thing you can do though. It's a little trick. If you have two things selected, this doesn't work, but if you have just one thing selected, it goes, hey, what am I going to line too? If you click on these buttons and it assumes the outboard, see that it only works when you have one thing selected. Yeah, that's my hero box. I would like to visit the right size. It is, it's Helvetica. It's gonna be a real to keep consistent and looks exactly the same. All right. I need to put a button in here. You start at the beginning. So buttons you can go and steal one or create one. A button can just be a rectangle. What we might do is do a little bit more practicing of the jumping between different up boards. We're gonna go back and open up. You probably still have yours open and Open recent this wires. Web one. Okay. Remember this fella for you? It was just a second ago in the last video for me it was over the weekend, it was like a whole few days ago. That's why it's not open still. Alright. And there's a zillion buttons to find there we are. Cool. And you can see there's slightly designed, there's some rounded corners, we'll look at that ourselves in a bit. You can see the different kind of designs for buttons. Sometimes it can be quite hard. You're like how does a button look often? Like I'm pretty, I like to think of myself as a pretty good UX designer but often I'll draw a box, I'll draw a button and it will just look like a text inside of a box and you're like man, sometimes it's bad. I've worked on projects where people just like, well where do I click? I'm like the button and they're like well where's the button? And like that box with the text in it and it just hasn't worked out. So sometimes things like rounded corners. Alright. So that's given us an idea instead of copying and pasting it. The reason I don't like copying and pasting is because if I copy this, jump to my other document, remember on my Mac it's command and tilt E which is the little wave key that switches between buttons and on pc. It's control tab to switch between open documents anyway. So if I paste this in, if I find on my um, if I'm on my assets panel and I pasted in, can you see it brought through a symbol which is cool work and do that thing where I, where I right click it and say actually I wanted to unlinked symbol and then I'm going to delete this guy over here. Goodbye. So I've disconnected it all. You can do that way. I'm just going to show us how to make it and plus we'll learn how to do a rounded rectangle box at the same time. So command one. So I'm at the right side. So I know I'm not making a giant button and that's about the size I want it to be. I wanted to fill with the blue, you can see how handy those little swatches are now and with the border, I'm gonna turn it off. What I'd like to do is introduce this little option here. Okay, so this first option and if I type in here like say four pixels, you can see it just gives a little hint. I'll zoom in for you so you can see there's a little hint around the outside there, around the corners, you can decide on what's right for you. You might go back to that mock up and just see what they did and copy that because we've all learned that makes terrible buttons. The only difference is see this option here. This is all of them do the same thing. This one is I can do them all individually. So if I do to to to and which is this guy, if I turn them up to 20, you can see I can make fancy curve buttons but we're getting away from we're getting back to the terrible button ideas. But anyway, that's how to do rounded corners. I'm gonna make sure it's in the center of the document. Remember a little trick a that's going to work because I know that's centered and it's lined it up nicely. But remember if I have one thing selected and click on this, it just goes into the center. I'm gonna grab a text box instead of trying to recreate it. I'm just gonna copy and paste you. Okay, So I've got two of them. I'm gonna make him white, move them over. This one's going to be start trial. Alright, I'm going to select both of these. Actually just going to drag him and back. He's in the middle command one. Control one zoom out. Yeah, it's kind of working now, we're at a point where in terms of type we've only used 16 point. Okay, real common body copy size, but we're going to have to show kind of hierarchies of what's more important because this thing here is quite small. Well it feels small comparison to this. I know that's kind of more important to this to describing this box than this is. So what I'm gonna do is I'm gonna introduce maybe probably just two font sizes. I'm probably gonna pick something like 24. Okay, so that's clearly different. That's more important than this. And I'm going to try to stick to that. I'm probably going to pick one smaller font size. Okay, so we probably down to something like 10 point for like T S and C. S and kind of really small, insignificant notes, but stick to kind of really stick to two or three font sizes throughout the wireframe, even in the kind of high res version will do later on or the high fidelity version. We'll end up with maybe just five font sizes just to keep it all really consistent. Alright, so now you can kind of skip ahead now because what I'm gonna do is duplicate this to get our all the different kind of sections going. So I'm going to make him in the middle. Here we go. I'm going to I want this to be unlocked. You can right click it or go command L on a Mac control L on a pc. Zoom out a little bit. I'm going to grab it all. Okay, I just drag a box. Black arrow, drag a box through it all and I'm going to hold down the you can copy paste and then drive it down. I'm not sure we're driving it, but I hold down the option key on a Mac. Ok, on a pc and I can drag it down. Okay, so there's that one. How many do I need? I'm looking at my hand drawn wireframe here, I showed you the wireframe pretty terribly in the video and I was like, hey look I had a back look through that video and it doesn't focus at all. So if you are looking at what, like what wireframe is he doing in the exercise files, under images. There is our in the bottom here there's the wireframe one so that's kind of what I'm working from. I took a scan of it rather than sticking it to the camera so I'm kind of just building this thing up. So 12345 boxes. So it's going to do here, I'm gonna go one to and you'll notice that X. T. Is pretty good at trying to like guess like the spacings, so I'm gonna have five of these and I'm just going to change the text so it's not very exciting from here on. I promise not to throw in any extra tips or tricks so you can skip on or you can hang out, you can't reach the button to turn it off and you're stuck with me. Alright, so this one doesn't have a button, This is the welcome video that we're going to be using and it is on auto play auto play and muted. So it kind of starts playing, but it's kind of off so people can kind of see what's going on, they can mute it if they need to. All right, this one here is the instructor ecosystem that the building instructor ecosystem and figure out actually what I'm gonna do is I'm going to get the editor, speed this up because oh, I promise no more tips. Okay, one tip and you'll notice throughout this course and if you've done any other ones, my spelling is terrible. So there is this new handy thing. I know it doesn't seem like much, but for me it's awesome. It, so you turn on spelling and grammar and it's going to do cool things like, wow, make me look a little less bad when it comes to typing um I'll show you what it does. Can you see you get the lovely dynamic spelling and gives you suggestions, which is not helping me at the moment, let's hope I can spell infographic. So now I'm going to speed it up. No more tips and I will see you in a sec. Alright, so that wasn't really worth hanging about four. But yeah, we've got our boxes and then we can start moving forward on to the next video