Mockingbird

December 18th, 2009.

mockingbird-web-design-tool-title

Mockingbird is an online tool created to assist in the early stages of web design. While still in ‘beta’ stages, Mockingbird already looks to be a useful utility.

Create mock ups of your layouts

Mockingbird allows you to ‘mock up’ designs and layouts using a wire frame mesh, in a web-based environment – there’s no downloads, its straight from your browser window. It doesn’t even require Flash.

mockingbird-main-page-wireframe-layout

The opening shot shows how Mockingbird could be used to mock up YouTube

With Mockingbird, you can lay out your pages in its most simplistic form – where your headers and text will appear, breadcrumb links, perhaps even embedded videos or form elements, all by drag and drop.

What this means is you can very quickly turn your ideas into pages, considering the focal points, rearranging text, decide whether or not you need a bit more navigation. All that kind off stuff. But, without having to mess about with a pile of layers within Photoshop.

Using Mockingbird

The workspace in Mockingbird has a whole host of features. From Undo/Redo, grouping your elements, sending them from back to front, and the most useful of all, Align. All the things you might expect from your average design software package.

mockingbird-workspace-for-web-design-layouts

Your first mock up starts as a bit of a mess, but it gets the point across.

Its also all very easy to understand and use. There’s the usual toolbar on the left hand side, where as your workspace is the white area to the right – which expands to fit your work as you drag and drop.

The workspace also includes a wide range of your typical web and UI elements, such as input boxes, tab containers, and link bars as well as your more uncommon features such as star ratings, tag clouds and volume sliders.

mockingbird-workspace-typical-html-features

Just a sample of some of the drag-drop elements available

Many of the elements can also be customised – the ‘progress bar’ for instance will fill to whatever percentage you specify, or the star ratings will highlight the number of stars you specify.

Save and Share your designs

One of the major benefits to Mockingbird is that you can save your designs, as well as share them with fellow designers or even your clients for approval.

mockingbird-workspace-save-your-design

A mock up of the Internet Assets homepage

This was a quick design I did a few months ago when designing the Internet Assets layout. If you’ve seen our homepage, hopefully you can see the resemblance.  This Mockingbird mock-up was very quickly put together – but allowed guidance and allowed me to stay on track while using Photoshop.

The point is, even though it was done a number of weeks previously, I was instantly able to reclaim my design untouched by logging in with an email address.

Your designs can also be exported as PNG images of PDF files, to be able to share with your clients, and share with them your ideas before throwing hours into Photoshop to find they’d rather not feature embedded videos on the front page (for example!).

You could maybe even allow a client to have a go, and send you their thoughts on element positioning without them ever having touched Photoshop or HTML.

Some other nifty features!

  • Create multiple pages for your layout, under the same saved design.
  • Link these pages together as if they were on a live website.
  • Snap to grid – will try to auto align the elements you drag to features of your design.
  • Produce clean layouts without getting hung up and bogged down in the details.
  • Auto resizing of text and elements by dragging their corners – no need to fiddle with your pixels!
  • …completely free!

Or you could hire us!

If you’re looking for a new web site, web design, or even have a website and want it re-designed. Take a look at our portfolio of work, the many web design services we provide, and contact us today to own a website that you’ll be proud of.

About

Mark is a web designer / developer working for Internet Assets from Lancashire, England. He is a graduate of Graphic and Communication Design from the University of Leeds, and is keen on all things related to technology.

Comments

  1. Raz says:

    Hi. Mockingbird is a great tool. I was thinking about making a tool like this. Now I don’t have to. Thanks! I’m wondering if there is a way to export a PDF with layers for Photoshop. Or better yet, a PSD.

    Thanks,
    Raz

Don't be shy. Leave a comment!

(Required)

(Required, not published)