Wednesday, May 06, 2009

mockup You've all heard the phrase "a picture says a thousand words" and when it comes to someone describing how they want their screen to look like nothing could be more accurate. If you've ever sat with a wordy document and tried to work out how the screen should look you'll know what I mean. This is where screen mock-ups become invaluable. Screen mock-ups have been around for ages and there are a number of packages that facilitate their creation. For example Microsoft's Visio Professional edition comes with high quality shapes for modelling a windows interface.

However many of the available tools have felt cumbersome when first planning an interface. Since I first started developing software I would scribble my ideas for a layout on any scrape of paper that came to hand. In fact lost of things have been design on the back on napkins such as Compaq's first portable computer, see 7 Brilliant Ideas on Cocktail Napkins and Toilet Paper for more examples.

When scribbling an idea down like this the thought can flow freely from your head to the paper and this is what I've always missed when designing screens on a computer. But recently I started playing with Balsamiq. This is a very simple tool from as they put it 'a couple of guys in a studio' and it's awesome! The thing that won me over so quickly is just how simple and unobtrusive the software is. It feels as close as you'll get to scribbling your ideas for a screen down on scraps of paper.

Check out this video on YouTube showing Balsamiq in action! Also checkout the web site that has loads of examples http://www.balsamiq.com/products/mockups.

 

The really cool thing about these mock ups is the simplicity, by being so simple people are free to focus on what data they want on the screen and where this should be placed thus avoiding be dragged into a needless discussion in the preliminary stages on what font face should be used.

Now this isn't the end of the story along with the ultra cool minimalist desktop version Balsamiq has versions for Confluence, JIRA and XWiki. You can see how if you have these tools developers can edit the screen mock-ups within a web browser using the Balsamiq plug-in.

 

 

You can see how this really helps in communicating ideas about the design of the UI and therefore save you time and allow you to deliver a UI that matches what the customer wants.

Balsamiq is always improving take a look at the company's blog to keep up-to-date with the latest developments. Also check out Mockups To Go, this is a collection of user contributed ready to us UI components and design patterns built using Balsamiq mockups. To give you an idea of what's on offer the screen shot below shows a sample of some various web parts that are available.

balsamiqWebParts

posted on Wednesday, May 06, 2009 6:25:23 PM (GMT Standard Time, UTC+00:00)  #    Add Comment | Comments [2]