A fast and fun way to mockup almost anything

Online Mockups…easy!
Part of the reg­u­lar web devel­op­ment cycle is the user inter­face mockup. I’ve worked with many dif­fer­ent tools includ­ing Google Sketch­up and Adobe Pho­toshop to build rep­res­ent­a­tions for clients.

But noth­ing has been as quick, easy, and fun as Bal­samiq Mockup, and online (and desktop/offline) user inter­face mockup tool for PC, Mac and Linux.

Desktop ver­sion is $79, but the online ver­sion is free, with some lim­it­a­tions.

I’ve done a couple of small pro­jects for per­son­al work using the free (5 minute nag screen) online version.

Mock­ing up
Here’s how easy it is to use:

1. Load up the default ‘demo’ page.
2. Press Ctrl‑A to select all default elements
3. Press Delete to remove all default elements
4. Start select­ing and drag­ging in ele­ments from the ele­ment bar at the top of the page (over 60 of them)
5. Double-click on an ele­ment to edit its properties
6. Repeat until you’ve got a mockup you’re happy with

Yes, it’s that easy.
With the free online ver­sion, you’re promp­ted every 5 minutes with an advert­ise­ment, but you can still save your work or print it out. Ads don’t get in the way of your workflow.

Developers have chosen a simple, look for the present­a­tion because:

Bal­samiq Mockups inten­tion­ally uses hand-drawn UI ele­ments, so that people don’t get attached to “that pretty col­or gradi­ent” or think that your mockup has actu­al code behind it and is “practically done”.

This lets your audi­ence focus on the func­tion­al­ity of the item and is gen­er­ally more open to hon­est cri­tique (which is what you want at the mockup stage).

Some oth­er fea­tures of the online version:

• Export to Human-read­able text
• Import from text
• Integ­rated into Con­flu­ence, with oth­er apps in the pipe
• Pre-drawn con­trols and icons
• Very easy to use
• Free 🙂

So, if web User Inter­face design, User Exper­i­ence design, or web­site design is your thing, you need to check out Bal­samiq Mockup.
Tech­nor­ati Tags: mockup, user inter­face design, UI, User Exper­i­ence, design, web­site, web­site design, mockup, Bal­samiq Mockup, review