FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Screen Settings and Modes

Hey, everyone. Welcome back. In this lesson, I'm gonna show you a few more options that you have available to you. Now that you have your prototype in place and all your hot links ready to go from the previous lesson. So we're still in this same preview mode here with the screen. I just wanted to show you some additional features that you have. We really looked at the hotspots area last time, but we also have a comment mode here where you can create and read comments. We're gonna look at that more in the sharing and feedback as once you create a prototype, you're more than likely not going to be using that right away. But if you needed to make a comment and say for example, a good example would be these right here. So if I just click and drop this and say, Icons not active yet. That way if I really have a client who's not quite familiar with this, they can immediately see that those icons are not active. We don't have them doing anything at this moment. So it's an opportunity for people when they come in and review this. That they can click on that and go, oh okay, these are not viewable. So you can leave your own little preliminary comments if you want and notice you can click and drag this wherever you like. So that's one little cool tip for you. Also, if you're creating multiple versions, you have that history mode again, but we right now just have the one that we've created. So we haven't added any new screens to replace that. Now for example here, you do have the replace screen option. So once you've reviewed with people, you're gonna come back in here and maybe do a quick replace of your screen, so that takes you back into Photoshop where you make little tweaks and then you can go ahead and replace that screen. Now, a little tip here for you, you could just create a new screen in Photoshop and still do the sync method. You don't necessarily have to drag and drop here unless it's more convenient for you to do that. The other thing that I wanna show you, and I'm gonna go back to Preview here and come out of the History mode, is this configuration. Each of the options that you pick here is going to provide you with different configurations. So we have said that we're sticking with a mobile application, so we're pretty much the same here, based on what it is that we choose. But if you were using a web application, you have then features here that are gonna allow you to specify specific settings for that scenario. So that's kinda cool that these change out. So what you have here is you can determine whether or not you're working with a light or dark status bar style here. You can say that your design starts below the status bar if you want to. And if you click that, notice that it jets it down. So if you've not accommodated the status bar in your design, then you can click that and it pushes it down to accommodate that and it fits a little bit more in mind of your original design. And then again, you can change the foreground to light or dark and you can also change this background to any color that you want. So if you have something specific, you can do white or black. And you can come in here and create your own background as well, see, so we can do any color that we want if that is something that pertains to your situation. You can also hide the status bar, but that's for desktop viewing only, so the status bar is obviously going to exist in your mobile device. You can't remove that entirely. So if you check that it's only going to remove it from this view here, but it does add to the overall authenticity of this mockup by keeping it there. But it's up to you. And then if you've made changes, you can go ahead and save that out. So that's some of the options that you have available to you to kind of further enhance and further tweak what you have available. In the next lesson, we're going to look at how you can generate assets from your prototype right in InVision.

Back to the top