Blog Post

Mockingbird: Build Web Site Mockups Fast

Mockingbird - UntitledWhen you’re trying to pull together all of the elements for a website, having a tool that can help you to build a mockup or wireframe in a matter of minutes can make a world of difference. Mockingbird is such a tool: You can drag and drop user interface elements onto a page, rearranging and resizing as you go. You can even link together the various pages within your mockup so that anyone you share it with can immediately see how a user might navigate through the site.

The web-based application has been developed with simplicity in mind. Any task that could be made automatic or streamlined has been. Even sizing text has been automated — if you resize an object, any text associated with it will be adjusted to match. You can add as many pages to a mockup as you like, with as many elements as you need. Mockingbird offers a wide array of user interface elements based on the elements that are commonly used in building web sites. From embedded videos to different types of text, you can easily drop in anything you’d expect to see on a web site. It’s the little things that make Mockingbird a solid tool: you can snap elements to a grid, so that your mockup looks clean without requiring you to spend extra time getting it that way.

Mockingbird - test projectUnfortunately, there are no templates that you can base your designs on, but overall, Mockingbird has been designed with speeding up the process of creating a web site in mind. It’s easy to share a mockup with clients or other stakeholders in the design process. Mockingbird will provide you with a link that you can send out, or alternatively you can use an embed code to place it on a web site.

Being able to embed your mockups is a nice alternative to trying to share a mockup with a whole list of people via a email — instead, it’s just a matter of following a link over to whatever system you use to communicate with coworkers or clients as a matter of course. There’s also no need to install anything in order to view Mockingbird’s mockups — even Flash is unnecessary. The application is based on Cappuccino, a web app framework that doesn’t use plugins. It may not be the best choice for projects that require some privacy, however, as it looks like anyone with the link can check out your mockup.

Mockingbird is in beta and is currently free to use — you can actually demo the application without even registering. However, to save a mockup, you’ll need to provide an email address and a password in order to create an account. If you just need a tool to pull together a quick mockup, it’s ideal — you don’t even need to know much about web design, making it useful for a non-designer communicating ideas to a designer, and the ability to embed your wireframes is a nice touch that isn’t available in some of the other wireframing web apps like Balsamiq and FlairBuilder. However, if you’re doing a lot of web design work, you may need a more robust solution. If, for instance, your workflow requires you to be able to download your mockup to use in other apps, Mockingbird does not currently provide that option.

Which wireframing tools do you use?

3 Responses to “Mockingbird: Build Web Site Mockups Fast”

  1. I personally use omni graffel which is a great mac app.

    But I don’t think the program matters as much as using a tool like this or mockingbird to help think through the “there there” to the website without being distracted by design elements can really help in getting a web design project off on the right foot.

    No matter the size of the site…

    Thanks and Regards

    Noel for
    a graphic design studio