Balsamiq mockups: draw detailed GUI mockups in minutes

Since the launch of AIR, Adobe have had a product marketplace for applications written using AIR. In amongst the dozens of twitter clients that clog up its pages, one can occasionally find a real gem of a product. One such application is Balsamiq Mockups.

If like me, you hate creating mock-ups with pen and paper, then normally you are limited to two choices:

  1. Use some sort of overly-complex CAD or structured drawing package like Visio
  2. Use a paint program like MS Paint or Paint Shop Pro.

Both solutions are far from ideal, and it will often take far longer to create (and modify) the resultant mock-up than it would take to draw it with pen and paper.

Balsamiq Mockups addresses this issue really nicely. I offers an interface that is is simple to use, is geared specifically toward drawing mock-ups, and – as an added bonus – the skins applied to the components makes then look like they were drawn with pen and paper. It only costs $79 a license too.

As an experiment, I downloaded the trial version, ran it and attempted to create a mock-up myself. It is of a AIR-based Google chart generator that I started working on months ago (but haven’t got anywhere with due to other commitments, so don’t hold your breath for it if you think it would be useful).

The total time taken, including installation, learning to navigate around the tool, drawing the mock-up and taking a screen grab of it took about 20 minutes. With a bit of experience, I could easily have created this in just a couple of minutes, far faster than using pen and paper. Yet the resultant drawing is fully editable, unlike a pen and paper version. It really is an easy tool to use and I’ve become an instant fan of it 🙂

Adobe AIR Tour Europe: Free workshops on using AIR

on AIR Tour Europe
With Adobe releasing version 1 of their Rich Internet Application (RIA) IDE – AIR – (TLA cubed!) yesterday, now is a good time to plug their free AIR Tour Europe event. They will be visiting 12 cities across Europe from March to June, offering a day’s free training in using AIR. Registration is a breeze too, so there is no excuse not to be there.

Forget Web 2.0 and Web 3.0: a real web upgrade is on the way

W3CIn recent years, we have seen “Web 2.0” technologies push HTML to its limits in terms of making the web act like a set of applications. Google docs and spreadsheets are representative of how far those limits have been pushed, but they also highlight how short of being true applications, HTML-based apps are. This has prompted talk of “Web 3.0” whereby HTML will take a back seat to Flash and Silverlight based Rich Internet/ Interactive Applications (RIAs). Part of the reason for this push to Web 3.0 is that it has been seven years since the last HTML standard (XHTML 1.1) was approved by the W3C. The standard that underpins the web is ridiculously old in internet terms. Four years ago, talk began over HTML 5. Four years on, today finally sees the release of the working draft of this new standard. If the W3C can pull its collective finger out and get the draft ratified in the next year, then it will be a very exciting release. If they continue at their current snails pace, then sadly they will likely have missed their chance and the web will be destined to become a Flash and Silverlight hell-hole.

So why is HTML 5 so exciting? The answer is simple: it fixes just about all the current shortcomings of HTML that Flash, Silverlight, PDFs and Quicktime seek to fix without needing plugins for all of the above (and possibly not getting a plugin for one of the above if you are on the “wrong” browser or operating system.) It also fixes a bunch of problems that none of these plugins successfully fixes by themselves:

  • First there is the new <canvas/> element. This element allows on-the-fly drawing on an HTML page, with lines, gradient fills, drop shadows, transforms and the like using JavaScript. Think Silverlight 1.0 built into the web browser with no need for a separate download.
  • Next there is the <movie/> element. No more having to embed the Flash/ Silverlight/ Quicktime/ Media Player object within the page; just use the built-in tag.
  • Want to do documentation in HTML? Fed up with the lack of proper mark-up tools? Currently this drives people to use PDFs (or, if they are really clueless or just joined to Microsoft at the hip, Word Docs) instead. The inclusion of sections with headers and footers, figures, asides etc now provide a much richer suit of mark-up tools for HTML documentation.

The really clever new stuff though includes:

  • History and location support. The page will no longer be limited to trying to trap the page back event, it will now be able to find out its own history in terms of the page back and forward URIs and state models (state objects that the page can define).
  • Storage. Persistent local storage that includes a SQL database will be available to the page for storing state data locally on the user’s machine.
  • Offline application support. The client will provide an application cache, allowing an HTML-based RIA to ensure the JavaScript, images etc required for it to function correctly offline are stored in local cache before the application starts. So a blog entry editor application for example might download recent posts to local storage and its application model to cache. Then when the user edits a post and saves it, it could be re-saved to local storage for later synchronising if off-line, or uploaded immediately if on-line.
  • Documents become editable. Set the designmode attribute to “on” and the whole page becomes editable. Will the whole web become a giant wiki?

The scope of the changes from v4.1 to v5 of the HTML specification is vast and I’ve only touched on a few aspects. If you want the full story, grab yourself a huge mug of tea or coffee, set aside a few hours and read the HTML 5 Working Draft.

RIA: Ridiculously Idiotic Acronym?

I came across this cartoon on the blog of one of the planned speakers at Flash on the Beach, Keith Peters, but the original (with follow-up cartoons that continue the “story”) can be found on Nectarine Juice. The follow-ups can be seen here (part 2) and here (part 3). Part three is all too true, but I’ll let you read it rather than spoiling the punch line for you.