Designing Designing (Meta Design)

I don’t think I’ve done any design work for the tools I use to make designs. You’d think those would be the UIs I’d be most interested in working in, but somehow it just never happened. My favorite and much beloved design tool is Inkscape and for the most part it just works, I get my job done, and it’s all good. Lately, however, I’ve been thinking about whether or not there are any ways I could work more efficiently and spend less time on menial/repetitive tasks, and if there are any new FOSS tools out there that I should consider integrating into my workflow.
That being said, I’ve been playing around with Pencil lately. Pencil is a Mozilla/XUL-based GUI mockup creation tool. Pencil has a (albeit limited) shape collection panel where there are different categories of objects (annotation, GTK widgets, common shapes, Windows widgets) that you can drag onto the canvas to use in your mockups.
I really like the idea of having libraries of objects (kind of how the Flash creator UI does/did [1]) that you can drag onto the canvas. This would be a killer Inkscape feature for UI designers I think. Garrett and I talked about how awesome such a feature in Inkscape would be at the last GNOME Boston Summit but it obviously doesn’t exist yet. 🙂
So I used Pencil to do a quick start of some mockups of how this drool-inducing dream feature might look as a side panel in Inkscape. Behold:

(Pencil Source File)
I hope I’ll have time to keep working on these, though it’s weird to work on: It’s like buying your own birthday present.

[1] I haven’t used the Flash creator/editor in a number of years, so the UI may have changed drastically, although I think it unlikely that the library concept would have been dropped.


  1. Pencil link is faulty.

    1. Fixed now, thanks!

  2. Link to Pencil is broken 🙂

  3. I created an svg file with some common widgets that I copy 'n' paste – not as confortable as Pencil though. I looked into inkscape plugins but their possibilities are quit limited.
    Another thing I wonder: is it possible to hack gtk so it uses cairo svg-backend when rendering a window? So creating a "svg screenshot" – that would be really cool 🙂
    PS The pencil link goes to… for me instead of

    1. Holy moly, the SVG screenshot idea is AWESOME! I want that!

      1. But its only an idea 🙁
        Would be awesome if someone with knowledge about gtk's internals could comment if its possible / how hard to implement it would be.

  4. Hongli Lai says:

    Yeah that would be awesome. Right now I keep a copy of the Tango library on my harddisk but having a proper library interface would save me a lot of time.

  5. mehmoomoo says:

    Sadly Pencil is at the moment the best diagram/flowchart application available for Linux. Dia produces butt-uggly flowcharts (you basically get laughed out of any meeting with them) and the Inkscape is more of a drawing application.
    It's nice that Pencil has this set of GTK elements 🙂 It made it instantly in my experience the best application to build mock interfaces 🙂

  6. Your link for Pencil is broken. Nice post, though.

  7. Gianni says:

    I used Pencil a lot lately. And I see that, even if the application is great, yes, it's limited, and pretty buggy.
    I thinked a bit about doing it from scratch, because I already have a good understanding of the gtkdrawingarea widget, and I like programming it. It should not be that hard to build a pencil like application, for designing mockups. But maybe some changes in the workflow could improve the GUI and the possibilities.
    If anyone want to talk about it, I would be interested in helping, and building the code should not be a problem.

Leave a Reply to Hongli Lai Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.