Balsamiq Tutorial Pdf
Renau Sheard
Balsamiq Mockups is an effective tool for presenting the software requirements in the form of wireframes. This helps the software development team to visualize how the software project will look like in the very early stages of development. This is a small tutorial where we will cover all the basic steps needed to start with Balsamiq Mockups.
This tutorial is prepared for Wireframing enthusiasts, aspiring business analysts and UX analysts. This tutorial will provide all the basic groundwork required to get started in the world of Wireframing. On completing this tutorial, you will get a glimpse of the features of Balsamiq Mockups and their applications.
This tutorial is designed to guide you through creating your first wireframe. It will cover a basic overview of the product as well as some of the features and UI controls.
The content of nearly all controls in Balsamiq is defined by simple text. When a control is first added to the canvas, it will be shown in edit mode, often with hints about how to use it. For the Browser control, you can specify the title bar and URL text, or just use the default.
Continue by adding the following controls to the canvas: Title, Text, and Image as shown below. Note that alignment guides appear just inside the edges of the Browser Window control when you move them toward the edges and that the controls "snap" to these guides.
Tip: If you have trouble selecting a control that is in front of another control, try "locking" the background control using the lock icon in the toolbar to prevent it from being selected.
This window shows the list of all the icons included with Balsamiq. You can filter them by category or search by name. Once you have chosen an icon you can choose from one of six sizes. For this tutorial, select the Circle icon and set the size to "XS" and click "Select".
Tip: The "Icon Search" box in the Icon Property Inspector behaves like the "Quick Add" box and displays icons matching the text you enter (try typing "arrow", for example). Read more about adding icons via the UI library and quick add.
Add three more icons to the right of the Circle icon (use the Circle Outlined this time). You can also copy and paste once you've added the second icon. Using your mouse, position the icons next to each other. You can see that alignment guides appear both horizontally and vertically, helping you place them appropriately.
To group a set of controls, select them by drawing a boundary around them with your cursor or holding down SHIFT and selecting each one with your mouse. Then click the Group command from the Edit menu or press CTRL+G (on Windows; CMD + G on Mac).
Tip: Another way to select only controls that are in the foreground (besides "locking" background controls) is to hold down the ALT/OPTION key while dragging the mouse. This will prevent background controls from being selected.
Grouped controls can be identified by a light purple color and will remain grouped until Ungrouped (shortcut: CTRL/CMD + SHIFT + G). To align the grouped icons with the Image control, select them both and use the Align Center icon in the Property Inspector.
Commas are used to create tabs in this control, so you can create as many tabs as you like by entering additional text separated by a comma. Entering the text "Overview, Features, Design, Specs", for example, will create the tabs shown below.
Introduction to User Interface Design Through Wireframes This easy-to-follow course is intended for Product Managers, Entrepreneurs, and other non-designers who want to feel comfortable in the world of UI design.
In a previous tutorial we learned how to create a wireframe for a basic web site. In this tutorial, we'll go through the steps of creating a series of wireframes for an imaginary mobile banking application. Some other resources that might be useful in conjunction with this tutorial are the Application Overview and Tips for Working with Controls.
Start by adding the iPhone control to the canvas. To save time, you can type the word "iphone" into the "quick add" box rather than dragging the control from the UI Library. You can press the "/" or "+" key to send focus to quick add.
Next, we'll add a Text Title control and use the alignment guides to center it within the iPhone control. For the username and password fields, we can add a Text Input control, followed by a few tips and tricks. The first is to wrap text in dashes ("-") to show it as disabled. This gives the effect of showing the text as a placeholder that will get overwritten when the user enters their own information. After creating and formatting the username field, you can duplicate that field to quickly create the password field. The shortcut for duplicating controls is CTRL/CMD + D (full list of keyboard shortcuts here).
Next up is the save username checkbox, which consists of a Label and iPhone ON/OFF Switch control. Since this is a mobile app, we'll use the on/off control instead of a regular checkbox. To make it easier you can align and group these controls outside of the iPhone controls so that the other alignment guides don't interfere. Grouping the controls allows you to more easily center align them as a unit inside the iPhone control.
For the login button, we want a big, colorful button, so we can increase the text size, change the background color, and enlarge the dimensions of the Button control. For the "forgot password" link, we'll use the Link control.
Finally, for the icons, we'll add an Icon control and use the icon search to change it to a cloud icon. For the second icon we can again use the duplicate shortcut, and then change its size in the Property Inspector.
For this screen we'll have the background pattern of the iPhone control set to show the top and bottom toolbar areas, which we'll be using as a header and footer for icons. We'll extend the size of these areas with Rectangle controls. We'll also be using more iPhone-specific controls (the iPhone menu and iPhone button controls).
We'll then add some "legalese" that is often used in these types of applications. As the designer or developer, we just need to have a placeholder to remind ourselves that this space is reserved for a block of text. We can use the Lorem Ipsum shorcut to quickly generate this placeholder text. Do this by typing "lorem" in a Text Paragraph control and it will immediately fill with Lorem Ipsum text. We'll then center it and change its color to grey to make it less prominent (because, as we all know, users probably won't read it!).
For this, we'll start with the Icon and Text Label control, which is kind of a two-in-one control that's ideal for iPhone tabs. For the "Accounts" screen (which we're on), we'll use the dollar sign icon. We'll change the color to a light blue to show that this is the active tab. We can use the duplicate shortcut to create another icon and text label control of the same size, and position it inline with the first one using the alignment guides. We'll use an envelope icon for the "Deposit" tab and set the color to white to show it as not selected.
The last steps are to add a Pointy Button for the log out button, and label and icon controls for the logo. We'll remove the pointy arrow, since it's logging the user out, rather than taking them back or forward. We'll set the icon and label colors to white to make them stand out against the grey toolbar background.
Rather than adding controls to the wireframe first, we start by removing some controls from the middle of the Accounts screen and renaming the "Accounts" Text Label to "Transactions".
For the transactions list we want the first item to show as greyed-out, since it is a pending transaction (designated as "processing"). We also want the transaction date and vendor to be on separate lines. Like this:
At its most basic, it is just like the syntax we used for the Accounts list. That is: text, a comma, then the ":chevron-right-solid:" icon-in-text to create an arrow. But, in this case, we've also used some text formatting tricks to modify the way the text looks. We're leveraging several of the text style shortcuts in the same control.
Other than that, there's not really anything new on this screen. We're still in the Accounts category, so the tabs at the bottom don't change. Also, the icon is already there, we've just centered it in the iPhone control. And, since this screen is a drill-down from the Accounts screen, we're using the pointy version of the iPhone button to create a back button.
After changing the screen title, we can update the colors of the icons in the tabs bar at the bottom to indicate that, now, the Deposit category is selected. And now, again, we'll be doing something new with the iPhone menu control. This time, we want to show icons next to the text in the menu. To do this, we can do this by using the "Space for a big icon" text formatting syntax ("__ "), as shown in the template when the control is added.
After that, we reposition the Lorem Ipsum text and add two more icons. For the icons, we'll add a camera icon, set it to the right size and color and position it using the alignment guides and the arrow keys on the keyboard.
For the Camera screen, we want to create the effect of a mobile phone camera window looking down at a check. For this screen we'll be using some of the more general-purpose controls, the Rectangle control in particular.
For the alignment guides (the "frame" inside the camera window), we want a rectangle with only the corners showing. We can do this quite easily by layering three rectangle controls over each other. The first one will be a white rectangle with a black border. This is what will actually be shown on the screen. Next, we want to cover up the middle parts of each border. So, we'll add two white rectangles and turn off their borders. Now we can lay one across the horizontal borders of the bottom rectangle and another across the vertical borders. Changing the overlay rectangle colors to grey, it looks like this:
c80f0f1006