In the past year or so the number of exciting new wire-framing and prototyping tools has exploded. Some of them, like Balsamiq, have carved a niche and generated an almost cult-like following amongst their fans. Others have made nary a dent and so it’s always interesting to see new entrants into this hotly contested market.
App Sketcher is one such product. Its creator, Feng Chen, aimed to create a tool to ‘quickly model web application flow and interactions’ which was ‘simple enough for non-programmers to use’.
App Sketcher has recently emerged from a successful beta programme during which Feng listened closely to user feedback and suggestions so that he could fine-tune App Sketcher in a way that gave it a distinct identity and place amongst the throng of prototyping tools around today.
Priced at $79 (around £50) it’s squarely in competition with tools such as Balsamiq, and it seems only fair to look at how the two compare. Of course, they’re different in their approach but share a number of similarities and I’d reckon that most people in this market would probably look to compare the two and make their own mind up – which is the approach I’ll take.
App Sketcher appears at first glance to have more in common with tools such as Axure RP Pro or JustProto, given its more conventional interface. On the left side there are the usual elements which can be dragged directly onto the tabbed workspace. Unlike JustProto, which runs as a rather clever web-application within the browser, or Axure RP Pro, which is a stand-alone application, App Sketcher takes the Adobe Air approach. This is becoming more common – it’s the way Balsamiq does it too, incidentally – and although it closes off the use of the software on things like the Apple iPad, it’s an acceptable compromise between heavy-weight installed applications and web-based apps.
One of the real attractions of App Sketcher is that, unlike Balsamiq, it aims to cover both the simple-wireframing and the more complex interactive prototype angles. This is, however, a tricky path to take as there’s a real danger of being okay at both but excelling at neither. To test this out, I set myself a little challenge.
Game, Set, Match?
Now, I’ve had a week and a bit of hard design work behind me so I wasn’t in the mood to think too much. I decided I’d simply see how much work there would be to ‘copy’ an existing web-page. As Wimbledon is, well, wimble-done for another year (better luck next time, Andy and because I once lived within a few minutes walk from the infamous grounds, I decided to use Google Maps showing SW19 as my example. Firstly, here’s how it looks, hot off the Google Maps page:
…and here’s my attempt. It took me maybe 15 minutes to do this, and some of that time was simply me climbing the (relatively shallow) learning curve:
It’s even possible to add in some rudimentary functionality, such as popup alerts or navigation:
I then had a look at the other features that App Sketcher can offer. What’s quite intriguing to me is the level of functionality that comes ‘out of the box’, so to speak.
For instance, I created the following mockup in around 5 minutes from start to finish. Which includes a working accordion control and tabs:
I am really quite startled at how easy this was to do and in some ways it moves the bar forward to bridging the gap between quick wireframe design and detailed interactive prototype design. I haven’t actually included it as part of the review but one with a single click of a button you can actually get your prototype to render (properly) in a browser.
Whether this actually matters is of debatable value – it’s easy for people to get bogged-down with constant cosmetic distraction – but at least it is there should you want it. It would certainly have benefits for demonstration, but there is always a risk that clients start treating your prototype as the ‘first version’ of the actual system…
Sure, it’s not totally perfect but it is more than good enough to leave me suitably impressed. In fact, the html that it generates ain’t too shabby either – I think there is a lot of jquery wizardry going on behind the scenes and it all hangs together with a surprising amount of polish.
The choice between wireframe and interactive prototype
As some of you long-time readers might recall, I’m always keen on people choosing the right tool for the job. Last week I wrote at length about the uphill struggle that faces some people trying to do this sort of stuff using Excel and I’ve mentioned the perils of trying this in PowerPoint in the past too. Prototyping tools tend to fall into one of two main camps (if we exclude the crazy use of totally inappropriate tools such as Excel and PowerPoint for one moment): wireframing and interactive prototyping tools. Balsamiq is a wireframing tool and Axure RP Pro is an interactive prototyping tool. You can create a great sketch of a design in minutes using Balsamiq but to make it dance and look like a real web application isn’t where it’s at. Conversely, Axure is a bit of a sledgehammer to crack the wireframe nut, but it excels at the fiddly interactive stuff.
It’s important to choose the right kind of tool which will help you – and this normally depends on the stage of a project you are currently at. What’s really interesting about App Sketcher is that it appears to be able to offer both, at a very compelling price-point, and with a pretty flat learning curve.
I’m not always the best person to assess how easy these tools are to use as I’ve used a lot of them both professionally and through my own personal interest, but App Sketcher really does seem to be a rare combination of ease-of-use with capability.
Capability? Well, if you want your app to look ‘sketchy’, all you need to do is to choose the appropriate theme:
…look familiar? Or how about something with a bit of sunshine?
The perfect solution?
Afraid not – no software is, and expecting perfection is always a folly. Along the way I did encounter a few glitches but to be honest I had to really dig to find anything bad to say about App Sketcher – it is a really good, solid little app.
To be sure, it is difficult adjusting items on a black background – the cursor doesn’t change to a light colour so I had to move things, adjust, then move back. Another thing was the way that multiple selection of elements appeared to work; when I had more than one element selected (of different types – in this case an image and a hyperlink) I couldn’t move them using the keyboard. Which is a nuisance as I think that high-fidelity prototyping often requires precise placement of elements. I also found it a bit difficult at times to move some of the more complex elements using the mouse – there is a facility to switch between the parent container and the individual sub-parts of a complex element but I found some difficulty with this.
The difficulty of writing reviews like this is where to draw the line. There are many, many other features in App Sketcher that I’d like to talk about. Such as the SlideShare and YouTube elements, or the ability to show dynamic views off the back of a mouse-click. Just take it from me, App Sketcher rocks!