Pinterest Stumbleupon Whatsapp
Ads by Google

mockup builderSo 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:

mockup builder

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:

mockup builder application

Ads by Google

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:

mockup builder application

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:

mockup builder application

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:

free mockup builder

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:

free mockup builder

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:

free mockup builder

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:

Image

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:

Image

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:

mockup builder

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.

  1. Mockup Builder
    July 2, 2011 at 7:44 pm

    Erez we really appreciate your so detailed review , thank you! 

    • Anonymous
      July 2, 2011 at 7:45 pm

      Sure thing, it's a lovely product!

  2. Saikat Basu
    July 2, 2011 at 2:44 pm

    Combine it with some online collaboration and you have really good tool.

    • Anonymous
      July 2, 2011 at 7:35 pm

      Yeah, being able to Skype while working on mock-ups, with each person moving parts around the screen would really be a killer feature.

    • Mockup Builder
      July 2, 2011 at 7:42 pm

      We are working on online collaboration we should have near realtime online collaboration. 

      • Anonymous
        July 2, 2011 at 7:43 pm

        Woo! Feel free to ping me when it's ready, erez at makeuseof.com

        • Mockup Builder
          July 2, 2011 at 8:46 pm

          Will do for sure

  3. Karthik Prabhu
    July 1, 2011 at 3:56 am

    This seems like a really nice tool. I am currently working on the designing of my new blog. I have a friend who works with me as a graphic designer. Since, we live in different cities, we find it really difficult to communicate our ideas. This tool will be really useful for us. :)

    • Anonymous
      July 1, 2011 at 7:27 am

      That's fantastic, Karthik! Happy to hear that. :)

Leave a Reply

Your email address will not be published. Required fields are marked *