3 Tools to Intensely Mock

Who hasn’t, at one time or another, needed to mock up a web page, a user interface, or even a complete application? For a designer or developer, sometimes it’s best to whip up a quick mock up for management or clients prior to starting a task. That way you get sign off from the VIPs before you put a lot of time and effort into it.

Recently I was presented with a couple of projects that required mock ups. The first was back in September and dealt with redesigning the layout of our monthly newsletter. The second task is currently in progress and has to do with a top secret hosting project – let’s assign code name “Stratus” to it. As both projects had different requirements, I used a few different tools to accomplish my goal of creating working, presentable mocks ups (and in the latter case, a small working demo). Since I went through the legwork, I thought it might be helpful for readers if I gave some detail on the tools I used for the mocks, and presented some thoughts on each. Obligatory Note: realize these are my opinions, and you mileage may vary. As an aside, I didn’t “dislike” anything in any of the applications. However, I did experience small hiccups with each. Most of them had to do with “designed limitations” of the applications themselves, meaning I wanted to do more that what the application was designed to do.

Mockingbird

MockingbirdBy far the simplest and cleanest application I used. Mockingbird is a free online app (sort of like Aviary.com is for image creation), so there isn’t any need to install any software. With it you can create basic, somewhat static, mock ups of web pages, email blasts, and even basic applications. I found it’s interface very easy to use.

Likes – It’s free, which is always good. It’s web based, has a simple interface, is cross platform (browser agnostic) as it uses Cappuccino versus Flash. It’s great for mocking quickly, your can create and link multiple pages, clean layout of mocks once you’re done, lots of control (or “widgets”). Once finished you can share via direct link or embedding you mock up into a web page. Mockingbird saves your work remotely, so it’s available from anywhere.

Hiccups – Not great for creating (but not designed to create) functional demos. It’s a bare bones mock-up tool, and it does that really well, but if you want to see how something works, it’s not the best choice. Also, you can share the mock, but for saving/exporting you can only export to PDF or PNG. Some of their widgets are a little superfluous (e.g., the copyright and registered symbols).

Perfect For: Simple, clean mock ups. I think best for web-based sites or applications. I used it to mock up our new newsletter layout and also as a way to mock up the initial thoughts/ideas surrounding Newtek Web Services.

More Info: http://www.gomockingbird.com

Balsamiq Mockups

This is a bit of an upgrade over Mockingbird as it offers a greater level of functionality and interactivity with the mocks it creates. However, it’s not free (at least the desktop application isn’t). Again, a very, very good tool and really the next step beyond Mockingbird.Balsamiq Mockups

Likes – First, let’s carry over the “Likes” from Mockingbird as they all apply (well, except for the “free” one). Then, take the simplicity of Mockingbird and add some functionality. For example, if you create a drop down, you can populate the drop down with actual sample data. You can also import your own graphics – This is helpful for mocking new site or application pages as you can carry over a consistent look and feel from existing projects. Mocks look like you’ve drawn them on paper so there is an informal look – almost like “back of a napkin” planning. Easy to create mobile mocks that look like they’re on a mobile device. Integrates with several Wikis for a greater degree of collaboration.

Hiccups – Finished mocks still aren’t functional. For example, while you can create a drop down box and populate it with sample data, it doesn’t actually work like a drop down box. The handwriting look can keep people from taking the finished mock up seriously (was a comment from one of our internal Developers). Desktop version has a cost, though it’s minimal it can be a deterrent.

Perfect For: I used this to mock up the initial ideas around Project Stratus. So it’s great for mocking up simple sites or applications, but with more personalization/branding that what you can get with Mockingbird.

More Info: http://www.balsamiq.com/products/mockups

Expression Blend with SketchFlow

sketchflow-1Really, the Heavy Hitter of mocking up a project. This is an extension to Microsoft’s Expression Suite. It allows you to create fully functional mocks and demos of just about anything you want: web sites, pages, desktop applications, web applications, mobile sites/apps/interfaces…you name it. Robust, feature-rich, and a price tag to prove it. This is really best used by a hard core UX/UI designer with either development and coding experience, or at the very least a resource that can code back end processes. Don’t get me wrong: this is a fantastic tool, it’s just not for the faint of heart.

Likes – Can deploy as a Silverlight project or WPF application. I used the Silverlight option so the controls work as intended in a web browser. Regardless, this flexibility lends to a more complete feel for your mock up if you can add real working controls (e.g., sliders and drop down boxes). Mocks also integrate with Visual Studio, so it’s little easier to take from mock to production. Can have viewers add comments to the finished mock, and those carry into the project. This level of collaboration is head and shoulders above what Mockingbird or Balsamic Mockups offers. Microsoft offers a 60 day free trial.

Hiccups – It’s not a beginner app, so for me, the coding required to get controls to work took the longest. I’m not a C# programmer, but I did some coding in a past live (mostly Java and VB) so I adapted fairly easily. However, others may not be so lucky. Then again, a user can mock up the UI and someone can code the back end. OF course, this is a paid application, so there’s that to consider. Relies on Microsoft technologies (Silverlight and WPF), so “haters” may not approve.

Perfect For: I used this to create a more detailed and functional mock up of Project Stratus. However, you can easily use this for mocking up anything: a website, a web application, a desktop app, mobile app…whatever.

More Info: http://expression.microsoft.com/en-us/cc136530.aspx

So there you have it. A fairly unscientific overview of 3 tools you can use to mock up your next project or earth-shattering idea. Did I miss anything? What are other tools out there, free and paid, that people can use to create mock ups or functional demos?

VN:F [1.9.1_1087]
Rating: 0 (from 0 votes)
Share So Others Can Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • FriendFeed
  • LinkedIn
  • MySpace
  • StumbleUpon
  • Technorati
  • Twitter
  • Tumblr

2 Responses to “3 Tools to Intensely Mock”

  1. Regarding Balsamiq, I think the handwriting font shows that it is a “mock up” and not representative of the final product’s design, simply its functionality and the elements on the page.

    I have found Balsamiq to be very useful and much quicker than HTML mock ups. There is also a companion product (Napkee) that will generate HTML from the mock ups which is pretty cool….

    VA:F [1.9.1_1087]
    Rating: 0 (from 0 votes)
  2. Seth,

    Thanks for the comment. I haven’t heard of Napkee but I’ll take a look at it. The ease of Balsamiq is really key, and if Napkee is as easy, but converts to HTML, then it’s a winner!

    VA:F [1.9.1_1087]
    Rating: 0 (from 0 votes)

Leave a Reply