Upload
yanuarsih-riskiy
View
235
Download
0
Embed Size (px)
Citation preview
7/24/2019 Creating Your First Mockup Balsamiq
1/16
Creating Your First MockupHome(/) Tutorials (/Customer/En/Portal/Topics/49503-Tutorials/Articles) Creating Your First Mockup
Hey There!
W e ' r e i n t h e p r o c e s s o f u p d a t i n g o u r t u t o r i a l s f o r Balsamiq Mockups 3
(http://balsamiq.com/products/mockups). W h a t y o u s e e h e r e m i g h t n o t m a t c h y o u r v e r s i o n (learn more
(http://support.balsamiq.com/customer/portal/articles/1844131)).
This tutorial is designed to guide you through creating your first Mockup. It will cover a basicoverview of the product as well as some of the features and UIcontrols.
Here is the Mockup that you will create in this tutorial:
http://support.balsamiq.com/customer/portal/articles/1844131http://balsamiq.com/products/mockupshttp://support.balsamiq.com/customer/en/portal/topics/49503-tutorials/articleshttp://support.balsamiq.com/7/24/2019 Creating Your First Mockup Balsamiq
2/16
If you're new to the idea of Mockups (also called wireframes), you may want to check out UX
Apprentice(http://uxapprentice.com/) to start with an overview of what Mockups are, and where
they fit into a UX Design process.
Basic Concepts and TerminologyHere are some of the basic components of Balsamiq Mockups:
UI Control - A standard user interface "widget" (e.g., Button, Image, Dialog Window). The
building blocks of any Mockup.
Canvas - The grid-lined area where UI Controls are placed.
UI Library - A row of UI Controls that can be dragged onto the Canvas.
Property Inspector (http://support.balsamiq.com/customer/portal/articles/110114)
- Aconfiguration panel that contains common actions (e.g., alignment, layering) and properties
that are specific to each UI Control.
Note: T h eMockups Application Overview
(http://support.balsamiq.com/customer/portal/articles/109151) h a s m o r e i n f o r m a t i o n a b o u t t h e e l e m e n t s
a n d c o n t r o l s i n B a l s a m i q M o c k u p s .
http://support.balsamiq.com/customer/portal/articles/109151http://support.balsamiq.com/customer/portal/articles/110114http://uxapprentice.com/7/24/2019 Creating Your First Mockup Balsamiq
3/16
Adding the First Few Controls
To create the Mockup shown above, begin by dragging the Browser UI Control onto the
Canvas.
7/24/2019 Creating Your First Mockup Balsamiq
4/16
The content of nearly all controls in Balsamiq Mockups is defined by simple text. When a control
is first added to the canvas, it will be shown in edit mode, often with hints about how to use it.
For the Browser control, you can specify the title bar and URL text, or just use the default.
Tip: T o e d i t a c o n t r o l a t a n y t i m e , d o u b l e - c l i c k o n i t , o r p r e s s E n t e r w h e n i t i s s e l e c t e d .
Next, resize the control to the desired size using the resize cursor controls at the edges and
corners of the control.
Continue by adding the following controls to the canvas: Title, Text, and Image as shown
below. Note that alignment guides appear just inside the edges of the Browser Window control
when you move them toward the edges and that the controls "snap" to these guides.
7/24/2019 Creating Your First Mockup Balsamiq
5/16
7/24/2019 Creating Your First Mockup Balsamiq
6/16
For the product description placeholder text in the Text control, enter your own placeholder text,
or begin typing "lorem" and Lorem Ipsum(http://www.lipsum.com) text will automatically be
generated.
After resizing the Image control, your Mockup should look something like this:
http://www.lipsum.com/7/24/2019 Creating Your First Mockup Balsamiq
7/16
Tip: I f y o u h a v e t r o u b l e s e l e c t i n g a c o n t r o l t h a t i s i n f r o n t o f a n o t h e r c o n t r o l , t r y " l o c k i n g " t h e
b a c k g r o u n d c o n t r o l u s i n g t h e i c o n i n t h e t o o l b a r t o p r e v e n t i t f r o m b e i n g s e l e c t e d .
Creating and Aligning the Image Pager Controls
The next step is to add the little dots beneath the Image that indicate a rotating content or image
control.
7/24/2019 Creating Your First Mockup Balsamiq
8/16
In this part of the tutorial you will learn about adding Icons andGrouping andAligning
controls.
Begin by adding the Icon control to the canvas.
Next, click the arrow inside the "Icon Search" box to open the Icon Library.
7/24/2019 Creating Your First Mockup Balsamiq
9/16
This window shows the list of all the icons included with Balsamiq Mockups. You can filter them
by category or search by name. Once you have chosen an icon you can choose from one of six
sizes. For this tutorial, select the Circle icon and set the size to "XS" and click "Select".
Tip: T h e " I c o n S e a r c h " b o x i n t h e Icon P r o p e r t y I n s p e c t o r b e h a v e s l i k e t h e " Q u i c k A d d " b o x a n d
d i s p l a y s i c o n s m a t c h i n g t h e t e x t y o u e n t e r ( t r y t y p i n g " a r r o w " , f o r e x a m p l e ) . ( M o r e a b o u t u s i n g i c o n s
c a n b e f o u n d o n t h e Working with Icons (http://support.balsamiq.com/customer/portal/articles/110202)p a g e . )
http://support.balsamiq.com/customer/portal/articles/1102027/24/2019 Creating Your First Mockup Balsamiq
10/16
Add three more icons to the right of the Circle icon (use the Circle Outlined this time). You can
also copy and paste once you've added the second icon. Using your mouse, position the icons
next to each other. You can see that alignment guides appear both horizontally and vertically,
helping you place them appropriately.
Tip: U s e t h e D u p l i c a t e k e y b o a r d s h o r t c u t ( C T R L + D o n W i n d o w s C M D + D o n M a c ) t o q u i c k l y
r e p l i c a t e i t e m s o n t h e c a n v a s . ( More keyboard shortcuts here
(http://support.balsamiq.com/customer/portal/articles/110445))
Zooming out, your mockup should now look something like this.
The next step is to center-align the four icons below the Image control. The procedure for doing
this is to first group the icons and then align the icon group with the image control.
To group a set of controls, select them by drawing a boundary around them with your cursor or
holding down SHIFT and selecting each one with your mouse. Then click the Group command
in the Toolbar or press CTRL+G (on Windows CMD + G on Mac).
http://support.balsamiq.com/customer/portal/articles/1104457/24/2019 Creating Your First Mockup Balsamiq
11/16
Tip: A n o t h e r w a y t o s e l e c t o n l y c o n t r o l s t h a t a r e i n t h e f o r e g r o u n d ( b e s i d e s " l o c k i n g " b a c k g r o u n d
c o n t r o l s ) i s t o h o l d d o w n t h e A L T / O P T I O N k e y w h i l e d r a g g i n g t h e m o u s e . T h i s w i l l p r e v e n t b a c k g r o u n d
c o n t r o l s f r o m b e i n g s e l e c t e d .
Grouped controls can be identified by a light purple color and will remain grouped until
Ungrouped (shortcut: CTRL/CMD + SHIFT + G). To align the grouped icons with the Image
control, select them both and use the Align Center icon in the Property Inspector.
You can move the pager controls closer to the Image control either by using the keyboard arrow
keys or by using the mouse and the alignment guides.
7/24/2019 Creating Your First Mockup Balsamiq
12/16
Tip: H o l d i n g d o w n S H I F T w h i l e m o v i n g c o n t r o l s w i t h t h e a r r o w k e y s w i l l m o v e t h e m 1 0 p i x e l s a t a t i m e
( i n s t e a d o f t h e u s u a l 1 p i x e l ) .
The Mockup so far, with the pager controls added.
Completing the Mockup
The remainder of the Mockup consists of a set of tabs, more text, and a chart.
Add a Tabs Bar control and place it in the bottom half of the Mockup.
7/24/2019 Creating Your First Mockup Balsamiq
13/16
Commas are used to create tabs in this control, so you can create as many tabs as you like
simply by entering additional text separated by a comma. Entering the text "Overview, Features,
Design, Specs", for example, will create the tabs shown below.
To show the "Overview" tab as selected or highlighted, use the Selection property as shown
below.
After resizing the Tabs Bar control to match the width of the page, add Label andText controls
to create something like this:
7/24/2019 Creating Your First Mockup Balsamiq
14/16
You can format text as bold,italic
, or hyperlinked(#)
in many controls by enclosing the textwith special characters. Use *text* for bold, _text_ for italics, or [text] for hyperlinks.
Tip: L e a r n m o r e f o r m a t t i n g t i p s o n t h eWorking with Text
(http://support.balsamiq.com/customer/portal/articles/110121#basicformatting) p a g e .
Finally, drag a Chart: Column control into the empty area inside the Tabs Bar as a finishing
touch to complete the Mockup.
http://support.balsamiq.com/customer/portal/articles/110121#basicformatting7/24/2019 Creating Your First Mockup Balsamiq
15/16
Exporting and Next Steps
Now that the Mockup is finished, you can easily export it as an image via the Project > Export >
Mockup to PNG... (shortcut: CTRL/CMD + R) menu. Other export options are described in the
Exporting your Mockups(http://support.balsamiq.com/customer/portal/articles/111730) article.
Congratulations! You have now completed your first wireframe with Balsamiq Mockups
(http://balsamiq.com/products/mockups)! You are on your way to become an User Experience
(UX) expert! :)
For more information on any of the topics covered here, see the Full Mockups Documentation
(http://support.balsamiq.com/customer/portal/articles/127377).
http://support.balsamiq.com/customer/portal/articles/127377http://balsamiq.com/products/mockupshttp://support.balsamiq.com/customer/portal/articles/1117307/24/2019 Creating Your First Mockup Balsamiq
16/16
Last Updated: Apr 06, 2015 03:38PM PDT
Share: (https://twitter.com/intent/tweet/?text=Creating Your First
Mockup&url=http://support.balsamiq.com/customer/en/portal/articles/871902-creating-your-first-
mockup&via=balsamiq) (https://www.facebook.com/sharer/sharer.php?
u=http://support.balsamiq.com/customer/en/portal/articles/871902-creating-your-first-mockup)
(https://plus.google.com/share?url=http://support.balsamiq.com/customer/en/portal/articles/871902-creating-
your-first-mockup) (http://www.linkedin.com/shareArticle?
mini=true&url=http://support.balsamiq.com/customer/en/portal/articles/871902-creating-your-first-mockup)
http://www.linkedin.com/shareArticle?mini=true&url=http://support.balsamiq.com/customer/en/portal/articles/871902-creating-your-first-mockuphttps://plus.google.com/share?url=http://support.balsamiq.com/customer/en/portal/articles/871902-creating-your-first-mockuphttps://www.facebook.com/sharer/sharer.php?u=http://support.balsamiq.com/customer/en/portal/articles/871902-creating-your-first-mockuphttps://twitter.com/intent/tweet/?text=Creating%20Your%20First%20Mockup&url=http://support.balsamiq.com/customer/en/portal/articles/871902-creating-your-first-mockup&via=balsamiq