I was looking for a tool to separate two concerns: How a website looks, and what it does. These two are often mixed up, and that especially hurts large projects.
Wireframing tools take away the looks and replace it with hurried sketches. By tools I mean anything from a napkin and thick ball pen, storyboards with post-it notes, to complex pieces of software that require prior training.
The problem with drawing websites on napkins is that you can’t easily simulate what happens when somebody clicks on a button or writes the wrong text. It is possible, but you’ll have to stress your imagination skills, which would take away a tiny, precious part of your brain.
Although nothing is as intuitive as your pen and throw-aways, the added bonus of a nearly functional sketch tips the scale for me towards software. There’s a sense of accomplishment when a project starts to make sense, and all that’s left is to dress it in silk and gold.
I had to choose one of these tools and stick to, and since this is a Balsamiq Mockups review, I’ll brief you quickly on each:
This is a nifty Firefox addon. Pencil runs like a separate application. It’s pretty capable, but it seems to be geared towards sketching desktop applications. It’s also lacking on the that side since there’s no snapping, no grid, no easy alignment and distribution. The stencil library is ok, but it barely has more than a few Windows and Linux GUI widgets.
Denim tries to be your digital napkin. It’s just a large canvas that you’re free to draw anything on. This is great for jotting down a sitemap, a flowchart for interactions, but leaves you wanting when you want to take things a step further.
The cool thing about Denim is that you can create interactions and link multiple pages from a sitemap togther. On the other hand, I’ll need to buy a tablet if I want to make the most out of Denim. My hand drawing is ugly enough, and mouse make my drawings even worse.
This is my second favorite piece of software. It has a nice library of widgets that look half-done, it’s very simple to use and you don’t even need to install it. The best and worst thing about it is that it’s completely online. So there’s no need to download or install anything, but without internet, you’re stuck. You also need to register to save your projects.
Projects are useful, and it’s one of the few things missing in Balsamiq. You can link to widgets to different pages by a simple drag and drop, and once you save a project you can share with a team of collaborators.
Like MockingBird, Balsamiq Mockups has a large library of widgets, but unlike MockingBird you can extend it, either with your own, or from Mockups To Go. Balsamiq can also import and export your designs to PNG, PDF and copy it to clipboard.
I chose Balsamiq Mockups. Not only because I could write a keygen for it in 10 minutes, but precisely because I didn’t need to. Balsamiq sent me a free license, one that even they can’t revoke. I felt so special, until I found out that Balsamiq give away free licenses left and right. Non-profits, bloggers and reviewers, all can get a license.
Their philosophy is: If don’t want to buy the software, you never will. You’ll pirate it, hide it from friends and family and live years of shame, but you wouldn’t spend a dime. On the other hand, if you really like the product, the company or the team behind either, you’ll probably shell out this money with a smile, even if the product is free in the first place.
Balsamiq make you like them, even if that costs them $49 in Mockups revenue.
Balsamiq Mockups is pretty simple. You get a white canvas with a grid, and a tabbed bar filled with icons. If you know how to drag and drop, you already are a Mockups expert.
Mockups doesn’t bother you with constant nagging about registration. It’s mostly free. You only need to register when you want to link multiple mockups, or when you want to save your work in Mockups’ native format. You can still export and import your work in the unregistered version, but that’s a hassle.
Most wireframing tools have a separate pane to edit widgets’ properties. Like changing the text on a button, or the colors of your widget borders. Balsamiq saves precious workspace and uses a tiny floating window that only shows when you move your mouse over a widget.
The library is extensive, and it hits that spot of looking rough, but not ugly. The collection includes almost everything under the sun: Big pie charts, navigation menus, buttons, lists, checkboxes, date and color pickers, scroll bars, tabbed windows, even iPhone controls. In addition to that, you get mark up widgets for your designs, like sticky notes, arrows and a picture to scratch out unwanted elements (I’ve used this to scratch out the EQ from the iPhone draft below).
Editing widgets is a breeze. Mockups uses plain text for most widgets to modify what they display. See for example how the iPhone menu below is generated. I didn’t have to select each menu item, go to a properties window and select how I want it to look like or what’s written in it. All I did was edit the text.
Mockups can link multiple pages together. This is an advantage over napkin drawings. You can create a fully interactive, nearly functional design to demonstrate, and get a feel of how the final project will act. Remember, Mockups are all about action and preliminary layout. At this stage, how your project looks, styling and colors are irrelevant. Most elements can be linked to other pages, as long as all pages (Mockups files) are in the same folder.
The fun begins when you’re done editing, laying out and linking pages together. That’s when you get to show off your skills and crazy ideas. Mockups’ full screen mode has a huge blue mouse cursor that’s impossible to miss, and there’s a button to hide your little comments and sticky notes.
Let’s start off with the obvious one. Mockups is built with Flash, and Flash sucks. I know that I’m going to raise an entire crowd of “Flashists” against me, but there are only so many things you exclusively need Flash for, and applications isn’t one of them. I could partially justify it if Mockups was an online-only service and it was impossible to implement otherwise, but MockingBird proves that assumption wrong.
As for the desktop version, Flash is even a worse excuse. Nothing beats native applications, no matter how close you come. I don’t care how you build, what tools you use, but it has to look and act like everything else on my desktop. I expect the same shortcuts, the same behavior, the same dialogs and the same extensibility, especially on a Mac.
Another caveat is that Mockups’ thinks a project shouldn’t be more than a folder with a few mockup files in it. Mockups lets you create links only if the mockup files are in the same folder, and it turns a blind eye to files within subfolders. This it too simplistic an approach for large projects where things get hairy and organization is vital.
Speaking of links. I like MockingBird’s approach better than Balsamiq Mockups. Mockups makes me click on a widget, go to float properties window, then select a page from a drop down menu. It’ll be great if I could drag a page and drop it on the element to link them together. I don’t want to spend time hunting for anything in dropdown menu.
These are the biggies. The rest of the little bugs are easier to forgive. Like the useless grid that you can’t snap to. Mockups remedies that by snapping to existing objects, so you can center things and align them together. But the grid is ticking me off. If it’s there, I should be able to snap and resize my objects to it.
Keyboard navigation is only 80% where it should be. Since I’m not drawing anything, I want to be able to move through objects using a keyboard. Or navigate the widgets library. I want to use my Tab button to switch between selected elements. I add and place my widgets without having to resort to a mouse.
In a nutshell: Buy Balsamiq Mockups (or review it on your blog). It does exactly what you would need, and nothing more. This “nothing more” is what sold me on Mockups.
It’s been nearly two years since I last wrote anything public aside from my Twitter timeline. Writing this only reminds me how rusty my fingers and brain are.
I could of course cite excuses. Lack of time, excessive driving around the streets of Dubai, clients to keep up with, decreasing interest, or extraterrestrial captivity. But I’ll choose the less common path of admitting negligence.
I’ve never wrote for fame or fortune; that’s what my daily job is for. I’ve started Scatterism back then, before blogging was hip and it’s since been my public dump of thoughts, ideas and opinions. I’ve written with moderate activity since 2003, up until April 2008, which ended with a comment on Pidgin’s support for voice chat. Not a glamourous exit I’d say.
I have neglected this blog for longer than I care for. I’ve even reached the disparate measure of taking down the front page and redirecting to my less formal, more active and trivial Tumblr blog Scatters & Confetti.
Before I get back to blogging and restart Scatterism, I’d like to share with you a few highlights of my past couple of years in Dubai:
There are three popular messengers that support voice calls: MSN (or Live) Messenger, Yahoo! Messenger, and Google Talk. While MSN and Yahoo use proprietary protocols, Google relies on extending a popular messaging protocol called Jabber, which makes it all the more relevant.
Google implemented voice chat in Google Talk and packaged that implementation in a library called Jingle, which was then transformed into a proposed Jabber standard, XEP-0166. Note that Google’s libjingle is not an exact implementation of XEP-0166, it differs slightly in the way it initiates its sessions, but that’s just a minor inconvenience.
Jingle has been introduced back in 2005, and even three years later, while most messengers tried to incorporate it, most still don’t support it. That’s why I got excited when I read Ticket #34 on Pidgin’s Trac. The ticket includes a bunch of patches that link Pidgin with Farsight which already supports Google Talk and Jingle.
Now the ticket isn’t assigned to a milestone, so we won’t be seeing voice support in the next couple of Pidgin version, especially that this code is only a month old. But the ticket’s been there for a year, and somebody has decided to dedicate some time to it, and that’s always a good sign.
I’m glad that the Pidgin team decided not to re-invent the wheel, and use Farsight. Pidgin can now, without much effort, support proprietary protocols as soon as they are implemented in Farsight. Meanwhile, I can stick to Tapioca for when I absolutely need to hear a human voice.
Nanoweb is a Web server written entirely in PHP. Of course it’s not the kind of server you’d use with YouTube’s traffic, but it’s great for personal use, especially that it only needs a copy of PHP to run.
I needed a portable Dokuwiki that I carry around on my USB stick. Not only carry-in-key-chain portable, but also cross-platform platform portable. Mac OS and most Linuxes come with PHP installed, so I can run my pocket wiki without fiddling with configuration files. The Windows version on the other hand, needs to include PHP and some extensions, which amount to about 5MB extra.
The details are explained in the README file which you’ll find in Nanostick’s package. Nanostick by itself only weighs 250KB; adding PHP and compressing it leaves us with 2.5MB.
Version 0.0.1 includes a copy of PHP 5.2.5 for convenience only. Any subsequent version will not have PHP included.
Let me know if you face any trouble with it, or if there’s anything I can do to improve it.