In this lesson, we're going to be going over a very basic overview of balsamiq mockups and how to get around and I'll show you the different parts of the application and what they do. The first thing to note is the canvas. This is the blank area in the center, where you'll be creating your mock ups or wireframes. The basic process for creating a wireframe is to first select a control from this area up here, which we call the user interface library. It has different types of controls that you can add. There are two ways to add a control.

One is to drag it from the UI library onto the canvas. The other way is to simply double click it. The next thing to point out is this area over here, which is called the property inspector. This is where you can select and change properties for the various types of controls. So for example, the size of the text, the color, various things like that, depending on which control is selected, you'll see different properties there. Notice that When no control is selected, you'll see that the panel looks like this.

This is where you can edit notes for this particular mock up. Then you can either click the Save button or Command or Control and enter to save it. Each markup can have its own set of notes. Additionally, there is a property panel for the project as a whole, so you can enter notes for the overall project. And then there are some other properties for the overall project such as the font size, default selection, color, and then the skin, which we'll be getting to later. Next, over here, you'll see what we call the navigator.

This is where you have a list of all of your mock ups. If you want to create a new mock up, you click this plus button here. As you build your mock ups they will be previewed here. As you can see, when you have the thumbnail view shown, when you add controls, they get updated in the thumbnail as well. You can also rearrange them in a different order by dragging them. There's also the ListView, which you can see by clicking this icon.

This is useful if you have a lot of mock ups and want to see a list of all of them. There's also something called the thumbnail grid view. This is where you can see all of your mock ups as thumbnails at once. You can also rearrange them this way. This is a good way to see an overview of all of your mock ups. Let's go back to the default view.

Another thing you can do is turn the various panels on and off to use the space more efficiently or more to your liking. If you want you can turn off the navigator panel so that you only see the canvas. When that happens. You'll see some new icons appear so that you can navigate to the other mock ups that you have Or you can click on these arrows to quickly switch between them. You can also turn on and off the panel on the right, as well as the UI library. We'll be getting into later how you can add controls to the canvas with the UI library hidden.

One last thing here is that you'll see a small arrow in both the thumbnail and grid views. If you click on that, there'll be some other actions such as rename, clone trash and alternates, which is another topic for later. You can also just right click to bring up the same menus. If you want to quickly rename a mock up, you can simply double click and click Rename or press enter. To rename the project as a whole. You can double click on the name of the project and enter a new name.

In the next lesson we'll start getting into some of the controls and how to start using them.