Leaf tower, lit from above, side view

The leaf tower was one of my favourite assignments of the year, since I managed to make it do something a bit special. The rules were to make a three-dimensional structure out of one sheet of bristol board, with only cuts and folds, and without removing any of the paper. Here’s what I came up with.

The zipper up the back holds the two edges of the sheet together into a circle, and the “windows” on the back are really tensioning struts that hold the front to the back. These struts are then folded on the front side to lock them in place, which along with the fold between them, brings the tower to form an asymmetrical heart shape. I then added the ornamental leaf cut-outs, and bent the leaves slightly outward to make it look as though it was covered with vines.

Experiment with height and texture After our two-dimensional work, our professor had us tackle the third.

This piece was to make us experiment with using the height and texture of the cardboard to create an effect. Having done a lot of cutting of cardboard recently, I made a grid and then blocked out the size, height, and directions I wanted, so that everything would be easy to measure and cut. It worked out quite well and the professor kept it for the next CIDA review.

Kung-fu pose

A small selection of works in conté done in first year. One of my biggest hurdles for going into design was and still is my lack of drawing skills. Every other person in my class seems to be a natural artist. I’m not.1 I can see, and I can imagine, but I have trouble putting that vision on paper well enough to satisfy myself. (Working in any media I can’t erase is petrifying.) I also have trouble with lighting. I can mostly tell when it’s wrong, not predict how to get it right. So when the other girls complained about our graphic presentation teacher marking too easily, and how it wasn’t worth doing good work for her, I wanted to shake them. You could tell from their tone that this stuff was child’s play for them, and that they had no idea how it would feel if drawing were difficult and scary to begin with, and doubly so because it ought to be perfect.

Tonal study of crumpled paper bagSince my opinion of my artwork is usually that it sucks, or at best is flawed — see this problem here and another one there — the professor telling me that it was good for a beginner (a.k.a. “easy marking”) was a really big help. It made it a little less scary to do the next assignment, because it was not going to come back covered in red ink.

Close-up of ear

One success made it slightly easier to try for the next, and you know what? By the end of the year, my drawings sucked a lot less than they used to. Some of them even look good to my ruthless perfectionist eyes. Obviously I needed (and still need) a big helping of confidence along with my drawing lessons, and I’m grateful to our professor for having given me some. After having seen how much I improved in a year and a half, even I have to agree that I can learn how to draw. And eventually, I may stop being scared of markers.


  1. What I am is a natural writer. I always get picked to do the writeups or give the presentations when there’s a group project.

Sketch 3 For Interior Design I, Tony wanted us to learn about composition, light, texture, and craft. Our first project was to make three-volume assemblies out of corrugated cardboard and then photograph them. Each was supposed to have a clear dominant, subdominant, and subordinate volume, and to make use of the cardboard’s texture. We started by creating ten sketches:

Since Tony was interested in joinery I borrowed some ideas from woodworking, such as pegs and dovetails.

The next stage was to pick the best two. Number three (the feature photo) was one of my favourites, but I had to admit it didn’t make an exciting photo in elevation and display the light-pipe effects that made me love it. Tony and I selected sketches five and seven as the best. I remade them at higher quality and took a full set of photographs for each.

My favourite pieces played with balance, in both physical and power terms. They were supported or held together by the subordinate piece, such as the slices in five and seven, and the slender column in three. If that piece was taken away, the assembly would tip over or fall apart, so it was subordinate and dominant at the same time.

Plaid This group of items are from an assignment doing monochrome graphic design. The “lines” item suggested a plaid to me, so that’s what I did. The black stripes are paper, and it was very hard to cut and glue 1/16″ inch strips accurately. I deliberately threw the black/white balance off-center in this one too. Bob kept this for the next CIDA review, so my attempt at asymmetrical balance was clearly working.

The boxes pieces came out better than I would have expected since I have never had much of a feel for abstract art. Like the plaid, it’s off-center and balanced at the same time. Bob kept this one for CIDA too.

It is surprisingly difficult to paint straight lines and sharp corners accurately. I should have borrowed a trick from Candace and masked them off with painter’s tape.

Sketch of seashellBlocksThis marker sketch of a seashell was done as a preliminary stage for the organic pattern, which didn’t come out as well as I would have liked it to.

red-eyed tree frog (adjusted) Eight items from my 2007 entrance portfolio for Interior Design.

I love the vibrant colours of this tree frog, and the contrast between the smooth watercolours and the texture of the block-printing that forms the background and main lines. I like carving linocuts better than I like drawings, since if I get the block right I can experiment with different colours and papers for little extra work…especially with water-based ink. This print is oil-based ink, thanks to the watercolours, which was very messy to work with. It turns out that baby oil is a better clean-up liquid for it than turpentine.

national gallery garden view (adjusted)This charcoal drawing shows a view through multiple spaces, and is based on my photograph of a garden in the National Gallery. At the time I had no training in perspective drawing, and no experience with charcoal, so you can imagine how much trial and error went into it. I began by drawing an outline of the scene, without tracing the photo, and used a light table to do the toned version on a separate sheet, because I knew it would take me more than one try to get it right. Continue reading

Eggs theme for Lens PmWiki skin, author view Lens, a skin for version 2 of PmWiki,1 was the most complex web design project that I’ve done to date. It took several months and a lot of swearing to develop. It’s modular, which makes it unusually easy to customize. It is also:

Customizable

OP really was very serious when he said this theme is highly customizable. Thanks and great job! –RS

Compliment posted on my skin’s page at PmWiki’s official site

My top goal when writing Lens was for ordinary people to be able to customize it without having to learn any programming. XHTML and CSS are a cakewalk compared to a serious programming language like C, but many people still find it difficult to make one or two small changes to an otherwise ideal design without having to dive in headfirst.2  So Lens stores a lot of itself (for example, the contents of the sidebar) in the wiki rather than in the template file. It has many built-in style options to choose and learn from. And of course you can dig into the guts and tweak the code by hand if you want to. Continue reading

  1. PmWiki is a wiki engine which makes a pretty good general content management system, especially back when I had a webhost that included PHP but not database access. I like wikis a lot for the simple text markup, how easy it is to make links within the site, and the built-in version history.
  2. Web page layout is harder than it has any right to be, both because the ideas are hard, and because there are so many tricky rendering differences and quirks involved.

Screenshot of my Lime Spider webpage template

The webpage template I designed for Westciv‘s 2004 competition won an honourable mention and was included in Stylemaster version 4 under the name Lime Spider.

See a live demo of Lime Spider. Isn’t it lovely in comparison with the unstyled version?

Entries in the competition were expected to be valid, accessible XHTML and CSS. So, I used semantic code which is more accessible, especially for screen readers. I styled it so that text contrasted strongly with the background and could be resized without damaging the layout or aesthetics. Neither does it rely on having perfect colour vision, or have any images or plugins replacing the text. Lime Spider is readable, attractive, compatible with a wide range of browsers, fast-loading, and easy to modify.

It is also a fluid design. It reshapes to fit your browser window width so long as it is not too narrow or wide to read comfortably. Since its proportions are set in ems, they’re maintained regardless of your window or text size.

I began by making a grey version, to hammer out the layout and typography, and then made several colour variations.

Arndis Skin for PmWiki v1 in Cream I created the Arndis skin for PmWiki in the spring of 2004.  I was running PmWiki v 0.6 or 1.x at the time.  It’s been through a few rewrites since then, but the visual design is much the same as the original.

Like my other web designs, it’s standards-compliant, semantic, accessible, etc., etc.  It’s a simple liquid two-column affair, with a brighter content area floating in a sea of background and sidebar. I made several colour variations:

Going beyond the pretty looks, I did some things to suit myself with this skin. There is a breadcrumb trail to show the reader her location in the site. The sidebar contains some auto-updating sections that use javascript snippets to work their magic. The editing command tabs are an unordered list, for the reasons given in A List Apart. This particular unordered list began life as an example from Listamatic, but I tweaked the heck out of it over several generations.

Arndis Skin for PmWiki v1 in GreyArndis Skin for PmWiki v1 in Sage

The hardest thing to do to it was the you-are-here marker, which highlights the current tab. I needed a CSS selector for it and only it, which meant I needed a hook in the HTML PmWiki generated. Happily, the creator of PmWiki is very good at answering questions or helping out with small things like this, and he pointed out a hook that already existed in the code.

no post thumbnail

In 2003 Chris Reed of BlueLightning Studios and I collaborated on a speculative business proposal to Solectron about why and how they needed to improve their callcenter intranet and knowledgebase (KB). Chris, having worked there between contracts, knew what condition the intranet was in. Working at HP had taught me that KBs have to be maintained, and it’s best if they’re maintained by the people using them,1 because nobody else has the same incentive or expertise to keep it up to date. Therefore we recommended turning the KB into a wiki with some editorial controls, and using an enterprise-strength wiki engine on a Debian Linux server for maximum value at minimum cost.

Intranet Improvement Proposal (PDF, 1.3 mb)

The Long Version

When Chris worked there, the Solectron callcenter in Belleville had a rudimentary intranet and KB, but the de facto way to get information was to ask your neighbour or a second level tech (henceforth a “second”) for advice. Having worked in callcenters before, Chris knew that this was an inefficient, unreliable and unscalable way to do research. When he and I had worked together at Compaq, we had a comprehensive, up-to-date KB, which made it much easier and faster to support our callers. Personal advice is a wonderful way to get answers, but often those people are busy, and you could look the answer up for yourself. Continue reading

  1. This was before Wikipedia became a household word and people admitted that user-maintained content might be worthy of consulting. Only geeks knew about wikis at all.