filed under: rainskit.com, usability

27 January 2008

Inspired by my copy of The Principles of Beautiful Web Design, I’ve been working on a redesign of this site since last March, and I’ve finally finished it and published it. The redesign doesn’t change the actual content at all, and in that sense is somewhat unimportant. It does dramatically change the look of the site, though, and in that sense is somewhat interesting. I also took the opportunity to refactor the underlying code that generates the site, to make it easier to maintain and redesign in the future.

As you can see, the look is somewhat dramatic¹. It wasn’t really what I had intended it to be, but I am still happy with it. It’s a very solid first attempt at real design, even though I focused too much on the mechanics of the process and not enough on higher-level issues. I expect that my next attempt will be better.

The book defines 5 stages of web design: Layout, Color, Texture, Typography, and Imagery, which I followed:

Layout

I spent a lot of time researching layouts and colors. For the layout I finally settled on something much like what I’d had before, although I made the sidebar wider to follow the golden ratio.

I’m quite proud of one very subtle aspect of the site: it has a “fluid + fixed” width design. That means that it allows the reader to resize the fonts and still have the site work, but it also has a “fixed” structure that gives me much more control over the layout. I got all the design benefits of a fixed-width site, but with the usability of a fluid one. I don’t think anyone else has done quite this thing before (and I looked!). For my technically-savvy readers: the entire site is em-based, but with appropriate min and max values on widths that keep things static.

Color & Imagery

For the colors, I found that I generally liked analogous color schemes. Rather than try to pick a set out of the air (from billions of possibilities!), I hunted around on iStockPhoto until I found a few images that I liked. (I looked for orange flame fractals) Once I had the images, I had my colors.

Texture

For texture, I removed a major component from the old site: rounded corners. I was sad to see them go, but they were fickle and buggy, and to this day there is no good way to make them work in web browsers, so I gave them up. In their place are a few subtle things like the watermarked image behind the articles and the dividing image between the articles and the sidebar. I also created a “favicon” (that should be appearing up by the URL in your browser, right now), based on the colors and layout of the site.

Typography

I’ve always been interested in typography, so the old design was already relatively well thought-out and the changes here are relatively minor. I did do a major update to the way the code is organized, but you can’t see that here.

Typography on the web is still in its infancy so there wasn’t much that I could do, but what was possible, was done. The headers and body fonts are different, and are carefully thought out for maximum readability. As mentioned above, you can use your browser settings to increase the font size and the site should work perfectly. One major item of note is that the line-spacing (“leading”) is set wider than the default, which makes the text much easier to follow. Tied to that, the primary column has a maximum width so the page doesn’t ever get uncomfortably wide.

¹ Note that this site was designed primarily for Firefox, as it is the only modern browser that is reasonably standards-compliant. There are a few customizations that help work around Internet Explorer bugs, but if you’re not using Firefox, the site won’t look quite the way it is intended to look. (IE7 gets it almost right.)