FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Create Project and Add Screens

Hi everyone, welcome back, and now it's time to really have some fun with InVision. We are going to take the Photoshop prototype that we created earlier in this course, and we're going to prep it for syncing with InVision, and I'm going to show you that step first. It is the fastest way to get your screens created and your projects created with InVision. And what I'm talking about is the sync functionality of InVision. So when you download the InVision sync app, and just for your reference, you can get that here with desktop sync. So you can download it for Mac, or you can use Dropbox. They're gonna be very similar depending on what you want, because you're just using a folder that's on your computer to sync across, so that's going to allow you that sort of flexibility. So when you do download the application, and you're not using Dropbox, but you're using the InVision Sync Folder. You have the option here to open this folder, and you get something like this. So it's tied to the email address that you use for your InVision account. And if we double click in here, we can easily create a project right in this folder. The other way to do that would be a longer way where you have to go here to create your first project, give it a name, and then you would determine what your application is going to be. And in this case we're going to use an iPhone Portrait. So you can do it either way, but we're going to do it the fast way which is using the Desktop Sync tool to do that. So we're going to right-click here and create a new folder. And now the folder name is going to be specifically called what we want this project to be. So this is AcmeCo Mobile Site. Something like that. Give it a good name. Something you're going to recognize, especially if you have a lot of different projects you're going to use. You want to label this accordingly. If we go ahead and hit enter, it's going to create that folder for us, and then you get an option up here where we've created that project. So it happens relatively quickly. If we go ahead and double click, automatically we have two new folders, a screens folder and an assets folder. This is really awesome because now just with that click we have an opportunity here to sync up with new screens and then assets depending on what we do with our Photoshop file. So if we go back to our project here, you'll see that automatically we now have a new project. It's completely empty, but it's named exactly like what we had for our folder, so it's ready to go. So if we go back to Photoshop, you can see this is the mockup we created. This is the prototype that we created in this course. But now we need to do a few things to set this up. If you know that you're going to be using something like InVision to create your mockup, the steps I'm about to show you I would advise doing all the way at the beginning that way you just work it into your work flow, and you don't have to do it at the end. But sometimes you're gonna be creating a mockup and not really knowing what the end result is going to be, so it's okay with the naming structure that we did early on, but now we're going to tweak it just so that it fits with InVision's guidelines. There's three important things to note when you're thinking about naming your layers or your layer groups. What we wanna do is, we want to use InVision's awesome tool set, here, that allows us to name our layer groups, the folders, and then our individual layers if needed that's going to automatically add screens and assets to our projects. This way we don't have to do it the long way, meaning that we're uploading it within InVision itself. Just by naming certain elements in our Photoshop document, it's going to do that automatically. So why not do that it if it's going to save you time, right? So there's three different symbols that you need to know and that's gonna help you work this into the InVision workflow. The first one is the plus sign. The plus sign that you add before any layer group or layer itself is going to create a screen. So, a good example of that would be our form unfilled. This is what our general form is. So that could be a stand-alone screen. All you have to do is double-click this and call it the same thing but just add a plus sign in front of it. Now when we save out our Photoshop document, it's going to create a screen for us based on what you're looking at right now. But we're not done yet. So we're gonna continue before I show you exactly what happens with the syncing aspect. So that's the first step, is to really define what your screens need to be. So our first screen is the unfilled version. But we need to make some tweaks here because the set up that we had isn't going to necessarily work with this naming structure going forward. But that's all right. Basically, we just need to move things around, and then it'll be ready to go. So the next stage is when we click on the first name field here, and we're going to mimic typing in the first name. So that's where we have our filled form. The only problem is is that if we made that a screen, you can see where we have some crossover of our text. The quick way to make sure that doesn't happen and that you create a screen is to develop the next step where you're using the asterisk. That indicates a global layer that's going to render on every screen. Now, that would work if we were just creating a form across all of our screens. But we have a situation here where the confirmation page looks slightly different. So instead of doing that the faster way is just to copy the elements of this background into our form filled section that way we don't run into that problem. So what I mean is, I'm going to leave the first name in the email address, and everything underneath that, I'm going to copy into the next folder. So let's go ahead, all the way down to form-container, click and drag to duplicate that, make a copy, and then we're gonna drop that into form filled. And now you notice that we don't have that overlapping of Email and First Name, because we've just basically created a duplicate of our form-container information. So now this is what it is filled. And this is what it is unfilled. Essentially identical. The other thing that we need to do is make sure that the logo layer is within our Form Unfilled screen now. So we're just dragging that out from where it was, and we're putting it inside. So the next step is to create these additional screens. So we have our main screen, which is the Form Unfilled, and that's this screen. So the next step is to have the Form Filled screen. But we really don't need to create a copy of everything. So the other symbol that you need is the ampersand. This is perfect for screens that are just mimicking subtle changes. So in this case, we are just changing two fields here, everything else is virtually the same. So all we need to do is put an ampersand in front of the title, and then let's go ahead and click and drag this right inside our screen. That way we have the base screen is still our form unfilled, but the fields that fill in are what we really wanna pay attention to for the second screen. The same is true for the confirmation screen. This is really the only area that we've changed. So we can go ahead and add an ampersand in front of confirmation page group and do the same thing. Drag it down, and so now everything is within our main form screen. But we're gonna get a second screen for our confirmation page, and then another page for our Form Filled screen. So there's one other thing that we need to do, and that's accommodate our footer and background graphics. These are graphics that appear on every single screen regardless of what's going on. So what we wanna do here is put an asterisks in front of these two groups. And what that's gonna do is make sure that, when we create the screen, it's also going to add the footer and background to every single screen for us. This means that we don't have to save out three individual JPEGs. Invision's gonna do this for us with the syncing magic that happens by naming our layers accordingly. So then when you're ready to save, you just wanna make sure that you go to Save as, and you wanna make sure you're putting this in your Acme Mobile Site source files folder. So we go to the InVision sync app here, click on our name, click on the project, go to Assests>Source Files. And make sure that you're saving a Photoshop file here, and go ahead and hit Save. And what's gonna happen is it's gonna take a little bit of time depending on how big your file is, and your Internet connection speed. But ideally what should be happening here is this should to sync. So when we go in here to view our project, you're immediately going to be given the option to choose Mobile Device. And we want a Portrait iPhone. We hit Continue. And then over time, you're gonna see that this starts to sync with what's happening. You can see that we've successfully updated our asset. And now all of a sudden, we're starting to sync those three screens that we created in Photoshop automatically. This is such a cool thing. It's a timesaver for you so you don't have to back and forth and drag-and-drop. Now remember, you can always drag-and-drop if you want to, but you also have the awesome opportunity to create this automatically by going back in Photoshop. The other cool thing is if you notice that you made a mistake, you can go right back into Photoshop, make the changes that you need to, just hit Save, and then it's going to sync back automatically. So now that you have your project ready to go, we're gonna move these around, you can click and drag and we want our Unfilled first, our Filled, and then our confirmation page. I like to put the screens in the order that I'm going to interact with them throughout my process. It just keeps things cleaner. The other thing that you'll notice is that your screens are now named exactly to match what you had going on with the layering. If you notice that something's not right, you see that the Form Unfilled is across here and that's not necessarily true, you can definitely rename this and just say Form Confirmation Page. And then you might just say Form Filled. So if you did make a mistake or you just don't like the way this works, you can rename it on the fly. That's an awesome thing to do right away. You can also move them around like you saw, and you see that we have the opportunity here to upload an icon and a loading screen for our application if that's part of what we want. This is a mobile version of the site, so we want people to land right on this first form screen. And you can see it takes a second to load. And there it is. So now we've successfully brought in our project and our screens into InVision. And now the fun begins where we get to add some awesome interaction into this to create this interaction that we need for our client to then review and give feedback on. So we're gonna do that in the next lesson.

Back to the top