Glimmer: a jQuery Interactive Design Tool is a prototype from the Mix Online Labs which makes jQuery accessible through a visual tool. The objective for Glimmer is pretty simple: to enable the power of jQuery through an interactive design surface. If jQuery is the "write less, do more” JavaScript library, then Glimmer is the “write none, do more” jQuery design tool. Glimmer has three core audiences: power users, designers and developers.

The concept was born during a dinner in Los Angeles with my friend and co-worker, Karsten Januszewski. We had just finished up Oomph: A Microformats Toolkit, and Karsten had given a great presentation at the PDC2008 earlier that day. For this project we had utilized jQuery for the User-Interface for Oomph, and both of us were pleased with its power and ease-of-use and implementation. The problem, however, was that I, as more of a visual-designer than developer, felt a high barrier-to-entry in harnessing the power of the JavaScript library. What if there was a tool that let visual-designers use some of the great features of the jQuery animation engine, and didn’t require them to code?

So Glimmer was born.

By the time I had gotten back into the office the Monday following the conference, Karsten had created a proof-of-concept, using WPF to interact with an existing HTML page, and add a bit of jQuery “Glimmer” to it.

Now that we knew we could interact directly with existing html, and append jQuery references to it, generate the necessary jQuery files, and have it all work, we took the requirements and got to work on the UI. This is where working in WPF and using source-control (in this case, Microsoft Team Foundation Server) is magic. I was able to directly take Karsten’s WPF project, and “reskin” it and being working on the main wireframes.

Again, this is where working in WPF is great: I could take the existing, *working* code, and begin the iterative process of working out the correct workflow and UI/UX. Not only was this helpful in saving a bunch of throw-away .psds, .jpgs, .ais, or what-have-you, but I was able to continually able to *use the tool* and figure out how people might really put it through its paces.

As we were using the tool to create demos and proofs-of-concept, we saw where the design had shortcomings and problems with user-experience. For example, in the example above, the goal was to surface the jQuery effects that were available. This idea I still believe has legs, but it would require more modularity than is in our current version 1 release. For this release we centered on working in a single window-pane, and this required a little rethinking.

In the example below, we decided to try and make each action more of a “unit” and created StackPanels for each action. Each action then had a series of options such as setting the trigger (what clicks, mouseovers, or what-have-you), the target (the item that the trigger effects; it could be the trigger itself, or it could be another item such as an HTML element, id, or class.)

Once we had the basic structure and requirements pretty well worked out, we were able to create “wizards” based off of some of the demos we had created while using the tool. Since they were originally created with Glimmer, it was “fairly easy” for Karsten to create a step-by-step walk-throughs for some common use-case scenarios. Before beginning the project, we had pretty-well sketched out the thinking behind what we would first try when using the tool: image-sequencing (rotating banners with controls and fading), Drop-down menus, and customized tool-tips. In my experience with designing sites, these have always seemed to be the most commonly-requested “enhancements” clients would ask for.

Through the process, Karsten and I were able to use the same codebase, with him working mostly on the backend files using Visual Studio, and me working in Blend on the UI and style. We were able to check our files in and out with minimal hassle using TFS, and used it also to house all of the content we were creating as we put the finishing touches on the application and the Labs page on the visitmix.com.

At this last stage we’re creating the content for the Labs page, writing the code for the samples, and working with the Channel 9 team to take the HTML and CSS I’ve written and work it into their codebase which powers MIX Online. We finalized on logos, and general branding and put to good use the MIX Online mushroom mascot and Lavender Frog throughout the visitmix.com page and the demos we released online and shipped with the tool.

For our final release, we added video to the hover-state of the wizard icons, hoping to help clarify what the final result of the wizard might be. We also provided a quick download to the samples which you can open in Glimmer to see how we’ve created them.

I hope you’ll check out the application and provide us feedback via the MIX Online site. You can also follow us on Twitter at http://twitter.com/mixonline. We’re always looking for contributors to the project, and hope you’ll find it useful.