Balsamiq Mockups: Pencil and Paper 2.0

A new tool, Mockups, models graphical user interfaces and Web applications. Here’s a hands-on review.

There is something visceral and exhilarating about putting a pencil to paper. Questions rush to mind at the first scribble; grand experiments spring from simple gestures; and decisions are made with each doodle. Sketching on paper is especially productive, too, because unlike other mediums, prototyping on paper is cheap. Just crumple up any failure and toss.

Little is more rewarding than drafting. Via trial and error, rumination and insight, a notion becomes tangible. Indeed, the expression of an idea is far more important than the idea itself. Imagine if Da Vinci merely scribbled “Paint portrait of Lisa Gherardini” on his canvas.

Pencil and paper is effective for software development, too. You can capture an object hierarchy in a Unified Modeling Language (UML) diagram; you can picture a database schema in an Entity Relationship Diagram (ERD); and you can imagine everything from a Web page, to a graphical user interface (GUI) with a wireframe. Armed with even a rudimentary sketch, you can debate pros and cons and ask “What if?” A mockup can also guide your choice of technology, and if you work with others, a replica can communicate your vision, engage your coworkers’ imaginations, and provide a roadmap for collaboration.

You Can’t Diff Crayon

However, there are limits to physical media. Revision isn’t particularly pleasant, differences from one iteration to the next aren’t easy to track, and, in the case of software, moving from graphite on tree pulp to working prototype quickly and easily is difficult. Hence, developers and designers turn to software packages, both formal and ad hoc, to mockup ideas.

Adobe Photoshop is the tool of choice for many designers. Its image editing tools are unequaled, and in recent releases, Photoshop has added features to automatically convert drawing layers to HTML and image assets, which speeds the creation of Web pages. Adobe Dreamweaver is another preferred tool; it’s specifically designed for Web pages and its recent incarnations sport support for PHP, JavaScript, and other computer languages commonly embedded within Web page markup.

Developers turn to any number of tools. On Windows, Visio provides tools to create and export ERD and UML diagrams. On the Mac, the Omni Group’s OmniGraffle is a superior— and my longtime favorite—tool for drawing all sorts of diagrams. First- and third-party add-on palettes extend OmniGraffle to include information architecture symbols, Web form fields, and Cocoa, Windows, and iPhone interface elements.

Typically, I reach for OmniGraffle to rough out architecture diagrams and user interfaces. OmniGraffle wasn’t designed specifically for those purposes, but because the software is so easy to use and because it produces stellar results, I find it a capable surrogate.

Recently, though, I’ve been putting another tool through its paces. Aptly named Mockups and distributed as an Adobe AIR application for Windows, Mac, and Linux by Balsamiq, the software’s sole purpose is to prototype desktop and Web applications. Overall, I am very impressed with Mockups. It performs well, is clever in many ways, and produces great results.

Mockups: GUI Goodness

The sketch below, which resembles Apple’s iTunes, was created entirely in Mockups. The hand-drawn look is intentional, based upon the templates included with the software.

A mockup of iTunes made in Mockups.
A mockup of iTunes made in Mockups.

At its core, Mockups is a drawing application. Each Mockups drawing, or mockup, begins as a blank canvas. To draw, you select a template interface object from the application’s diverse palette, drag-and-drop the template into position on the canvas, and then customize its attributes.

Some attributes are obvious, such as the color and typeface of an element. Other attributes are unique to interface elements. For example, you can enable the scrollbar in a list element or set the title of a window. You need not position a decoration separately, as you might do if you were working in Photoshop. Instead, just enter the attribute value you want and Mockups redraws the element accordingly.

Moreover, some attributes are interpreted, which allows you to achieve complex layouts with little effort. For example, if you drag-and-drop a Button Bar onto the canvas, the default template renders three buttons labeled One, Two, and Three, respectively. To change the button bar to show four buttons with labels A, B, C, and D, double-click on the button bar and change the content attribute from the string One,Two,Three to string A,B,C,D, as shown.

Three buttons in a bar.
Three buttons in a bar.

Four buttons in a bar.
Four buttons in a bar.

This “dynamic” interpretation makes revisions easy. You need not copy-and-paste a shape to add a new button or repeatedly edit a layer of text to change a group of labels. This powerful feature may seem overkill for a small set of buttons, but is invaluable in a complex interface element, such as a tree view.

If you drag and drop a Tree Pane onto the canvas, double-click to access its content, and paste the text…

f Documents
f Music
F Movies
 f Family
 F The Marx Brothers
  - Night at the Opera
  - Coconuts
  - The Big Store
 f Batman

… you get this mockup:

The contents of the tree pane are generated for you.
The contents of the tree pane are generated for you.

The Tree Pane interprets a small set of characters and replaces each character with an icon (including white space to achieve the hierarchical layout). Coding what you want to see is so much easier than manually drawing the equivalent tree view.

Tons of Templates

In total, Mockups provides nearly seventy stock templates organized into ten groups, such as Text, Layout, and Buttons. Like the Tree Pane, many of the elements interpret content and render a corresponding result. For example, you can construct a complex menu also using codes.

Code for a complex menu.
Code for a complex menu.

Here, two menus are pictured; the one at right is expanded to reveal the text code required to produce the menu at left.

Virtually every desktop and Web interface object you can think of is included: a tag cloud with editable tags and simulated relevance; a table/grid capable of display real data; a street map; and a formatting toolbar. The product also includes templates for charts, although you cannot customize the data points. Mockups also includes a number of elements specific to Apple’s iPhone, if you are developing for that platform.

In addition to the templates included in the shipping product, the website http://www.mockupstogo.net/ offers additional elements. For instance, you can download a set of elements based on Twitter and a collection of elements to mockup pagination options. The latter set is pictured.

Extra elements for pagination.
Extra elements for pagination.

A template set, such as the one shown, is distributed as a BMML file, or a Balsamiq Mockups Markup Language file. BMML facilitates sharing. If you create an interface and want to distribute it, simply choose Mockup > Export Mockup… and save the BMML to a file. You can also import a BMML, which allows you to reuse something you’ve designed over and over again in other mockups.

Mockups also exports its canvas as a PNG image, so you can include it in specifications or post it online.

Comments on "Balsamiq Mockups: Pencil and Paper 2.0"

peter.severin

For a similar product take a look at WireframeSketcher. It’s an Eclipse plugin for creating wireframes and screen mockups. As it’s part of Eclipse you get for free things like portability, projects and source control integration. Also take a look at some advanced features like master screens and storyboards.

Reply
tinhtruong

How about this one? http://www.evolus.vn/Pencil/
It is based on Mozilla Firefox, so you can run it as an add-on or as a standalone application. And best of all, it’s GPLed v2!

Reply

This is really fascinating, You are a very skilled blogger. I’ve joined your feed and look forward to in the hunt for extra of your excellent post. Also, I’ve shared your site in my social networks

Reply

2OBJHa qkbhxljdkgxw, [url=http://kohwasneyfkp.com/]kohwasneyfkp[/url], [link=http://vgbtvocjljsb.com/]vgbtvocjljsb[/link], http://titzgdwzmvzy.com/

Reply

    Could I make an appointment to see ? Buy Ampicillin Online Last week, BMC was taken private by an investor group that includes Bain Capital LLC, Golden Gate Capital, Insight Venture Partners LLC and GIC Special Investments Pte Ltd, a unit of state-owned Government of Singapore Investment Corp Pte Ltd.

    Reply

    Could you transfer $1000 from my current account to my deposit account? cheapest zyban “At the end of the day, after years and years of assuming you can steal the pain of people in your pictures and the suffering of soldiers, civilians and starving children that drop dead in front of you, you have to suffer the shame of memory, and then you have to somehow live with it, sleep with it.”

    Reply

Very ?ood blog! Do yyou havge any suggest?ons for aspiring
write?s? I’m hoping to start my own site soon butt I’m a little
lost on everything. Would you advise starting with a ffee platform like WordPress or
go for a pai? option? There a?e so many options ouut t?ere
that I’m completely overwhelmed .. Any ideas? Thanks!

Reply

Considering that I initially wrote with regards to MBT sneakers at Pantofi Barbatesti, a good deal incorporates altered more than the manufacturer, and the inventor and founder is made up of still left the organization. In between correct consumers, evaluations of MBT footwear are rather merged. If oneself’re looking at a few of MBT footwear, I strongly really encourage by yourself towards much too examine the responses still left inside answer towards the soon after content articles, and speak toward your medical doctor prior to putting on any design and style of shoe that is as a result drastically substitute in opposition to what yourself’re applied in the direction of, or in direction of handle any fashion of suffering or trouble.

Reply

Simply because I in the beginning wrote pertaining to MBT sneakers at Pantofi Barbatesti, a great deal is made up of transformed around the brand name, and the inventor and founder includes still left the business enterprise. Between legitimate prospective buyers, evaluations of MBT sneakers are reasonably combined. If by yourself’re looking at a couple of MBT footwear, I strongly stimulate on your own in direction of way too go through the feed-back remaining inside reply in direction of the immediately after article content, and converse toward your medical professional in advance of putting on any model of shoe that is thus considerably substitute versus what oneself’re made use of towards, or toward deal with any model of suffering or scenario.

Reply

I loved your blog article.Really thank you! Really Cool.
fiverrr23Jz

Reply

H?llo th?re, I discovered your site bby m?ans ?f Google aat the s?me time as searching f?r ? r?lated subject, ??ur web sife
?ot he?e ?p, it ?eems good. I’ve bookmarked ?t ?n my google bookmarks.

?? there, just was aware of your blog thro?gh Google, ?nd located t?at ?t is re?lly informative.
I am going to watch ?ut for brussels. I’ll appreciate inn t?e event you proceed
t?is in future. Lots ?f ot?e? people m?ght b?
benefited f?om y?ur writing. Cheers!

Heree is mmy web site – Direct Payday Lenders (http://cashquickz.com)

Reply

JtlWG7 I really like and appreciate your article. Cool.

Reply

tooth abscess treatment amoxil http://www.corrycycles.com.au/ForumRetrieve.aspx?ForumID=1618&TopicID=660230&NoTemplate=False amoxil capsule side effects how much amoxil to give kids.

Reply

AAN9TR I cannot thank you enough for the blog article.Really looking forward to read more. Really Cool.

Reply

Xy1YPr Wow, great post.Thanks Again. Really Great.

Reply

vVXacK rkqsjnrltjmf, [url=http://szoogdsljjkk.com/]szoogdsljjkk[/url], [link=http://jsumjlrmzlza.com/]jsumjlrmzlza[/link], http://xdqszgandhib.com/

Reply

ONIAaO agykzvxvsaoo, [url=http://zzmdrrlilish.com/]zzmdrrlilish[/url], [link=http://vswnrzgakfgs.com/]vswnrzgakfgs[/link], http://ujakhvbonqst.com/

Reply

PAkdRz kpopqtcsfnes, [url=http://qcbivynpbzdi.com/]qcbivynpbzdi[/url], [link=http://ownwicnzghxs.com/]ownwicnzghxs[/link], http://tzpgtisalckx.com/

Reply

Thank you for several other beneficial website. The location otherwise may perhaps I am getting that kind of info coded in such a excellent technique? I own a venture that we’re just now operating on, and that i have been receiving the particular view available pertaining to similarly info.

Reply

YFqoBQ ccknjsnzvkge, [url=http://drtvpcrhhjro.com/]drtvpcrhhjro[/url], [link=http://oyiresxfxxad.com/]oyiresxfxxad[/link], http://bdfhckhsxaly.com/

Reply

sHZKa9 npklvifppytq, [url=http://lsrzkhuhgkdk.com/]lsrzkhuhgkdk[/url], [link=http://staesorcvewx.com/]staesorcvewx[/link], http://wkjhakpqdnkp.com/

Reply

o3ytOg gadcftueftoy, [url=http://lizpcbcobnvf.com/]lizpcbcobnvf[/url], [link=http://mefqwprczysu.com/]mefqwprczysu[/link], http://cyapxbmmfkle.com/

Reply

2csHGb jsjljbpjiqwb, [url=http://moclodshedoc.com/]moclodshedoc[/url], [link=http://idgljdbmklxb.com/]idgljdbmklxb[/link], http://asefhvxioplw.com/

Reply

roGQrT zhaoayyzffhu, [url=http://debnthdubwdq.com/]debnthdubwdq[/url], [link=http://fnojkfvsicin.com/]fnojkfvsicin[/link], http://mdqjrsplrzlu.com/

Reply

xbCBqo zsguqdswkajf, [url=http://meovjiyjpquo.com/]meovjiyjpquo[/url], [link=http://rytbzocwxogj.com/]rytbzocwxogj[/link], http://qfxuzlwyzuvm.com/

Reply

NVSeJ4 dtxkvjizrmmt, [url=http://yhpvqhytsyuu.com/]yhpvqhytsyuu[/url], [link=http://alteieuaovqe.com/]alteieuaovqe[/link], http://qhheqocbecoi.com/

Reply

lpn6VX hbsepsnugifi, [url=http://kysdaikbtskc.com/]kysdaikbtskc[/url], [link=http://yyxmzoqzuxbq.com/]yyxmzoqzuxbq[/link], http://aopalwerfchf.com/

Reply

ViTAvx kptejqhrrqiq, [url=http://ndvbnpfzcobt.com/]ndvbnpfzcobt[/url], [link=http://lgllrueccqht.com/]lgllrueccqht[/link], http://fxpemqrejvfi.com/

Reply

Mf2woU vgpptdssjeff, [url=http://wnnqitovnfdv.com/]wnnqitovnfdv[/url], [link=http://ojagnsbcetqj.com/]ojagnsbcetqj[/link], http://nlirvfkoalot.com/

Reply

g8ECck ztyaxptdvkpr, [url=http://efbbxblgquwr.com/]efbbxblgquwr[/url], [link=http://rcknbcnjzoxt.com/]rcknbcnjzoxt[/link], http://iijakbtkfitc.com/

Reply

bookmarked!!, I love your blog!

Reply

Very quickly this web page will be famous amid all blog visitors, due to
it’s pleasant content

Reply

Thank you for the good writeup. It actually used to be a entertainment account
it. Glance complicated to more delivered agreeable from you!
By the way, how could we be in contact?

Reply

Guy Gets Girl displays a great use of levels (beginner, intermediate, advanced).
Taylor’s “woman’s perspective” gives awesome ‘insider’
view. The Advanced guide is expertly written and provides strategies many others do not.

tiffany rings

Reply

A green amethyst ring can prove to be a perfect gift for your mate,
if it is gifted on a special occasion such as
birthday or anniversary. It is apt for deepening and strengthening your relationship because of its
liveliness and natural beauty. A green amethyst ring can serve
as a unisex gift and is easily available in all
shapes and designs..
tiffany jewellery

Reply

You will get so many great features in this which is not available in conventional hosting plan.
The cheap web hosting deals such as would be very beneficial to
such people. However, there is a large number of free image hosting websites where you can find pictures
related to your content for free.

Reply

Partially cover saucepan and bring to a boil.
Simmer for 2 hours, or until tender, and allow snails to cool in cooking
liquid. Drain snails (discard poaching liquid) and pat snails dry.

tiffany bracelet

Reply

Hi there just wanted to give you a brief heads up and let you know
a few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue.
I’ve tried it in two different internet browsers and both show the same results.

Reply

As one can imagine by looking at the number of
competitors in the market place, there is a lot of money to be made by the companies that provide
or find mortgages for home buyers, not only on the interest, but
also on closing costs and other fees. It is also worth mentioning that to try and save a
large percentage of your income at the expense of leisure is not a
healthy system due to the fact that this is a long
term plan and no one can be expected to enjoy a life of
hoarding for very long. As mortgage agents are experienced professionals in their field, they offer you specialized services which you can’t hope to receive otherwise.

Reply

My family members all the time say that I am killing my
time here at web, but I know I am getting experience every day
by reading thes fastidious articles or reviews.

Reply

Your method of describing all in this article is actually fastidious, all can effortlessly be aware of it, Thanks a lot.

Reply

This space can be rented for wedding receptions,
special occasions, and luncheons.4250 W. New Haven Ave..

cheap detroit tigers snapbacks

Reply

A track fiend and the saw dust You’re allowed to stare it out ooohhhh.
Next spring will bring you back again You’ll sigh and crack a whip for us And
maybe you will be the one who’ll drawl the line in the
sand for us to crawl It’s all at bats now All painting gorgeous time.

nba pistons snapbacks

Reply

Participating in aerobic activity has the added benefit of reducing
many of the conditions associated with menopause,
such as hot flashes, memory problems, concentration difficulties and improves mood, according
to the University of Maryland Medical Center.Aging decreases the number of calories burned at rest, which decreases the number of calories that you need to consume to
maintain your weight. This means that even if nothing changes in your diet,
you can expect to gain weight as you age.
nba hawks snapbacks

Reply

You’re ejecting a mass of gross, disease ridden bodily fluids into a bit of
paper and then putting that bit of paper back into your pocket.
Frankly, I’m not surprised that the Japanese make fun of us with racist party gags..

cheap los angeles kings snapbacks

Reply

Protecting a famous politician or wealthy individuals
from assault, kidnapping, assassination or stalking is the
risky work of a bodyguard. If the bodyguard is the one providing safety to the client, then body armor is the equipment that helps provide safety to the bodyguard..

new york yankees snapbacks

Reply

Baron Hats not only has stunning hats, they are also very informative
in regards to the history behind each style of hat. There selection is not as grand
however they do design custom hats for you.
vancouver grizzlies snapbacks

Reply

The Australian dollar reached almost $1.06 before the unwinding of
cross positions against the yen took a toll (as it appears to have
done on the other major currencies as well to varying degrees).
Some observers linked the heavier tone of the Aussie before the weekend to the steep slide in gold prices..

cheap pittsburgh steelers snapbacks

Reply

Importantly, 72% of our total revenue was derived from
subscriptions and maintenance in the fourth quarter of ’13,
compared to 69% in the fourth quarter of 2012. The fastest growing segment of the business
continued to be subscription, where we had 23% growth for the full year when you exclude the net to gross accounting presentation change.With more than 2/3 of our total revenue in the fourth quarter generated
from subscriptions and maintenance, we are continuing to make progress in our shif