Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll jump right into Balsamiq and start making our wireframe.
Further Reading:
- Sending focus to Quick Add (mentioned in the video):
/ or +
- Navigating the Suggestion List:
↑↓
- Sending focus back to the Canvas:
ESC
- Add control at the cursor position:
SHIFT+ENTER
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:
"How Does Balsamiq Compare to Other UI/UX Tools?"
Youtube: Balsamiq "Live Wireframing Sessions
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 the user want to
see on 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 here, 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up