We're finally ready to start building our first mock up. Let's start with something relatively basic. We'll build a login page for a new music app called balsamic music. I'll start by dragging a window control onto the canvas and giving it a name. I'm going to customize the properties a bit to make it look how I want and then resize it. Next, let's add a big title and logo to the screen.

I'll use the image control and select an image that I've already imported. I could also just choose it from the assets category of the UI library. Then I'll use the alignment guides to align them. Now I'll group them to make it easier to align them with the other controls I'll be adding. Now let's build the login form. We can switch to the forms category of the UI library to see what we have available to work with.

I'll use the label and text input controls for the user name field. Now for the password, I can just duplicate these two controls and change username to password. Now I want to show a checkbox to allow the user information to be remembered. I see the checkbox control and UI library, but instead of dragging it, I'll use the quick add search to add it. Once you get familiar with the controls, this will become a much faster way to add them. The control names are also alias to other common names.

So you can just try some keywords if you don't remember the name of the control. The combo box control for example, shows up if you search for drop down pull Or list. I'll edit the checkbox control and move it below the password field. Now I'll add a link to help the user if they've forgotten their password. Since I'm happy with the content and alignment of these form controls, I'll group them so that I can move them around as a whole as I keep building the mock up. Now we'll add a button to login.

Again, I'll use quick add, you can press the forward slash key to put your cursor in the quick add box. I want it to be a bit bigger than the default size so I'll increase the text and resize the button At this point, I think I'll do some fine tuning on the spacing and alignment to see how it looks so far. They're better. Just for fun. Let's add a few more controls to complete our first screen. balsamiq mockups has the Font Awesome icon set, so there are tons of icons to choose from.

The icon and label control is a nice way to use an icon and text together. I'm going to use some of the text markup codes that we learned earlier to make this text look like a link. One last thing, I'll add a rectangle around the whole thing to make it stand out a bit more, I can right click to move it to the back. I'll add a background color to better define it. Colors and wireframes should be used sparingly, especially in the early phases. shades of gray can be helpful for defining different sections of the page.

But anything more than that can be distracting at this point. Now align everything together. Notice that the groups I created earlier make it easy to center things There we go. We've just completed our first mock up.