Mockup Builder Helps You Quickly Get Your Ideas On-Screen

So you have this incredible idea for a website. It’s kind of like LOLCats meets Star Wars, with a dash of Foursquare thrown in. It’s going to be bigger than Facebook. But when you try to pitch it to your friends or potential investors and show them how awesome it is, you run into lots of blank stares. What you need is a mockup, or a “dummy version” of your site, to help people understand your vision in clearer terms.

Another case where you may need a mockup is when re-designing an existing site, or extending it with a new section. Mockup Builder is a Silverlight-powered Web app that provides a very effective way to put those mockups together.

For this review, let’s start from the end. Here’s a mockup I made with Mockup Builder in a couple of minutes:

So we’ve got a headline, a subhead, a button and a video player. Anyone looking at this can see at a glance what these components are and where they sit on the screen in relation to each other. Now let’s see how I got them there:

So the interface looks a bit like the Ribbon in Office 2007/2010. It’s a horizontal menu up top, and then a row of large icons in every category. Not only is it similar to the ribbon, but it also gives a nod to Mac OS X’s dock:

See that zoom-in effect? Nice. Basically, all you have to do is go to the category of the item you’re looking for, find that item, and drag it onto the canvas. Removing an item is just as easy — just click it and hit Del. If that sounds basic, it’s because this is an app you’re supposed to be able to use instantly. Ideally, it should be as easy as drawing your mock-ups on paper.

Once you put your UI elements on the screen, you might want to align them. When you select more than one element, the sidebar changes to present a list of alignment commands:

Some of the icons are a bit similar, but if you hover over them, they show clear tooltips.

Next, let’s talk a little bit about the Screen Manager. You can use Mockup Builder to plan more than one screen. For instance, you can build a Wizard in an app, or a site registration process. Each step would take up one screen, and you can add as many screens as you need. But if it’s a Wizard interface, many elements repeat. The window always has to be in the same size, and you always have a Next and Back buttons. Mockup Builder’s developers thought about that, which is why you can create “Template Pages”.

A Template Page is just a basis for another page. You can create one page with your frame, and then use it as the template for all other pages. Here’s an example:

See how the background is greyed-out? That’s because I just created a new page, used my “main” page as the template, and added an alert box on top. That was easy!

But how can you switch between screens? Well, I’m glad you asked! Turns out you can select any element (button, label, whatever) and just link it to a screen. Here’s an example:

In this case, I linked a button to Screen 3, which is the Alert screen. So when you click that button, the presentation will jump to screen 3. That’s right – I said presentation, and that’s what we’ll look at next. After all, when the time comes to share your brilliant idea, you’ll want a nice way to show your mockup. Mockup Builder provides a Presentation View just for this purpose. It looks like this:

So your mock-up looks exactly the same, only it’s “static”, so to speak. In presentation mode, links work (so if I click Boom!, I get an alert box). Also, you can’t drag elements around just by clicking them. You get a host of other tools useful for talking about your creation (rather than directly changing it). Here’s the presentation-mode toolbar:

The first button exits presentation mode – they could have made this clearer. But the others are quite clear. You can point at things on the screen, doodle around them, erase other marks (not the mockup itself), add text, etc. Here’s my interface after I played with some of the presentation tools:

This is fantastic for showing things on-screen in a presentation, or even in a Skype screen-sharing session. Speaking of which, you can also invite other people to look at your mock-up:

The resulting email contains a simple link. In fact, let me share it with all of you right now: http://mockupbuilder.com/App/132 — simply click that, and you’ll be transported right into this cutting-edge self-destruct interface, which you can tweak and improve to your heart’s content.

Bottom Line

As a web designer/content author, I am often called upon to come up with new layout ideas. I have no doubt I will be using Mockup Builder for this in the future — it is a very capable, fast and free tool. Lovely. Have a go at it yourself and let us know what you think of it in the comments.