7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.4 Replacing Screens and Version Control

Take client feedback and apply it to your mock-up. Then replace your screens before sending them back to the client for further feedback.

4.4 Replacing Screens and Version Control

Hi everyone. In this final lesson for our prototyping with InVision, I want to share with you how to replace your screens and version control. This is gonna come in handy as you're working through your prototypes and your mockups, and you're compiling all of that feedback from your clients and developers and anybody else on your team. And how to apply all of that through different versions, and then being able to go back. Because we've all been there where you're going through something and then, hey, turns out what we did a month ago, a couple weeks ago is really what we want to go with. So how do we backtrack? Well let's imagine for a second that the comments that Steve left us where he wanted to see the bar in orange or teal is really what he wanted to do. In the previous lesson he went back to gray. But what happens first of all if you don't have access to the Share option from Photoshop because you don't have a Mac. Or you just wanna upload your screens and just have those as options even if he did decide to go with gray, you want that just in case he changes his mind. So let's go back to Photoshop and you're gonna see here that we have that orange back in place here. So we're going to save this out. Now one thing to note that when you're replacing your screens there's a couple of ways to do this. You can save this out as another PSD. You can save this out as another JPEG and then just replace the screen. But the key thing to make this really easy is to be able to use the same file name. And that's going to ensure the consistency across your screens, so that you don't end up adding more screens. You want to replace the screens that you already have. So if you're using the sync method, your desktop sync method or through Dropbox, you can go ahead and just save this PSD and it's going to sync that. And you wanna make sure that you're actually saving this in your sync folder to be able to do that. So remember that you wanna save this in your source files. Okay, and notice that this is Mockup01. So we wanna override that to Mockup01 and it's going to replace that document for us and that's going to end up syncing across to our screens here once that kicks in. Okay, so you can see that it successfully updated that asset. So now it's just going to sync across our screen here. Okay. And so you can see now that this screen has come across and it's replaced our Form-Filled screen, and then the last screen is syncing across. All right, and now you see that's coming across too. It takes just a little bit of time, depending on your internet speed. But now you can see that our three screens have now synced. So if we come in here, it's updated that screen to the orange color now. All right. So now we see the orange. So this is what our prototype now looks like. All of our screens have been updated to reflect this new color. And then of course the last one hasn't because we didn't change that last one. So I wanted you to see the difference, if you don't change a screen, it still comes across untouched. So if we come back out here, we can now see that we've updated and replaced our screens through Sync. You can do the same thing by uploading new screens here. But again, you wanna make sure that you're using the same naming structure so that it actually replaces this option. You can also replace your screen inside here by coming over here to replace screen. And you would drag and drop that image directly into this area and it's gonna replace that screen for you. So there's several different ways that you can do this. The desktop sync is gonna be the easiest because you're already working in Photoshop and you just wanna be able to replace that. So that's going to be the easiest option, but if for some reason it doesn't work or you need to come in and do this manually, you can drop your screen right in here and it will replace that for you. So that's how you replace screens. Now what happens if you need to go back in time? Well if you come over here to activity, you're gonna see that we've updated our screens and you can follow through all of this activity here and be able to see this flow. But if we go back to our project screen, and come in here, and we come over here to the little History Mode, we're gonna see some timestamps here. So we can see what we've just done, we can go back in time to what we did before that, and then we have another version here at the very beginning when we created this project. So we can go back in time, as we've changed out our screens, and you can have a lot more than these if you need to. You're always gonna see the latest version. But, just by coming in here to the History mode, you can go back in time. If somebody says, hey, I really liked the way that version was, it's there for you. So one of the things that's awesome is if you lose track of your files on your own computer, this is a great way to keep track and see how things are flowing throughout your entire workflow. So it's going to make it a lot easier. All right, so now you've seen all that you can do here in InVision to make your mockups and your prototypes come to life, how to share them with everybody. We're gonna wrap up this course in the next lesson.

Back to the top