3.3 Don’t Forget to Design Links!

Hi, welcome back to your code friendly design with Adobe XD. In the last lesson we set up our basic typography and a couple of buttons. In this video we're gonna talk about something that technically could have been covered in the last video. But this part of the design process really gets forgotten a lot and it's pretty important. So I thought it deserved it's own video just to drive home that reminder to always remember to design links as part of your markup. Links are used pretty much in every website, ever. And yet they probably only make it into about half of the markups you might see. There's not much you really have to do to design a link, all you need to do is add in a little bit of text. So just add some text in here that says this is a default link. And now we can style that text up to make sure that when a link is in the middle of a paragraph like this, it can be easily distinguished from the rest of the text. So first up, of course we're gonna need the correct color. And on dark backgrounds the same color that we just used in our button background is gonna work really well so we'll select that. And automatically, that stands our really well. So if I drag this up here to give us a preview of how that would look inside the text, that's going to be quite effective. Just bring that back down here. So there's our color. You're also going to need to decide on the weight of that link text and also it should be underlined. One of the ways that you can make link text look distinct from the text around it is by making it a heavier weight, so we've got light text here. Let's set this link text to be regular which it already is by default conveniently. So that is how default link will look. Now let's also think about how that link should look when it's hovered. It's not enough to just provide a default link unless you wanna have no change in how a link looks when somebody hovers over it but generally speaking, it's a good idea to have some change. It just reinforces to somebody that that's an interactive element in the site. For this link, we're actually gonna set this to the same color as our text. So we'll just do that So when someone hovers over an orange link, it's gonna turn white. But now to make that still a bit more distinct, because it is the same color as the rest of our texts, we're gonna set it to have an underline. That's another thing that you'll always need to decide on when you're designing links, whether or not they should have an underline. In code, all links have an underline by default, but it can be turned off. Just tick this U here to add an underline, and we'll do the same thing for our default link. And now we're just gonna edit the text here because there's a little quirk that can happen when you take an XT design into Avar code, and that is that underline. It doesn't always get picked up, that will probably be fixed later. But to make sure that it's clear, this should be underlined, we're just gonna add in the words should be underlined. So now when the coder looks at that text, even if they don't see the underline, they're gonna know that a default link should be underlined. Oops, add a d on the end there. And that's an example of how you can communicate to the coder to get your ideas across inside the design itself. I've already got these little measures, they help, and things like this can help as well. So we'll make this text more descriptive as well. We'll say this is a hover link or hovered link. Should also be underlined. So now that's all it takes. It's a little job, but it's just one of those things where you want the designer of that link to be up to you as the designer rather than the coder making a guess is to have, I think you would want it to look. Right, now let's copy these links and paste them so we can put them down into our other section here. Got all our styling is already in place for these. All we need to do with these two links now is to change their color. So for the default link we're gonna choose our highlighted blue and for the hovered link, we're gonna choose our dark text once again so that it's matching this text here. And we've got the same problem again here, where because we have a light background. This text look lighter than it actually is, so we're gonna bump the weight up to medium. We'll do that on both links and just as a side note here. If you look back through what we've designed so far, you can see that we've used three weights. We've used light, regular, and medium. And at the moment for every different weight you add, there's a little bit of extra download that has to happen to bring in the glyphs that represent those additional weights. So you can get away with two or three different font-weights, but don't push it out too far. You can see that there's a whole bunch of different ways that you can choose from here, but you don't wanna use too many. If you were to use every single one in this list, it would make a significant impact on your load speed. So try to keep that minimal. Try to keep it to as few different weights as you need to ensure that your text is readable. All right, so now that we've got all our basic typography in place as well as our links and our buttons. However, we're still missing all the rest of our headings. We need to decide on all the different weights of the different headings. We need to decide on their line heights. We need to decide on the margins in between headings and around paragraphs, and this is another thing that's often neglected in the design phase, not always. There's some very diligent designers who always make sure that they Include full typography guides in their designs and that's definitely something you should always strive to do. Unless, you're designing a static site that's never really gonna have its content changed, it's not nice to just design the typography for its pre-designed elements. So, for example, if this was a little blurb on a product with the heading, text, maybe an image here, and a button, just designing for that would not be sufficient. Because what happens if somebody wants to change the content and they wanna put in a couple of extra headings, different sizes. They want to put in more paragraphs, but you haven't designed for those things yet. Then your going to end up with some ugly, unstyled type. So in the next lesson we're going to go through. We're going to go through designing the rest of the typography, and we're going to look at a few of the key things that you need to bear in mind when your starting up your headings. So we're going to go through all that in the next lesson, I'll see you there.