Zack Rusin has been posting some interesting tidbits lately about his amazing work on the upcoming Qt 4.3. His latest post made me ponder using SVG as a screen mockup format between developers...
First, some background: Qt is a graphical widget toolkit and is a major component behind KDE (which is one of the two popular Linux desktop environments). A main driver for the current Qt/KDE4 is to compete head-on with Microsoft's WPF in terms of rich, interactive graphics and declarative user interfaces. Thus, a lot of the work going on in Qt 4.3 and KDE 4 is to improve support for SVG, which I'm sure you've heard me ramble about before. However, it is important to note that Qt supports many different platforms, not just X11 but Windows and Mac, so this isn't strictly a Linux-only improvement.
Zack's recent post is all about how Qt 4.3 allows you to generate SVG from the contents of a window. It got me thinking about how SVG could be used as a format for GUI mockups:
- Developer A is working on her application, she takes a "snapshot" in SVG of her screen and sends it to Developer B.
- Developer B loads up the snapshot in a SVG design tool (or even Inkscape) and decides to shuffle some buttons around, delete one button, change the colour/styling on a couple more widgets, and moves a toolbar from one side of the window to another.
- Developer B then sends it back to Developer A so she can go and make those changes in the code.
This would all be possible with just a couple clicks of the Developer B's mouse in the design tool, because the screenshot is not just a static picture, the picture format contains semantics and knows that each button is an object with some properties (like position, dimensions, colour, border style, label, etc), all of which can be editable.
Sounds great! Another benefit is that screen mockups in SVG will likely be smaller in size than their raster counterparts and do not need to be lossy compressed (as with JPEGs) because user interfaces are typically pretty tame (not a lot of wild curves, etc).
But the most interesting possibility to me is that, with improving browser support of SVG, it is possible to share those screen mockups on the web. Further, with a little stitching/hacking, you would even be able to make the screen mockups interactive (i.e. clicking on a button in the mockup brings up another screen mockup showing what the corresponding dialog box will look like in the application).
If we take this to its final step, why not design the user interface in your desktop application using SVG directly? In this way, you've got the true UI represented in SVG, which can be passed around, viewed in browsers, tweaked/updated and then knitted back into your application once the user interface has been approved. That's one of the benefits of declarative markups and it's something that the WPF/XAML crowd is striving for: a cleaner separation for developers and designers.