Website Mockups Done Incredibly Easy

Recently I found myself with the desire to start a new site. Rather than jumping into Visual Studio headfirst, I sat down and thought about how to start.

  • What technology am I going to use? I always jump to this in the Top 5 Things I Consider, and I know it's not terribly important, and I know I should be thinking of other things. I always know the answer to this question, though.
  • What features should be on this site? Getting warmer. I typically write down the main features of the site goals of the user in point form. I am trying to train myself with this way of thinking: The site doesn't matter without the users wanting it to. Don't think about features, think about the user's goals.
  • Monetize? Sure, in some small way, but that's not the main point of this new site, though.
  • How will the user see and contribute to the site? Most important and relevant question. Piss off your users, or make it too complicated, or too lame, and you'll lose visitors.

The typical process I go through when faced with a new idea and a fresh start is to pull out the pad of paper and a pen. I am not a design genius, like most software developers, but try my best to grok user experience. Sometimes I fall flat, sometimes I look back at previous work and throw up a little, and sometimes I am happy. Most of the time, I think I'm just lucky that I don't have too much scrutiny on my layouts and flow in my corporate line of business web apps.


I found this site recommended a few times on Stack Overflow. It's almost self explanatory to how the site works.

mockingbird mockup of youtube

Draggy, Droppy, Stretchy, Copy There's a palette on the left, and a design surface on the right. Make a page for each of the user-goals. This isn't going to be set in stone, and things will change. Arrange the page elements on the design surface as you like.
Some neat features or user experiences I noticed:

  • Labels/text scale nicely as you grab the corner and stretch. It (smartly) figures out when to bold and/or increase the size of your label. Other elements scale beautifully, especially those that are icons – calendar, pie chart, Twitter logo, etc.
  • Double click any element to modify its text or contents – just as you'd expect.
  • Configuring a Linkbar was easy. Mockingbird really nailed this element.
  • You're able to associate links with pages that you've already defined. Just drag the Page on the left onto a form element.
  • Elements are very generic – no Windows or Mac bias. It's just a rounded rectangle representing a button.
  • There are lots of great elements that trigger new ideas. Seeing the Map and the Banner ad were great. Aside - tag clouds – meh... does anyone really like and use the tag cloud in the real world? I know Stack Overflow has one, but I have never used it.
  • The overall feel or experience is very much like a sketch. Positioning elements is made easier thanks to the horizontal and vertical alignment bars. Nice touch!

mockingbird thumbnail grid

Go Try It Just jump into mockingbird. You don't need to create a mockingbird account to try; only to save and retrieve your designs. It's free!
I wonder what platform mockingbird is running? Oh wait, it's called Cappuccino (learn more) and it's

implemented using a new programming language called Objective-J, which is modeled after Objective-C and built entirely on top of JavaScript

Very cool user experience! Kudos to the mockingbird developers Saikat and Sheena.