User Experience Design Essentials - Adobe XD UI UX Design

Working with type in your XD wireframes

Daniel Walter Scott

Download Exercise Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Introduction



You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Hi there, in this video we're going to look at Type in XD. We're going to update some of the Nav here. We're going to talk about what fonts we can use, and can't use. We'll do some aligning and distributing, and we'll update the logo here, in the top left. Exciting. Not really, but some essential stuff, so let's get in and do it. 

So working with Type in XD is pretty easy. We'll cover more specific kind of web fonts and stuff later on when we get into our High Fidelity final version but the basics for the moment is, I want to replace this XD with our business logo. So I'm going to select on it, and delete it, grab my Type tool. Now, you might be inclined to start using the branded logo for the company. It's not handy in Wireframes. You just got to keep it real simple in Wireframes and then let your creativity run free in the High Fidelity versions, or the final versions. 

I know myself that I get quite up too much in like putting the logo in, and you're like "I'll just use the brand color for the navigation," then you start picking fonts, then before you know it you're fully designing a Wireframe, and it should be a quick, easy process. So I'm just going to put in 'InstructorHQ', the name of the company. And I'm not going to worry about anything except the color. Over here, 'Fill', just so that it could be seen. So the basics are over here, you got the font size, you've got your font obviously, and the different sizes, or the weights. Then you've only got some basic Type. So you've got the spaces between the letters. So I could open it up, maybe 200, and I get some more spacing between the characters. I don't want to be doing this at this process. And this is the leading, the space between the lines. 

Now, one of the handy tricks when you're working with fonts, this thing here, is not like a drop down, you got to actually type it in. So it's easier sometimes just to click, hold, and-- see this little dot here, grab that 'Black arrow'. See this little white dot, he does a couple of things. If I drag him down, he does the font size up and down, which is cool. You'll also notice, if you just go below a little bit, you can start rotating it. So, my advice though is to not rotate any text in a website, or app design. It's just quite hard technically to get Type to rotate. It seems like an easy thing to do but if you've ever dealt with websites before actually, rotating Type is impossible, so you have to turn it into an image and it's a big drama, so try not to do that. 

The other thing is, when you're picking sizes you want to be at 100%. You can see, I'm at 75%, so I'm starting to make some decisions, and I'm like, "That's big enough," but when you're not at 100%, you might make some bad decisions. So if I go in, remember, 'Command 1' on a Mac, or 'Control 1' on a PC, then you can get a sense of "Okay, these are the actual sizes that users are going to see." So I feel like they're quite small, and this is quite big. So I'm going to shrink this down a little bit, what is it, at 20. So I can either drag it here, obviously type it over there. I'm going to stick to a really kind of consistent font size. 16 is a really standard, basic, it's like the biggest font that you want to be using. 

So I'm going to click on these guys as well. Actually I'm going to be adjusting a few of these. So I don't want-- I've got three of them where I want. I'm going to select all three, actually no, I'm just going to do one, and then duplicate it. So I'm just going to use my 'Black arrow', just deleting them, and I'm going to click on this first one. This one's going to be 'Example'. And I'll make the font size up to '16', to match the other thing. And I want a couple of them now. 

A little trick is, you can select it, go to 'Edit', 'Copy', 'Edit', 'Paste', or 'Control D' on a PC, or 'Command D' on a Mac, and that gives you two of them. I find the easiest way though is, with your Black arrow, with it selected, hold down the 'Option' key on a Mac, or 'Alt' key on a PC, and drag it across. You'll notice that as you drag it holding that key down, you'll get a duplicate. 

'Pricing'. 'Login'. Remember, I'm pulling these from my features these are the main things that need to go in. And in this case the last one is 'Sign up. So what I want to do is, I probably want this guy to the edge here. Maybe just inside a little bit. And I'm going to hold 'Shift', and select them all. So I've got my Black arrow, holding 'Shift', and just clicking them each. Actually I might drag this one out a little bit further. You can drag them, and you watch. Can you see the spaces between them start line up, see that pink dot there? So you could do that, then they're all equal, it's up to you, or whether you select them all, holding 'Shift', and use this option up here that says, see this fourth option in here? It says 'Distribute Horizontally'. Just kind of like spreads them all out. 

Now the other thing you need to be doing, is, like me fighting with yourself not to go through, and pick a nicer font, just a nicer one, and maybe using uppers and lowers, you just want to keep that out at the moment. You just want this to be that really clunky, functional Wireframe, no style. As I go through and align them up nicely. So there's only so much you can ignore. All right, so that's going to be us. On to the next video.