Demonstrating Wireframes in Balsamiq18:46 with Hope Armstrong
In this video, we'll jump right into Balsamiq and start making our wireframe.
Balsamiq Keyboard Shortcuts
Quick Add (mentioned in course)
- Sending focus to Quick Add:
/ or +
- Navigating the Suggestion List:
- Sending focus back to the Canvas:
- Add control at cursor position:
Other Balsamiq Efficiencies:
- Lorem-Ipsum generator: type "lorem" in a Text or Text Area control.
- Balsamiq Documentation: Transforming Control Types
- Wireframes to Go: A free user-contributed collection of ready-to-use UI controls and design pattern libraries to extend the collection that comes with the built-in UI Library.
"Quick Draw" tutorial
Transforming controls tutorial
- The Balsamiq "Our Tutorials Site"
More Balsamiq Resources:
To create a new wireframe, click the plus icon in the top-left. 0:00 Let's name this one Payment. 0:06 You can right-click to rename, or you can double-click it. 0:09 First, we need a container. 0:16 We'll be creating another iOS app, so let's choose an iPhone container. 0:18 Great, now we have a view port. 0:25 For this project, we'll be focusing on a different screen, the payment page. 0:27 Once again, we'll be consulting the user research. 0:32 Consider the users goals and 0:36 emotional states as you iterate on the user experience. 0:38 What might user want to see the payment page? 0:42 Businessman Brian, uses his company card to pay for 0:45 his rides during business trips. 0:49 He also uses the app for personal rides, so 0:51 he want to easily be able to distinguish between his payment options. 0:54 If he accidentally submits a personal expense to his company, 0:59 he'll get in huge trouble and may even lose his job. 1:04 Now that we have a general idea of what we want to create, let's add in a navigation. 1:07 Once again, I'm gonna add in a back button. 1:14 Now I wanna add a title for this screen. 1:25 In Quick Add, search for Text. 1:27 A box of pre-formatted text will appear. 1:36 Double-click to edit, we don't need any of these formating options, 1:39 we just want plain text. 1:44 So I'm gonna delete all of this and type Payment. 1:45 Click the canvas to access the edit mode. 1:50 While the element is still selected, 1:55 choose the center align icon and change the text size to 20. 1:59 Also, resize the elements so it's easier to keep it organized. 2:09 If you have too many elements overlapping, 2:14 it becomes hard to select the ones you want. 2:16 Now, I wanna contain the navigation. 2:19 Search for line in Quick Add. 2:22 Choose H.Rule which stands for horizontal rule. 2:27 Now we're ready to add payment options. 2:43 First, I want a list of credit cards. 2:46 In iOS there's a UI element called an iOS menu. 2:50 Find it by searching for menu in Quick Add. 2:54 Once again it shows you all the options upfront. 3:01 Highlight the space for a big icon one. 3:07 Since I anticipate needing space for credit card icons, 3:10 double click the menu to edit it. 3:15 Delete all the lines except for that one. 3:18 Let's show a saved visa credit card, which is previously entered and 3:26 the option to add a new card. 3:31 The formatting here is just two underscores and then a space, 3:36 then you can write whatever text you'd like to be displayed. 3:39 I'm gonna get rid of the border, and make this full width 3:54 I see I have an extra row he, so I'm gonna go back in to edit mode, 4:06 delete the extra line, and now I just have two rows. 4:11 Now, let's search for icons. 4:15 Here is the Visa icon. 4:22 It's a little too big, so let's change it to small in the properties. 4:27 I'm gonna move it left of Visa. 4:35 Now let's find a generic credit card icon. 4:39 Once again change to small. 4:47 Since each one of these rows will link to the edit payment view, 4:54 we need to add an icon to indicate it expands. 4:58 Search for angle in Quick Add. 5:01 Choose angle-right. 5:05 I'm gonna make it small so it matches the other icons. 5:12 As you move it into place, 5:16 guides will appear to help you keep everything aligned. 5:18 So I need another one of these arrows for the next row. 5:23 A quick way to duplicate it is to hold down Shift+Option on your keyboard as you 5:26 drag it to the new line. 5:31 Great, now let's just nudge this section up a bit. 5:34 Great, let's pause for a moment and think about social Sarah. 5:41 She mostly uses the app to get home safely after a night-out partying. 5:46 In her partying state, she frequently fumbles on her phone and 5:50 has troubled typing. 5:54 We want to create a payment process that's as easy as possible, and 5:56 requires minimal typing. 6:00 Since this is an iOS app, it'd be helpful to offer Apple Pay as a payment option. 6:02 Once it is set up on a user's phone, 6:07 it just requires a thumb print to accept a payment. 6:09 This would perfect for Sarah on those late nights, when she's outside a bar, 6:12 surrounded by strangers trying to get her attention, 6:16 while she fumbles through her purse, trying to find her credit card. 6:19 I'll repeat the previous steps to add in Apple Pay. 6:23 Now let's consider a businessman Brian's experience. 6:30 He uses a company credit card to pay for his rides. 6:33 How might we help him distinguish his personal Visa card from 6:37 his company Visa card? 6:42 I could add a label to say the Visa card is a business card. 6:44 I'll specify it as the default one since you may have several business cards, 6:52 but may use one primarily. 6:58 Now this is looking a little cluttered. 7:00 What's another way we could solve this? 7:02 How about separating the cards into two different lists. 7:05 Let's create another wireframe with this layout. 7:09 In the bottom right corner of Balsamiq. 7:12 Locate the alternate version section. 7:14 Click the plus icon to make a new version. 7:17 This creates a copy of your original wireframe which you can iterate on. 7:20 Double click the alternate version text, and change the name to Two Payment Lists. 7:25 On the canvas click and 7:32 drag a rectangle selection around the list to select all of it. 7:34 Press Shift + Option on your keyboard to duplicate it as you drag it. 7:38 Now we wanna add section headers to denote personal and business. 7:50 I'm gonna replace the business Apple Pay option with a Mastercard. 8:27 Double click the icon to quickly edit it. 8:38 This opens up a list of all the icons to choose from. 8:41 Let's get rid of the extra business text that we have here. 8:50 Let's keep default since it is handy to say what the default card is for 8:58 each category. 9:02 I'm gonna keep the parentheses cuz it does help it stand a bit more if 9:05 you're scanning this really quickly. 9:08 I think it's a bit redundant to have the add a new card row listed twice, so 9:20 let's just put it at the top of the screen. 9:25 I'm gonna add a line to separate the add a credit card and the stored credit cards. 10:49 Now in this version it's a little hard to tell the list apart from the added credit 11:12 card section. 11:16 So I'm gonna add the borders back into the lists. 11:17 I'm gonna select both and click Show Border, I'm gonna insert them above. 11:21 The guides will be your friend here, cuz they'll help you keep everything aligned. 11:53 Looking good. 12:07 I like how the sections are more clearly defined now. 12:08 If you wanna compare the two that you just made, 12:11 just click through to the Alternate Versions. 12:14 So here's the first one, here's the second iteration. 12:17 It's good practice to rename these variations so 12:24 that way you keep track of what you did. 12:27 Let's name this one Two Payment Lists There 12:29 are several more iterations I could make to this screen, so 12:35 I encourage you to pause and create your own variations. 12:38 The next part is to imagine what it might look like to add a new card. 12:43 Since this is a wireframe for a whole new screen, 12:48 instead of creating an alternate variation, I'm gonna click 12:51 the plus icon in the top left of Balsamiq to create a new wireframe. 12:55 Double click on the title to rename it too. 12:59 Add a credit card and click Rename. 13:02 Go back to your previous wireframe, select it all and press Ctrl + C. 13:08 Then return to your new canvas and press Ctrl+V to paste it. 13:18 Double click the title of the screen and rename it to Add a credit card. 13:24 Another way you can do this is to hover over the bottom right of the previous 13:38 wireframe, click on the arrow that appears and choose Duplicate. 13:42 All right, so we actually don't need the majority of this so 13:50 I'm gonna delete most of this. 13:53 The fields we'll need are name on card, 13:58 credit card, expiration date, CVV, Zip code and 14:02 option to set it as personal or business. 14:07 And a checkbox to denote it as the default card. 14:11 In Quick Add, search for Text Input and Text to create the form. 14:15 Now, for the credit card number input, I'd love for 15:19 the icon to change as the credit card is entered. 15:22 So I'm gonna add a default credit card icon as the default icon. 15:25 I’m gonna make this extra small so it’ll fit in. 15:34 You can nudge the icon with your up and down arrows on the keyboard. 15:45 For the next section of the form I wanna have a drop down. 15:49 The dropdown will be for personal card, or business card. 15:53 I also wanna checkbox so that the user can select if it's the default card. 15:56 Search Quick Add for dropdown. 16:01 Another name for dropdown is ComboBox, so we're gonna choose the first one. 16:05 Once again, just double click to edit the text. 16:13 I'm gonna set Personal card as the default, 16:22 since that's the majority of cases. 16:25 Now, I'm gonna search for checkbox. 16:30 I wanna add a line in between the normal credit card options and 16:47 these additional ones such as personal, and save as default. 16:51 So I'm gonna add another horizontal rule here. 16:57 Finally, we just need a button so that you can add a credit card. 17:24 This is looking pretty good. 17:45 Now I wanna show you a cool part of Balsamiq, 17:47 which is the ability to add interactions. 17:50 Let's switch back to the payments screen. 17:53 Click the Add a credit card link, and 17:56 in the right panel add a link to the Add a credit card wireframe. 17:59 This will make this link to that screen. 18:03 Let's enter the presentation mode to see it in action. 18:06 Those are just the basics. 18:18 Keep iterating on your own to find other ways to add a card. 18:20 As you empathize with Social Sarah, who was often adding chaotic environments, 18:24 we want to making adding a card as easy as possible. 18:30 A feature that would help her and others, is the ability to automatically add 18:33 a new card, by scanning it with a smartphone camera. 18:38 On your own draw the wireframe needed to add this functionality. 18:41
You need to sign up for Treehouse in order to download course files.Sign up