Design & Dev Tools

The PEC Review: Mockingbird, for Wireframes

In terms of website design, wireframes serve as a visual guide to page structure and interface.

Web designers use wireframes in much the same way that builders use an architect’s blueprints. It is certainly possible to build a website without a wireframe, just like it is possible to build a house without plans, but it is not a good idea.

Whether an online store owner or marketer is designing her own site or communicating with designers, wireframes can be a significant asset, and Mockingbird makes creating wireframes as easy as using a web browser.

Mockingbird, which is still in its beta, is a browser-based wireframing solution from Saikat Chakrabarti and Sheena Pakanati that enables even a novice to create professional looking wireframes in just a few minutes. The tool is intuitive, easy, and functional, which is why I am awarding Mockingbird four and a half out of a possible five stars in this “The PEC Review.”

“The PEC Review” is my weekly column created specifically to introduce you to the products or services that I believe will help you improve your ecommerce business. This week, let me give you a quick tour of Mockingbird.

Web-Based For Easy Collaboration

While I have no intention of debating the comparative value of desktop applications versus web applications (both have their place), I do want to point out that Mockingbird is web based. It runs on any modern, HTML5 compliant browser (more about this anon). So that you can access your wireframes from any Internet-enabled computer and share your work with others.

For example, you might develop a wireframe and share it with a partner, or even provide it to a designer to get a more accurate price quote.

Projects Storage

I also like that Mockingbird thinks in projects not individual pages. In this way, I can create a wireframe for a home page, an about page, an contact form, or even a product detail page, and have them stored collectively as one project.

Simple Page Size Controls

I really liked the way that Mockingbird handled page size, allowing me to set and reset my page dimensions by typing them in, scrolling, or simply adding more content. I know this is a small detail, but it is one of those details that I believe set an application apart, making it exceptional.

Sample of Mockingbird's page size controls.

Sample of Mockingbird’s page size controls.

Drag and Drop Functionality

In Mockingbird, all of your page components–from rectangles to Facebook links–are organized in a left-hand column. You simply click and drag the element you want to the canvas to add it. You can easily edit an element once you have dropped it.

Sample of Mockingbird's drag and drop feautures.

Sample of Mockingbird’s drag and drop feautures.

You even get x and y coordinates so that you know exactly where on the page you are placing an element.

Sample of Mockingbird's x, y coordinate planning.

Sample of Mockingbird’s x, y coordinate planning.

Grouping Capabilities

Mockingbird also allows you to group page elements so that they can me moved or resized collectively. This particular feature is a lifesaver in large projects.

Wireframe Exporting

Once your wireframe is complete, you can export it as either a PDF or PNG file. This exported file might serve as an archived version, if you will, or could be shared with someone that you did not want to have editing access.

four and one-half stars

A Once and Future Price

Mockingbird is in beta until August 15, 2010. Until then, the service is free. After that date, there will be four pricing plans ranging from $9 per month for a personal plan that supports two active projects to an $85-per-month unlimited plan.

Try Mockingbird out before the end of the beta. If you like it as much as I do, the monthly fee will seem nominal.

Supported Browsers

You will need to use Mozilla Firefox, Google Chrome, or Apple Safari to access Mockingbird. Perhaps when Microsoft releases Internet Explorer 9, that browser will have caught up to web standards, and will work with Mockingbird.

Summing Up

Mockingbird is an excellent, web-based wireframing tool. It is simple enough for do-it-yourselfers, and deep enough for full fledged web agencies. At the moment it is free, and even when it does start to cost something, the rates are relatively low.

I think Mockingbird is a great choice for ecommerce merchants and marketers, which is why I have awarded it four and a half stars out of a possible five in this “The PEC Review.”

Armando Roggio
Armando Roggio
Bio   •   RSS Feed