CreatingYourFirstMockup

Home(/) Tutorials(/Customer/En/Portal/Topics/49503Tutorials/Articles) CreatingYourFirstMockup

HeyThere!
We'reintheprocessofupdatingourtutorialsforBalsamiqMockups3
(http://balsamiq.com/products/mockups).Whatyouseeheremightnotmatchyourversion(learnmore
(http://support.balsamiq.com/customer/portal/articles/1844131)).

ThistutorialisdesignedtoguideyouthroughcreatingyourfirstMockup.Itwillcoverabasic
overviewoftheproductaswellassomeofthefeaturesandUIcontrols.
HereistheMockupthatyouwillcreateinthistutorial:

I
fyou'renewtotheideaofMockups(alsocalledwireframes),youmaywanttocheckoutUX
Apprentice(http://uxapprentice.com/)tostartwithanoverviewofwhatMockupsare,andwhere
theyfitintoaUXDesignprocess.

BasicConceptsandTerminology
HerearesomeofthebasiccomponentsofBalsamiqMockups:
UIControlAstandarduserinterface"widget"(e.g.,Button,Image,DialogWindow).The
buildingblocksofanyMockup.
CanvasThegridlinedareawhereUIControlsareplaced.
UILibraryArowofUIControlsthatcanbedraggedontotheCanvas.
PropertyInspector(http://support.balsamiq.com/customer/portal/articles/110114)A
configurationpanelthatcontainscommonactions(e.g.,alignment,layering)andproperties
thatarespecifictoeachUIControl.

Note:TheMockupsApplicationOverview
(http://support.balsamiq.com/customer/portal/articles/109151)hasmoreinformationabouttheelements

andcontrolsinBalsamiqMockups.

AddingtheFirstFewControls
TocreatetheMockupshownabove,beginbydraggingtheBrowserUIControlontothe
Canvas.

ThecontentofnearlyallcontrolsinBalsamiqMockupsisdefinedbysimpletext.Whenacontrol
isfirstaddedtothecanvas,itwillbeshownineditmode,oftenwithhintsabouthowtouseit.
FortheBrowsercontrol,youcanspecifythetitlebarandURLtext,orjustusethedefault.

Tip:Toeditacontrolatanytime,doubleclickonit,orpressEnterwhenitisselected.

Next,resizethecontroltothedesiredsizeusingtheresizecursorcontrolsattheedgesand
cornersofthecontrol.
Continuebyaddingthefollowingcontrolstothecanvas:Title,Text,andImageasshown
below.NotethatalignmentguidesappearjustinsidetheedgesoftheBrowserWindowcontrol
whenyoumovethemtowardtheedgesandthatthecontrols"snap"totheseguides.

Tip:ControlscanalsobeaddedusingtheQuickAdd
(http://support.balsamiq.com/customer/portal/articles/109151#quickadd)boxbytypingthefirstfewletters

ofthenameofthecontrolandpressingEnter.

Tochangethesizeofthetextfortheproductnamelabel,selecttheTitlecontrolandchange
thefontsizeusingthePropertyInspector.

FortheproductdescriptionplaceholdertextintheTextcontrol,enteryourownplaceholdertext,
orbegintyping"lorem"andLoremIpsum(http://www.lipsum.com)textwillautomaticallybe
generated.

AfterresizingtheImagecontrol,yourMockupshouldlooksomethinglikethis:

Tip:Ifyouhavetroubleselectingacontrolthatisinfrontofanothercontrol,try"locking"the
backgroundcontrolusingtheiconinthetoolbartopreventitfrombeingselected.

CreatingandAligningtheImagePagerControls
ThenextstepistoaddthelittledotsbeneaththeImagethatindicatearotatingcontentorimage
control.

InthispartofthetutorialyouwilllearnaboutaddingIconsandGroupingandAligning
controls.
BeginbyaddingtheIconcontroltothecanvas.

Next,clickthearrowinsidethe"IconSearch"boxtoopentheIconLibrary.

ThiswindowshowsthelistofalltheiconsincludedwithBalsamiqMockups.Youcanfilterthem
bycategoryorsearchbyname.Onceyouhavechosenaniconyoucanchoosefromoneofsix
sizes.Forthistutorial,selecttheCircleiconandsetthesizeto"XS"andclick"Select".

Tip:The"IconSearch"boxintheIconPropertyInspectorbehaveslikethe"QuickAdd"boxand
displaysiconsmatchingthetextyouenter(trytyping"arrow",forexample).(Moreaboutusingicons
canbefoundontheWorkingwithIcons(http://support.balsamiq.com/customer/portal/articles/110202)
page.)

AddthreemoreiconstotherightoftheCircleicon(usetheCircleOutlinedthistime).Youcan
alsocopyandpasteonceyou'veaddedthesecondicon.Usingyourmouse,positiontheicons
nexttoeachother.Youcanseethatalignmentguidesappearbothhorizontallyandvertically,
helpingyouplacethemappropriately.

Tip:UsetheDuplicatekeyboardshortcut(CTRL+DonWindowsCMD+DonMac)toquickly
replicateitemsonthecanvas.(Morekeyboardshortcutshere
(http://support.balsamiq.com/customer/portal/articles/110445))

Zoomingout,yourmockupshouldnowlooksomethinglikethis.

ThenextstepistocenteralignthefouriconsbelowtheImagecontrol.Theprocedurefordoing
thisistofirstgrouptheiconsandthenaligntheicongroupwiththeimagecontrol.
Togroupasetofcontrols,selectthembydrawingaboundaryaroundthemwithyourcursoror
holdingdownSHIFTandselectingeachonewithyourmouse.ThenclicktheGroupcommand
intheToolbarorpressCTRL+G(onWindowsCMD+GonMac).

Tip:Anotherwaytoselectonlycontrolsthatareintheforeground(besides"locking"background
controls)istoholddowntheALT/OPTIONkeywhiledraggingthemouse.Thiswillpreventbackground
controlsfrombeingselected.

Groupedcontrolscanbeidentifiedbyalightpurplecolorandwillremaingroupeduntil
Ungrouped(shortcut:CTRL/CMD+SHIFT+G).ToalignthegroupediconswiththeImage
control,selectthembothandusetheAlignCentericoninthePropertyInspector.

YoucanmovethepagercontrolsclosertotheImagecontroleitherbyusingthekeyboardarrow
keysorbyusingthemouseandthealignmentguides.

Tip:HoldingdownSHIFTwhilemovingcontrolswiththearrowkeyswillmovethem10pixelsatatime
(insteadoftheusual1pixel).

TheMockupsofar,withthepagercontrolsadded.

CompletingtheMockup
TheremainderoftheMockupconsistsofasetoftabs,moretext,andachart.
AddaTabsBarcontrolandplaceitinthebottomhalfoftheMockup.

Commasareusedtocreatetabsinthiscontrol,soyoucancreateasmanytabsasyoulike
simplybyenteringadditionaltextseparatedbyacomma.Enteringthetext"Overview,Features,
Design,Specs",forexample,willcreatethetabsshownbelow.

Toshowthe"Overview"tabasselectedorhighlighted,usetheSelectionpropertyasshown
below.

AfterresizingtheTabsBarcontroltomatchthewidthofthepage,addLabelandTextcontrols
tocreatesomethinglikethis:

Youcanformattextasbold,italic,orhyperlinked(#)inmanycontrolsbyenclosingthetext
withspecialcharacters.Use*text*forbold,_text_foritalics,or[text]forhyperlinks.

Tip:LearnmoreformattingtipsontheWorkingwithText
(http://support.balsamiq.com/customer/portal/articles/110121#basicformatting)page.

Finally,dragaChart:ColumncontrolintotheemptyareainsidetheTabsBarasafinishing
touchtocompletetheMockup.

ExportingandNextSteps
NowthattheMockupisfinished,youcaneasilyexportitasanimageviatheProject>Export>
MockuptoPNG...(shortcut:CTRL/CMD+R)menu.Otherexportoptionsaredescribedinthe
ExportingyourMockups(http://support.balsamiq.com/customer/portal/articles/111730)article.

Congratulations!YouhavenowcompletedyourfirstwireframewithBalsamiqMockups
(http://balsamiq.com/products/mockups)!YouareonyourwaytobecomeanUserExperience
(UX)expert!:)
Formoreinformationonanyofthetopicscoveredhere,seetheFullMockupsDocumentation
(http://support.balsamiq.com/customer/portal/articles/127377).

LastUpdated:Apr06,201503:38PMPDT
Share: (https://twitter.com/intent/tweet/?text=CreatingYourFirst
Mockup&url=http://support.balsamiq.com/customer/en/portal/articles/871902creatingyourfirst
mockup&via=balsamiq) (https://www.facebook.com/sharer/sharer.php?
u=http://support.balsamiq.com/customer/en/portal/articles/871902creatingyourfirstmockup)
(https://plus.google.com/share?url=http://support.balsamiq.com/customer/en/portal/articles/871902creating
yourfirstmockup) (http://www.linkedin.com/shareArticle?
mini=true&url=http://support.balsamiq.com/customer/en/portal/articles/871902creatingyourfirstmockup)