4.1 Adding Links, Hotspots, and Fixed Elements
Now it's time to take a look at prototyping in Sketch. When creating websites, web apps, or even mobile apps, prototyping is the process that allows you to create an interactive mockup of your project. Prototypes are very useful for simulating a regular user workflow or presenting the project to a client.
Let’s see how you can create prototypes in Sketch.
1.Introduction1 lesson, 02:11
2.The Sketch Fundamentals8 lessons, 1:16:06
3.Reusing Elements and Styles4 lessons, 30:30
4.Prototyping2 lessons, 12:51
5.Collaboration2 lessons, 13:26
6.Plugins2 lessons, 11:06
4.1 Adding Links, Hotspots, and Fixed Elements
When creating websites, or web apps, or even mobile apps, prototyping is the process that allows you to create an interactive mock-up of your project. And this is very useful for when you want to create or to simulate a regular user workflow or for when you want to present your project to a client. So let's see how we can create these prototypes in sketch. Here I have a demo document set up where I've included some art boards from a UI kit I got from Envato Elements. You can find a link to that kit in the lesson notes. But this is what your typical mobile app could look like, right? You have multiple art boards, each one for a specific screen of your app. And when you're, for example, presenting this project to a client you want to show him that look, when you click the next button it's gonna take you to this screen, click the next here, it's gonna take you to this screen. Or when you click or tap the skip button it's gonna take you to the main screen, which is play music, right? So in Sketch, it's actually really easy to simulate this kind of behavior. What you need to do is select the element that you want to behave as a trigger. And right here, where it says Prototyping, you hit the plus sign that says Add new link to layer, and then you hover over the art board that you wanna jump to. In my case, I wanna go to the second art board. And that's it, see this orange line? That's where it tells you that, hey, by clicking this next button in Prototyping mode, you're taken to intro-02, and it can do the same for the other artboards. Select the element, you can go to Prototyping and select Add link to Artboard, it does exactly the same thing, or you can just press W and then select the next artboard. And so on, you can do this W, select this one, and here, this is an album view, so maybe we'll tap that element and it's gonna take it to this album. And then we can also select the skip. It's gonna take me to play music, skip here, it's gonna take me to play music, and skip here, it's gonna take me to play music. All right, so that's how you can create a prototype by adding these links. Now, you can also add hotspots, and to give an example of that, we're gonna pretend that this bit here is a hotspot. And this, when you tap it, is gonna take you to this album screen. So what we need to do is create a link, we're gonna link it to the album music. So it says here the target is now album music, and then we can hover on this button where it says create separate hotspot layer, so we're gonna do that. Now, this hotspot acts like a mask around our main layer. So I can actually hide my main layer, but the hotspot is still there. So whenever I'm gonna tap or click inside that hotspot area, it's gonna behave the same way. It's gonna perform the same action, which is to take me to this album music. So with all said and done, let's actually hit preview, it's this button right here, and this allows you to preview prototypes. Now, we actually don't have a starting point set, so in my prototype, all I have is this play music artboard. But notice my hotspot area. It's where my cursor changes to the Mickey Mouse hand. So if I click that, it's gonna take me to this artboard or this screen. Now, to set a starting point, you need to select the first dart board and then go to prototyping. Use Artboard as Dark Point. Notice we have a little flag here. So now, when I hit preview, it always starts with my intro-01 artboard. So now if I hit next it's gonna take me to intro-02, intro-03, And then to play music. If I hit this, it's gonna take me to the album cover, and by using this drop-down, I can jump to any artboard I want. I can also set a different starting point. Like if I want play music to be my starting point, all I have to do is hit this little button, and now this artboard acts as my starting point, regardless of what I have selected here. So if I select this and I hit preview, it still opens up my play music artboard. And of course if I go to intro-01 and I hit skip, it takes me directly to my play music artboard. Now, let's bring back this layer here, and let's also add an action to this icon. This should take me back to play music, but let's do a different animation, because notice by default all our animations animate from the right. So every artboard comes in from the right side, okay? But on this one, I want to change it, I want to animate the artboard from the left. So we're gonna select that, and now you'll see that when I click this, the artboard comes in from the right side. And you have a couple of different options here, you can have the artboard come in from the bottom, the top, left, or right, or you can have no animation at all. That's pretty cool. Now, there is one last thing I wanna show you here, and that is fixed positioning. So you can select any element in your artboards and select fixed position when scrolling under prototyping. And that makes sure that when you're on a screen that's smaller than the height of your content and you need to do scrolling, this element stays positioned like this, it stays in the same place. It's a fixed element, just like you would do in CSS. All right, so that's how you can create a prototype. Now, how do you present it? We'll find that out in the next lesson.