JQuery 1.4 Intellisense for Visual Studio Now Available

I was excited to hear about all the enhancements in JQuery 1.4 but was a bit down when I was unable to locate the intellisense file for Visual Studio even though the 1.3.2 version still was a great help. Since then, I have located it and am offering a link of convenience to the world. Enjoy!

http://code.jquery.com/jquery-1.4.1-vsdoc.js

Simple Yet Sophisticated Mockups

UPDATE 1/20/2010 - In my suggestions list for improvements, I hinted at the inability to step through mockups with Balsamic Mockups while in 'Full Screen Presentation' view. This is actually a feature that is available by choosing the UI elements that support linking and telling it to jump to another mockup. From there you can use the left and right arrow keys to navigate between mockups that were viewed.

---

Creating user interface mockups has always been one of those pesky tasks during the requirements gathering and design phases of a software project. 

Sketching them out on paper leads to lots of wasted paper, ugly designs filled with plenty of eraser marks, and/or poor penmanship.  The use of a more sophisticated tool such as Visual Studio’s RAD designer can look impressive but leave stakeholders with the impression that the software has been constructed to some degree thus in turn creating scheduling debates.

Remove the Mental Clutter

There is nothing better than presenting the raw functions of a conceptual user interface when reviewing with a non-technical audience.  Stripping out the graphics and taking out any visual refinements will almost always let your audience know right away that there will be no discussions about colors, images, and down to the pixel placement of elements.  If you have ever been in a meeting where you are reviewing functional designs, you’ll know the less distractions, the better.

Introducing Balsamiq Mockups

The other day, I stumbled across an MSDN Magazine article which briefly talked about a tool for creating user interface mockups called Balsamiq Mockups (built on Adobe Flex/AIR!).  Normally I’m not one for writing about things that I know someone else has already touched upon but when I tried this tool I was left with a smile on my face. 

It wasn’t a perfect software but I was able to execute a mockup significantly faster than I’ve ever done before and was very impressed with how unimpressive it actually looked.  If you are scratching your head as to why this is a good thing, recall that I mentioned how removing all the lipstick and fingernail polish from a concept can elevate your discussions to where you want them to be at this point in your project.

This mockup literally took under 2 minutes to make.  That’s fast!

The Cool Stuff

Before we get into the short list of dislikes, lets talk about the things that were impressive.

Speed of Productivity

Programmers like to code and it lets you get to it faster.  Need I say more?

Simplicity

As soon as Balsamiq Mockups loads up, you’ll find there is extremely little learning curve.  The interface consists of a library of UI mock elements, a Quick Add textbox, and a design canvas. 

As you drag ‘n’ drop elements onto the canvas from the UI Library, a properties inspector window overlays the canvas adjacent to selected element.  This makes it quick to customize colors, icons, alignment, order/stacking, and any other information custom to the element.

Finally, the greatest feature that makes the whole application worthwhile is how quickly text can be changed with a simple double-click.  If you use Visio or Visual Studio to do mockups, you know that there are property panes and dialogs that you use to make a lot of changes and it takes time to make updates this way.  Balsamiq Mockups uses simple comma or line delimited strings to populate the UI mockup elements with their text.

Keyboard Support

If you have ever used a tool like Photoshop, Paint.NET, or other graphics focused software, you’ll start to appreciate how shortcuts and added keyboard functions can really speed up productivity.  Balsamiq Mockups is no different.  You can expect to be able to perform the following with or without a mouse:

• Undo, redo, cut, copy, and paste of mockup elements
• Nudge your UI around to get the right layout
• Align multiple elements
• Group, ungroup, clone, and lock
• Navigate the UI Library and Quick Add tool (Auto-complete suggestion list)

Robust and Customizable Library

Balsamiq Mockups comes stocked with nearly all mockup interface elements you’ll need for desktop applications.  It also comes with iPhone elements as well but what is even better is you can introduce new elements or contribute at Mockups To Go. 

Just to prove my point, Balsamiq Mockups even comes with a mockup of the iTunes-like “cover flow” interface.  This is cool because I’ve actually had to mock this up before on a previous project.  Too bad I didn’t know about this tool then.

Flex Code Generation Via WebORM

For projects that are going to be written in Adobe Flex, Balsamiq Mockups can be generated into a 3-tier Flex project to begin construction on. (Disclaimer: I’ve only attempted this on simple mockups so I cannot verify how good the code generation is for more complex mockups.  It is a free service though so give it a try)

Presentation Friendly

One nice bell ‘n’ whistle of the tool is the ‘Full Screen Presentation’.  It essentially displays your diagram only in full-screen mode and turns your standard windows cursor into a large blue arrow making it very appealing to those groups who like to do everything with a projector and laptop.

Save and Export Options

When you purchase a license of Balsamiq Mockups for only $79, it enables several ways to get your mockup into a more portable format such as PNG and PDF.

In the free evaluation version, you can export the mockup XML content and import it later but the licensed version enables a true Save function.

The ‘Bad’ List

As mentioned earlier, I don’t really have a lot of complaints about Balsamiq Mockups rather I compiled a short list of suggestions so here they are…

1. The properties inspector tended to get in the way more than I desired when it tries to be smart about placement.  This is easily circumvented as you can explicitly drag it out of the way.

1. Lacks a “Layers” viewer.  You can group up UI elements and organize their ordering but I’ve always been a fan of how Adobe Photoshop allows you to get right into the hierarchy of your design and adjust it.  Along the same lines, I wasn’t able to find a function to let me quickly hide/show UI mockup elements and groups.  There is an opacity slider in the properties explorer but I think this could be pulled out to be a quicker function as well.

1. Better integration within the application to download and install custom UI mockups would be nice.  I would see it being similar in nature to find/install feature of Mozilla Firefox Add-Ins.

1. While it has automatic guides to help in aligning elements, I find it nice to be able to place your own custom guides for whatever reason.  I was able to do a work around by using the “Vertical Rule/Separator” mockup element as a guide.

1. I think it would be a great addition to the ‘Full Screen Presentation’ if the ability existed to group mock-ups into a project and facilitate a way to setup a sequence so that you can create a PowerPoint-like slide-show through all your mockups.

Conclusion

Balsamiq Mockups is a great tool for creating those crude/sketchy interface concepts without all the effort.  I’m not joking when I say it is a very fast and productive tool.  It provides a lot of capabilities for the low-cost of $79 (at the time of writing this article) and the free evaluation version enables nearly all functions outside of Saving and Exporting.  Do yourself a favor and give this tool a shot.  You won’t be disappointed unless you like trying to explain to your stakeholders that your time-consuming “pretty” mockups aren’t coded already.