Balsam Iq Manual

Tamaia Alsheikh - 2u11 t.al-sheikhmux.ac.
uk IBCNiuulesex 0niveisity
1
!"#$"%&' %")*"#

!"#$"%#&
Balsamiq Nockups is a piogiam that is piouuceu by Balsamiq Stuuios (founueu
2uu8). It is a ielatively new piogiam that allow useis to cieate wiiefiames that
feels like hanu uiawing a uigital foim. Balsamiq makes it easiei foi uesigneis,
piouuct manageis, uevelopeis anu clients to cieate, euit, mouify anu move
aiounu components to ieach the best uesign befoie ueveloping the actual coue.
Although it is new, it is one of the most wiuely useu piogiams foi cieating
wiiefiames in the inuustiy of BCI uesign.
()*+),%- .)%/ &%/01&

1- Quick Auu tool: This is the fastest anu easiest way to auu 0I contiols.
Entei the name of the contiol that you woulu like to auu anu click on the
uesiieu name to inseit it to the mockup canvas.
2- 0I Libiaiy: a tool to view all 0I contiols (0IC). To inseit a 0IC, select anu
uiag it to the 0I mockup oi uouble click the 0IC.
2- 0I Libiaiy
4- Nockups viewei
1- Quick Auu tool
S- Nockup
Canvas
Image 1

Tamaia Alsheikh - 2u11 t.al-sheikhmux.ac.uk IBCNiuulesex 0niveisity
2
S- Nockup canvas: This is the main aiea wheie mockups will be cieateu. You
can auu, euit, align, gioup .etc youi 0ICs using all available space.
4- Nockups viewei: This is a tool bai that shows all open mockups. The
active mockup that is cuiiently being euiteu in the mockup canvas is
shown in blue. If you hovei the mouse ovei the black pait of the viewei, a
plus sign shows which you can click to auu a new
mockup.
2+%/3 24 51/6$1*+ 72489
:;# <$1=#$6> 4/+=#561$
The piopeity inspectoi is a gioup of
contiol that appeais automatically
besiue any 0IC that you inseit to the
Nockup canvas. It incluues a set of
stanuaiu opeiations such as euit, gioup,
align, layeiing, size. It also incluues
special contiols that appeai only foi a
specific gioup of 0ICs. If you hovei the
mouse ovei any contiol insiue the
inspectoi, it shoulu show its name anu
keyboaiu shoitcut (if any) in yellow.

?00%/3 248
You can inseit a new 0IC using
1- 0I Libiaiy uesciibeu above.
2- Quick auu tool
S- Copy anu paste an existent 0IC on the canvas by clicking on "Copy"
commanu in the piopeity inspectoi oi holu uown ALT (0PTI0N key
on Nac) anu uiag the selection.
@)>#$%/3

Layeiing is a way of changing the
oiuei that 0ICs appeai in ielation to
each othei on the canvas i.e. which is
on top, which is below etc. You can use
any of the following commanus foi
oiueiing fiom the piopeity inspectoi:

Senu to Back: Position the selecteu
0IC at the veiy last layei of the canvas.
Senu backwaiu: senu the selecteu 0IC
only one layei backwaiu.
Biing to Fiont: Nake the selecteu 0IC in the
fiist layei
Biing Foiwaiu: Biing the selecteu 0IC only one layei foiwaiu
Piopeity Inspectoi
Image 2
Layei 1
Layei 2
Layei S
Image S

S

Remaik: iemembei that you can always hovei ovei a contiol in the piopeity
panel to know its name anu keyboaiu shoitcut.

A#*#56%/3
Theie aie thiee ways to select multiple 0ICs.
1- Bolu the shift key anu click the contiols you woulu like to select.
2- Click on an empty place on the canvas then uiaw a iectangle aiounu the
0ICs you woulu like to select.
S- Click Ctil+a (Cmu+a on Nac) to select all 0ICs in the canvas.

B$1C=%/3
uiouping allows the usei to tieat seveial contiols as one contiol. In oiuei to
move, align oi iesize oi apply the same settings to moie than one contiol,
it is easy to gioup them. Foi example, if you have a Winuow Name, Text
Aiea anu a bottom (As in image 4a), anu you woulu like to move all of
them to anothei position in the canvas, you can select all of them anu
choose the "gioup" icon fiom the piopeity inspectoi.

When you select 0ICs that aie gioupeu, they become puiple. This is to
uistinguish gioupeu anu ungioupeu contiols. (see image 4b)

!"#$%&'("#: You can always ungioup the contiols by selecting them anu
choosing the "ungioup" icon fiom the piopeity inspectoi.

)*+("# * #$%&': you might neeu name the gioups of 0ICs that you have so that
you can easily keep tiack of them. uiouping is paiticulaily impoitant in cieating
templates anu Pioject assets (foi moie uetails, see the templates section). You
can name a gioup by selecting it then enteiing a name in the piopeity inspectoi.
Remaik: You neeu to SAvE the file fiist to be able to name a gioup.
Euiting a specific 0IC in a gioup:

Image 4a Image 4b

4
-.(/("# * #$%&'
To euit a specific 0IC, uouble click the gioupeu 0ICs oi select + Entei. The sign
appeais on the top left coinei of the canvas inuicating that you
aie in the euit moue of the gioup. To exit the euiting moue, click on the
home icon of the sign.

@15D%/3
You can lock a 0IC oi a gioup of 0ICs to pievent it fiom acciuental movement oi
euiting. Lockeu 0ICs cannot be selecteu, moveu noi euiteu. In some complex
wiiefiames, it is iecommenueu to lock 0ICs that you aie uone with to avoiu
acciuental movementeuiting.

2/*15D%/3
To unlock a 0IC, iight click on it anu choose "0nlock |name of the contiolj" oi
"unlock gioup" if you aie unlocking a gioupeu 0ICs

451/+
Balsamiq has built in icons that you can put on some 0ICs e.g. aiiows, meuia,
mobile etc.
248+ 6;)6 +C==1$6 451/+
The following 0ICs suppoit icons (i.e you coulu euit its shape to look like a built
in icon)
Icon
Icon anu Text Label
Button
Nenu Bai
ComboBox
?00 )/ 451/
You can auu an icon by wiiting its name in the "icon seaich" in the piopeity
inspectoi oi the icon libiaiy that can be uisplayeu by clicking the little aiiow on
the iight. The icon libiaiy allows you to biowse all categoiies of
available icons as in Image S.

Image S

S
Exeicise 1
1- Inseit a winuow to the canvas, a button anu a text aiea.
2- Name the button "Bome" anu let the home icon show to the left of the
text.
S- Wiite in the text aiea the following "Bello Woilu, this is my fiist mockup"
anu foimat it to be italic, size 16.
a. Bint: iesize the text aiea so that all text becomes visible if neeueu.
4- Align the text aiea anu button to the left foi a moie oiganizeu look.
S- Lock the winuow so that it cannot be moveu, euiteu anu selecteu.
6- uioup the text box anu button anu move them to the top left coinei of the
winuow.
7- At the enu, youi mockup shoulu look like below

E1$D%/3 &%6; =$1F#56+
Theie is no built in featuie in Balsamiq to manage multiple mockups in piojects.
Bowevei, theie aie "best piactices" in the Balsamiq community to
cieatemanage piojects to make full use of available functions.
G%*#+
Balsamiq saves a mockup using its uefault file extension ".bmml". Also, a single
pioject might have seveial images anu
othei files that aie useu as iesouices foi
the pioject. Foi easily stoiing anu
managing a pioject, always stait by
cieating a foluei in youi system to save all
mockups that you aie going to cieate.
Insiue this foluei cieate a foluei calleu
"Assets" anu anothei foluei calleu
"Resouices".

0*(" 1%2.3$: Save ".bmml" (i.e Nockups)
in this foluei.

Resouices Foluei: In this foluei, it is suggesteu to save all files that you might
neeu in a pioject, foi example a photoshop souice file of a bannei that you
uesigneu, a puf file of one of youi mockups .etc

Image 6

6
4553/5 6%2.3$: Save all images anu exteinal iesouices (if any) in this foluei. If you
save youi images into this foluei, Balsamiq will automatically show all the names
of the saveu images foi you when you tiy to inseit an image to the canvas (fiom
the Piopeity Inspectoi). (see image 8)
Also, if you impoit an image to the Canvas (again via the Piopeity Inspectoi), you
have the option to automatically save the image into the assets foluei. (see image
7)

H),%/3 81/"#/6%1/
The iecommenueu way to name files is to use meaningful names in which woius
stait with capital letteis anu have no spaces. Foi example, if you want to have a
wiiefiame that shows iegistiation of a website, call the wiiefiame
RegistiationFoim.bmml. Sticking to one naming convention makes it easiei to
finu files, manage them anu shaie them amongst a team.

@%/D%/3
Sometimes, you might neeu to make youi mockup moie inteiactive. You might
want a mutli-page mockup that you oi useis can inteiactively navigate thiough -
this can be valuable foi uemonstiations anu usei-evaluations. Foi example, foi a
website you might uesign a homepage wheie iegisteieu useis can log in. You
might also have anothei page weie new useis can sign up. Linking coulu allow
the usei to see the sign-up page by clicking a "iegistei now" link on the
homepage (See Image 9).

Remaik: you have to save the
mockup fiist to be able to link
any 0IC to anothei mockup.
Bow to link

Image 7
Image 8
Image 9

7
@%/D)I*# 51/6$1*+
Nost 0ICs suppoit linking. In oiuei to link a 0IC to anothei mockup, go to the
"Link" option in the piopeity panel. If you click on the little aiiow to the iight,
Balsamiq will show you all available mockups that you have in youi pioject (see
"Woiking with Piojects" section foi moie infoimation). Simply select the mockup
that you woulu like youi 0IC to link to.

To inuicate that you have successfully linkeu the 0IC to anothei mockup, a little
ieu aiiow shoulu show on the uppei iight coinei of youi 0IC as shown in this
image ( )

Exeicise 2
1- 0se the mockup that you cieateu in the last mockup
2- Cieate anu save a mockup calleu NyBomePage
S- Inseit a text aiea anu wiite "This is my home page"
4- Inseit a link anu name it "Click to view NyNap"
S- Cieate a new mockup, name it as NyNap then save it.
6- Inseit a Biowsei winuow anu a map.
7- Nake the link in the NyBomePage mockup link to NyNap mockup.
8- Bo not uelete this mockup, you will neeu it in the next exeicise.

H1/J@%/D)I*# 81/6$1*+
Sometimes you might neeu to link some 0ICs that uo not suppoit linking oi make
a small pait of a specific 0IC link to anothei mockup. Foi example, you woulu
like to make a line chait link to an illustiation page once clickeu (in othei woius,
uefine a "Bot aiea" in a line chait). You neeu to uo the following:

1- Inseit a canvas contiol anu place it ovei the aiea that you want to tuin
into a link (i.e. the line chait).
2- Foimat the canvas contiol so that it becomes tianspaient by changing the
capacity bai anu iemoving boiueis by changing the Boiuei Style (so that
that Line chait in the back becomes visible).
S- Link the canvas to the uesiieu mockup (in oui example, LineChaitInfo
mockup).
4- uioup the canvas anu the Line chait togethei. (See Image 1u)

1- Inseit Canvas Contiol +
Line Chait on the back
2- Foimat the Canvas
S- Link the Canvas
4- uioup the Canvas
anu Chait
Image 1u

8

Exeicise S
Since maps uoes not suppoit linking, lets tiy to make the map linkable by
inseiting a canvas contiol.
1- 0se the same mockups that you cieateu in the last exeicise. (i.e
NyBomePage anu NyNap).
2- Inseit a canvas contiol anu caiefully euit, place it above the map.
S- Nake the canvas link to the NyBomePage mockup so that when a usei
click on the map, the NyBomePage mockup is activateu.

A>,I1*+
A symbol is a set of gioupeu 0ICs that can be ieuseu. Foi example, if you have
cieateu a foim that you think you will use in anothei mockup, you can conveit it
into a symbol. All symbols will be shown unuei "Pioject Assets" in the 0I libiaiy.

Bow to cieate symbols:
1- Select all the 0ICs that you woulu like to
conveit to a symbol.
2- uioup the selecteu 0ICs.
S- Name the gioup by wiiting the name
in the piopeity inspectoi
4- Piess "conveit to symbol".
S- The gioup will become gieen to
inuicate that it has been conveiteu to
a symbol.
6- You can view anu ieuse the symbol
that you cieateu (just like any noimal
0IC) unuei "pioject assets" tab in the
0I libiaiy.

Reminuei: you will not be able to see Pioject assets
if youi mockup is not saveu. Remembei to always save youi mockup to get full
functionality of the piogiam activateu.

Remaik: Balsamiq will save youi symbols as gioups of 0ICs in a file calleu
symbols.bmml in the assets foluei of the pioject. Foi moie infoimation, iefei to
woiking with piojects section.

K0%6%/3 A>,I1*+
Theie aie two moues foi euiting symbols:
1- Euiting the souice: by euiting the souice of the symbol, youi changes will
change all instances of this symbol acioss the pioject. Foi example, in the
"NyFoim" symbol above that we cieateu, if you aie in the "souice euiting"
moue anu change the text fiom "Last name" to "Family name", youi
changes will apply to all mockups in the pioject that contain this foim.
a. You can euit the souice of a symbol by selecting the symbol then
choosing "Euit souice" as shown in Image 11 above.
S- Entei name of gioup heie
S- The gieen coloi to show that
It has been conveiteu to a symbol
Image 11

9
2- Euiting an instance of the symbol: sometimes you might neeu to euit the
"NyFoim" symbol in one page only (Balsamiq calls this "oveiiiuing
piopeities of the instance").
a. You can euit an instance of a symbol by uouble clicking on the
instance. A gieen label shoulu show in the top of the canvas stating
that you aie cuiiently euiting an instance of a symbol (
). When you aie uone, click on
the home symbol to continue woiking on youi mockup.

Remaik: Balsamiq applies a concept calleu "Local wins" when it comes to euiting.
(i.e if you have changeu a piopeity of an instance of a symbol, it will oveiiiue any
piopeity changes that you might uo on the symbol itself). Foi example, if in
Nockup1, you changeu the fiist iow to "foiename", then you euiteu the souice of
the symbol anu maue it "FiistName", the fiist iow will always show as
"foiename" iegaiuless the changes that you will make to the symbol.

2+#+ 1L A>,I1*+: Repetitive contiols: cieate a symbol of a gioup of 0ICs if you
will fiequently neeu to use it in uiffeient mockups in the pioject.

:#,=*)6#+: In some cases, you might neeu to have some contiols always
appeaiing acioss all mockups. Foi example, if you aie cieating a website, you
might neeu the menu, heauei anu footei of the website to appeai in all mockups.

Exeicise 4

1- Cieate a new mockup calleu Nyuoogle
2- Inseit a biowsei winuow, a tabs bai anu iesize it to fit all scieen anu a
text fielu in the bottom of the page.
S- Euit the tabs to the following names: Bome, News, Naps, Shopping.
4- Wiite "This is the footei, all iights ieseiveu" in the text fielu.
S- uioup all contiols.
6- Conveit them into a symbol anu call it NyBomeSymbol.
7- Cieate anothei mockup calleu "NyShopping".
8- Inseit NyBomeSymbol fion the 0I libiaiy.

?551C/6 ?++#6+
The uisauvantage of Pioject assets is that the symbols that you cieate can only be
seen anu useu by one pioject. This is iathei limiting, as often you might want to
use a symbol acioss vaiious piojects. (i.e cieate a symbol that coulu be
peimanently auueu to youi 0I libiaiy).

In oiuei to peimanently use a symbol anu auu it to the 0I libiaiy, cieate a
mockup anu inseit vaiious 0ICs anu gioup them. Save this mockup unuei
Bocuments>>Balsamiq Nockups>> assets. Now, all gioups in that mockup will
show as 0ICs unuei the Pioject Assets tab in the 0I Libiaiy.

1u
Remaik: All pioject anu account symbols can be tieateu as any othei built in
0IC when you woulu like to inseit, gioup, lock, align ..etc.

4,=1$6%/3 /#& 248+
Suppose that you founu some inteiesting symbols that you want to auu to youi
libiaiy. To inseit them, save the .bmml files unuei Bocuments>>Balsamiq
Nockups>>assets. If this path uoes not exist, cieate it youiself. Note that the
name of the foluei has to be calleu "Balsamiq Nockups". Any mockup that you
save to this path will show in the 0I libiaiy unuei "Account Assets"

Exeicise S
1- Bownloau the following symbol fiom this link !""#$%%"&'()*+,-./%0+12'*3
(mockup uownloaueu fiom mockupstogo.net by 0skai Austegaiu)

2- Save "iPauLanuscape.bmml" file into youi Bocuments>>Balsamiq
Nockups>>assets.

S- uo to Account assets in the 0I libiaiy anu expeiiement with the new iPau
symbols that weie auueu.
4,=1$6%/3 )/0 KM=1$6%/3 .15DC=+
Now that you aie able to cieate mockups foi vaiious puiposes, it is essential to
uiscuss how to save anu shaie youi mockups with stakeholueis anu gioup
membeis.

Theie aie thiee ways to save youi mockups, each have auvantages anu
uisauvantages.

1- Image (.PNu): This methou expoits the cuiient mockup to an image that
you coulu shaie with gioup membeis anu stakeholueis. Bowevei, all links
between mockups will be lost.
2- Puf: This methou cieates a fully linkeu Puf file that shows all mockups on
uiffeient pages. It is iecommenueu foi usei testing (see usei testing anu
piesentations section)

File Foimat Can be euiteu
once
impoiteu.
Suppoits
linking.
Can be
vieweu
without
installing
Balsamiq
Nockups
Possible uata
loss. (i.e neeu
souice files
accompanying
the mockup)
Image (.PNu) No No Yes No
Puf No Yes Yes No
To Clipboaiu
(XNL Coue)
Yes Yes -- Yes
Compiesseu
file
Yes Yes No Yes
Table 1

11
Remaik: Note that you cannot euit the mockup once impoiteu using the above
methous. Bowevei, all pioject symbols anu templates will be viewable without
the neeu to senu along any othei souice files. Foi example, if you have inseiteu a
logo on a website mockup, you uo not neeu to senu the logo .}PEu souice file
along youi impoiteu mockup

S- To Clipboaiu (XNL Coue): All balsamiq mockups can be iepiesenteu by
simple XNL coue. You coulu expoit youi mockup as XNL coue that you
coulu easily paste into an email oi shaie it with youi gioup.
a. To impoit XNL coue into balsamiq, simply uo the following:
i. Click File>>Impoit XNL coue.
ii. A text box will appeai asking you to paste the XNL coue
that you have.
iii. Paste the XNL coue that you have anu click impoit.
iv. Youi mockup shoulu appeai on the Canvas showing all links
anu symbols.

2+#$ :#+6%/3 )/0 <$#+#/6)6%1/+

PiesentationsFull Scieen Noue: This moue is useu foi usei-testing anu
piesenting youi mockups to clientsgioup membeis.
You can stait the Full scieen moue by clicking on the small iectangle
on the top iight coinei of Balsamiq, go to view>>Full Scieen Piesentation
oi piess Cmu + F (Ctil + F foi winuows useis).

()*+),%- !/*%/# 81,,C/%6>

0seful links:
1- http:balsamiq.comsuppoit : Beie you can finu the official Balsamiq
uocumentation, tutoiials, viueos anu much moie.
2- http:mockupstogo.net : A website foi uesigneis to uploau anu shaie
theii mockups anu symbols to be useu by otheis.

12
!"#$%&'& )*&+,-.&. /).'-#0'&1 '-#&2
!"#$%&'() " ! #$%&'
Each mockup shoulu have at least one link that links to anothei page with the same layout but
which shows some changes that have taken place
.
Stuuents to woik in gioups of 2-S to cieate a mockup of one of the following pages:

Exeicises

1S

14

1S

16

17

18

19

2u

Balsam Iq Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Balsam Iq Manual

Uploaded by

Copyright:

Available Formats

Tamaia Alsheikh - 2u11 t.al-sheikhmux.ac.

You might also like