Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Wireframing!
You have completed Introduction to Wireframing!
Preview
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