In this video, I'm going to show you how to add a prototyping application, Balsamiq for Google Drive to Google Drive. Then I'm going to show you how to edit and create prototypes with it. This step is totally optional. If you want to use the existing user stories and/or prototypes and just get to coding, that is 100 percent okay. This is just if you want to do some of your own modification of those inputs in the brief in your own copy of it. So that you tune your design a little bit. That interests you, great. If not, you want to get to coding, okay. So you'll need to do a couple things add the app and then download the file and make a copy of it, which is a little slightly weird the way it happens and there's a written tutorial in the course resources. Just look at the Getting Started with Balsamiq tutorial. Then the third step is I'll show you how to actually manipulate the file in Google Drive. So if you don't have Balsamiq, you go to Google Drive, go to more under the new file here, and I already have it but if you click Connect apps to drive, and you search for Balsamiq, with its weird spelling B-A-L-S-A-M-I-Q. Instead of seeing write it here, you'll see add it. We add it and then it'll ask you if you want to make this the default app for files of this type. You can say yes because it's just going to look at those Balsamiq files. Now, you'll have Balsamiq on your machine. Then when you click on the link to the sample profiles, you'll see something that looks like this. I've already added it to my drive, but you'll see a little Google Drive icon that says add to drive. Then you will have in your drive this public copy of the Balsamiq and then just like you did with the design brief, if you made a copy, you will need to go into your Google Drive, search for HVAC. Right-click on the file or two-finger click if you have a Mac, and make a copy because it won't let you edit this public copy of the file. Unfortunately, you can't do that from this menu just the way that this whole thing works. So you can see a copy of this file that I made from my Google Drive and now, I can go through and edit this. So this is an existing file. A couple things I'll point out. The basic metaphor here is that you pick these different elements that are available. Buttons, Containers. What I like about Balsamiq is that it sticks to well-understood mappings. These are all real interface elements that are in common use. So for example, if I download this button, I just drag it in, and then everything has certain properties over here. So if I wanted to make this 100 pixels wide instead of 93, I would just put that in here. So as you click on the items, the properties that you can manipulate appear here. If you want to make an interactive prototype which you really don't need to do for this class. But if you wanted to do your own interactive prototyping, the way that you do that is you just statically link from one of these pages in the prototype to another. So for instance, If I click this drop down here, I can see that it's got the link property, not all elements have that, some don't. Then I can link to whatever other page that I want, and then when I put this into play mode here, if I click here, I'll link this other file. So you can also create a brand new file from scratch using Balsamiq and just start from scratch if you want to do that. So that's a little bit about how to make your own prototypes, an optional step you can take to get your inputs ready for next week, when we start actually coding prototypes in HTML and CSS.
