FREELessons: 19Length: 2.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Previewing a Sketch Prototype

Let's continue our look at Sketch prototyping by seeing how to preview a Sketch prototype. There are multiple ways to do this, and in this lesson, we’re going to use each one and see what they’re all about. Let’s begin.

4.2 Previewing a Sketch Prototype

There are multiple ways to preview a sketch prototype, and in this lesson we'll go through each one and see what it's all about. So the first way, well, you've already seen it in the previous lesson and that is to preview directly in the sketch by using the preview button. This will open up your starting point art board, but you can use this drop down to navigate through each one. Just like that, and you can also use it to set or remove starting points. So if I wanna remove this one from the play music, I just do that. And if I wanna set it to the intro, I just do that, it's really, really simple. Now, the second way is to use Sketch Cloud. Sketch Cloud is a service that you have included with your sketch subscription. So you can click this button, you will sign in with your sketch account, okay? And once you're logged in, you click this button again, upload to Sketch Cloud > Upload document. And you can see here that uploads are private. So let's do that. And that opens up a link in Sketch Cloud. And you can see the document pages right here. You can click on each one, you can see a preview, and you can also use this page to collaborate with others, add a discussion and talk about this. And you also have a prototype section that you can click and it's gonna load that prototype. And you can navigate through it just like I showed you in sketch. It's looking a little bit weird here because the background color of the art boards is not included. But other than that, the functionality is exactly the same. So that's method number two for presenting a prototype. Now, the cool thing about this approach, by using Sketch Cloud is that you can share this prototype with others, right? You can add more people here, team members or even clients, and they can view that prototype online at any time. That's pretty cool. Now the third way to present a prototype is with an app called Sketch Mirror. Now Sketch Mirror is an iOS app, okay? So I have my iPhone here, And I'm gonna to open up mirror. Now, the the trick about this working is that you need to connect your phone and the computer that's running Sketch on the same WiFi network, okay? So in my case, let me just quickly check, it is on the same WiFi. And my phone is on the same WiFi. So now in Sketch, I have a little button here that says Connect iPhone. So I'm gonna click that. And right away, it tells me I have a sketch document opened on this computer. And then, I have all my pages here. Not sure if you can see this properly. I have all my pages, I can open any of them, and I can navigate through them just like I would on, My normal prototype, just like we were doing on the computer. So that's pretty cool here. Here's the album cover, Here's the back button. There we go. So that's a nice way of previewing a mobile app directly on your phone, because you can see the entire screen, especially if you're designing at the correct screen size. You can go through it, go through the app just like you would the real thing, and that is very, very good. Now that's how you can create and preview prototypes in Sketch. Now, prototyping is mostly a collaborative process, right? You need to have a team with you to showcase these things or even clients. And speaking of collaboration, Sketch is actually giving us a lot of options to make that process a lot easier. And we'll start exploring those in the next chapter. And in the next lesson, we'll talk about exporting assets from Sketch. So I'll see you there.

Back to the top