Working with type in your XD wireframes – UI/UX & Web Design using Adobe XD [7/42]

Articles, Blog

Working with type in your XD wireframes – UI/UX & Web Design using Adobe XD [7/42]

Working with type in your XD wireframes – UI/UX & Web Design using Adobe XD [7/42]


Hey there, my name is Dan Scott. This is one video from
my larger Adobe XD course… which you can check out on
bringyourownlaptop.com You can also go in there to download
the free exercise files… and the free cheat sheet if you like. All right, enjoy the video. 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
caught 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. Hey there, please ‘like’ the video. Consider subscribing to
my YouTube channel as well. If you want the full course for Adobe XD… check out my website
bringyourownlaptop.com That’s it. Bye now.

2 thoughts on Working with type in your XD wireframes – UI/UX & Web Design using Adobe XD [7/42]

Leave a Reply

Your email address will not be published. Required fields are marked *