Usually for HTML/CSS interfaces I jump right into the coding and tweak until it looks right. But for Pagoda, we often each have some ideas in mind about how the interface for a feature should be presented, so spending time on easily changeable mockups instead of a less flexible prototype (pixel pushing with HTML/CSS is often time consuming and creatively limiting) is a good way to see whose ideas work out the best. I'm our mockup guy, and as in my previous entry, I use Inkscape for this. Some features actually lend themselves very well to this purpose; some that come to mind are Paste Style, the Align & Distribute dialog, and Ctrl-dragging to limit the direction of movement.

Today after drawing up some mockups, I had an idea: an interface builder plugin for Inkscape. It would have a library of common widgets found in web interfaces and desktop toolkits. You could drag these pre-built graphics onto the canvas and be able to change their state easily. For example, drag on a checkbox and change it to be unchecked, or drag on a tab and change it to be the selected tab. Tree widgets are especially time consuming to draw, don't get me started about changing the items later...

This would be nice because unlike various toolkit-specific interface builders, you still have all the power of Inkscape to think outside the realm of just widget layout, which is a big factor of web interfaces. Being free-form is a big plus.

So, some of the features in list form:


  • Widget library

  • Transformations to change widget state (selected, disabled, etc.)

  • Some additional align & distribute options that are useful for interface building, and resize options to make resizing grouped shapes easier (for many widgets you only want some shapes to resize in certain dimensions)

  • Something with layers to show different stages of an interface

Any other ideas? Is there something out there like this?