Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:12Length:2.1 hours
  • Overview
  • Transcript

4.1 Links

When designing typography for the web, it’s not enough to lay out your paragraphs and headings and call it a day. There are additional elements that ought to be covered in your design too, and in this lesson we’ll start that process by designing our links.

4.1 Links

Hey, welcome back to Advanced Typography Design in Figma. In the last section of the course, we just got done looking at issues surrounding accessibility and color, how to implement those into your typography. In this section of the course, we are going to look at how typography relates to the design of individual elements in your site. And we're gonna start out by looking at something that is really easy to forget to do during the design phase, and that is making sure to remember to determine how your links are gonna look. So we're gonna make a new page in our document here, because we've got all of these different colored line emulation versions of our site here and it's gonna be a little bit awkward. So let's just grab a copy of our colors and our light and dark color scheme that we have so far. And we're gonna copy it and make a new panel, new page rather, and we'll just name this element specific typography and paste in our frames. And then let's just move this dark version up over here. Allow a bit of space in the middle, we're gonna be putting a couple of things in here. And then we want both of these to be a bit taller cuz we're gonna be adding in these extra elements that we're gonna be designing. So bump these up to about 2,500 pixels high and let's get started on designing our links. And we'll begin with the light section, get the links right for this and then we'll do the dark version. All right, so the first thing we're gonna need is just a couple of little pieces of text that we can apply our link styling to. So we'll just add in bit of text here that just says link normal. Make sure it has the default text style applied to it and then duplicate that. And we also need to define the hover state. If you want, you can also define how a link should look when it is visited, and also when it is active. But generally speaking, it's fine to just have a normal and a hover state. Because as far as the active and the visited state goes, you can normally have the visited state use the same styling as the normal state, and you can usually have the active state use the same styling as the hover state. So let's replace this word normal with hover, and now we can start our styling process. Now even though we've made these bits of text here, what you really need to do when you're deciding how links should look, is have the text that you are applying that styling to be sitting in the middle of a paragraph. Because the whole point of styling a link is so that it doesn't look the same as all the regular text and it stands out enough that the viewer knows that this is something different. So what we're gonna do is create another frame over here, just a relatively small frame. And in that, we're gonna put a bit of text. We're just going to copy the text out of this paragraph here. And all we need, about the first couple of sentences. So we'll just copy that text and we'll draw a little text box in here and paste our copied text into it. And then just for thoroughness and neatness we'll just center that. And now what we're gonna do is apply our link styling to this bit of text here. So then we can make sure that it looks okay in the middle of a paragraph and stands out well enough. And we're gonna start this process by designing the normal link style. So we're actually gonna begin with the purple color that we applied to our headline here. So let's go ahead and sample that. And notice there is the zoom on the top right that gives us a better view of the color that we're picking so we can make sure that we are properly picking the purple that we're using, and we don't accidentally pick an anti-aliased edge like this so we end up with the wrong color. So just grab our purple, and that has gotten us started. But you'll notice that it's actually fairly hard to tell that this purple is different to the regular dark text. So there's a couple of things that we can do to remedy this problem. We can brighten the color. We can set this text to be bold so that it stands out from the regular white text around it. And we can apply an underline. In this case, we're just gonna do all three of those things. So I'm gonna select this text again. And I'm gonna have to detach the default text style. So I'll detach that, and that will then give me access to font weights. So I'm gonna bump this up in white. I probably don't really want it to bold. That's gonna be a little bit too big and chunky, that probably stands out too much. So what I'm gonna do instead is just choose SemiBold. So now that's noticeably different from the other text but not too different so that it seems a bit clunky. Now I'm also going apply an underline. You can't see the underlining options here by default, so what you need to do is press the little button here with three dots on it. And then from here in the decoration line, you can choose an underline. So now that's standing out quite a bit more, but it really could still be a bit brighter, a bit punchier. So let's select that text again. And now we're just gonna tweak these colors until we see that it's nice and bright, not too bright or too light. You don't want to go overboard with it. Just to around about there is probably good. As usual I have already gone through and select the color beforehand. And the color that I went with is 9f12aa, very close to the color that we just had. So now that is looking pretty good. It's clear that that's a link, it's clear that it's different to the other typography. And we're just gonna double check and make sure that our contrast is okay. We need to keep doing that anytime we add a new color. So we got triple A, that's all good. So that is our normal links state done. And the reason that we have these pieces of text over here, is to make it really easy for the person who goes through and codes this design up to see exactly where they should be looking to find the correct styling for the links. So the first thing we're gonna need to do is detach it from the default text style. While we're at it, we'll actually detach this one too. And now we're gonna select this text and we will create a new text style. So here click the four buttons, hit plus and choose link, normal, light because this is our light color scheme. So now we'll select that. Apply our new style. That will give us the underline and the font weight, but we still need to apply the color manually, so let's just select our text here again. And then we just copy and paste our color code. All right, so that's the typography set up for a normal link. Now we need to do our hover link as well. And this is where we can take advantage of a really cool feature of Figma and that is its prototyping. We can use its prototyping functionality to simulate the hovering with a mouse and actually see what this is gonna look like in the browser. So what we're gonna do is go up here and rename our little frame here. We're gonna call it link normal light. Then we're gonna duplicate it with Ctrl D. Let's drag it down here. And now let's rename this one, and we'll call it link hover light. So now let's change up the color of this link here to a good color for the hover state. Generally speaking, when you hover over a link you want it to become a bit brighter so that it makes it feel like you've activated something, you've switched something on. So we're gonna go with the pinky color that we chose for our sub headline here and then we're gonna bump up the brightness a little. So let's select that color making sure we get the proper bold version of it. And then that's a little dull by default, so let's, Bring that over to the right and up a little bit to make that color punchier. Let's check on our contrast. That's all good. And now what we're gonna do is go up to the top right here and click prototype. Now we're gonna select our link normal light frame, and you'll see a little circle has appeared on the right edge here. Click on that circle and start dragging. You get this little arrow, which you can then drag down until it locks on to your link hover light frame. Now, have a look in the right column here, and at the top here, you'll see this trigger section. We're gonna change that to while hovering, because then when we activate this prototyping link up that we've just put in, it's going to allow us to simulate the hovering over a link in a browser. And then we can confirm that this error that we've drawn here is creating an action to go to link hover light. So while hovering, go to link hover light. So now let's press this play button up here, give it a second to load. And now when we hover over this frame, we can see our hover color. So that makes it a pretty close experience to hovering over a link in the browser. So we get that chance to have a look at what it will really be like when we put our link into a live site. So it's a really great way to test out different types of hover effects. Okay, so once again, we're gonna apply the styling that we just created to the snippet of text that we have down here. So let's get our link normal light style down here. Actually, that should have been named just link light, but anyway. And then we'll grab our color and apply it there. So now that is all done for the light version. We can go ahead and do the same thing for a dark version. So let's copy this text here, Paste it in here. Now obviously, these colors are not going to work so well on this dark background. So instead, we are gonna work with the green and blue colors that we have on our headlines. So let's get that going over in our little frames here. Select both of them, duplicate. And we just rename. So then instead of saying light on the end it says dark, and then the same thing here. Go into prototype mode. And then we're gonna drag out that connection between these two frames. Now you'll notice that there's still a play icon on this frame. So if we play this prototype right now it's still going to show us this frame. We want it to show us this frame. So click on the canvas anywhere you like to deselect everything. And then in the prototype sidebar, you'll see this section here labeled starting frame. So we need to change that to show us the link normal dark frame at the start instead. All right, so let's go back into design mode for now. And then on both of these frames we wanna change the background color to match our dark background color here. We want to change text color. And let's zoom out and make sure we sample this color correctly. Now we're gonna add a fill color and select our light color that we already set up earlier. So now for our normal link, we're gonna start with the blue color. So we're gonna sample that from over here. And for the hover color, let's make sure I've got that properly selected. I do. We are going to use the green. I think that the blue is pretty much already fine as it is, that's got quite a bit of brightness to it. But I think we should probably bring up the brightness on the green here so that it doesn't look dull compared to the blue. So let's just pick this up a little bit, make it just a little bit more luminescent. Now, let's hit the Play button up here and we'll test our hover. All right, so there we go, that's looking pretty good. Actually, now that I see this with a darker background, it does make the blue look a little bit faded. Let's actually bring that brightness up a little bit after all. Just make it a little bit brighter. Test one more time. Okay, that looks much better. And the hover looks quite good as well. Actually, you know what? Just one tiny bit more nudge on the brightness. So this is the process that you can go through to get all of your colors just right, just a little bit more. Right now that looks spot on. It's gonna be really obvious to someone who comes in that that's a link, it's not gonna get missed. And it's very clearly interactive when you hover over it. So now all we need to do is take these two colors and apply them over here. So let's zoom in enough to be able to sample them quite easily. You could just copy paste the color codes but there's always more than one way to do things. So let's sample our blue, And our green. And now that is done. So we've got our links for our dark mode. Everything's been tested. And we have our links for our light mode as well. Really important, it's just a small job but it's really important to remember to do it as part of the design process. All right, in the next lesson we're gonna put together what is basically a different type of link and that is a button. We'll be doing the same type of thing making sure we get our colors and our contrast right, looking at which of our fonts we should use and what sizing we should use. So we'll do that in the next lesson. I'll see you there.

Back to the top