Week 12: Breaking Mondrian

Last week I was a little frustrated at feeling like I didn't know enough to make my website look like something other than boxes stacked on top of each other. This week I resolved to do something about that. I've revamped the site to give it a distinctive style, and while I'm not sure the result is aesthetically better -- yet -- it certainly is less boxy and more unique.

I started off by finally changing the damn font. Adobe Garamond Pro Bold is an eye-catching, impactful font that works nicely for headings, but it is absolute crap for content. I used CSS to change all my content boxes to Georgia, whose clarity and distinctive serifs make it easy to read. That was an easy call. Then I got down to hard work.

What I wanted was to eliminate some of the straight lines in my CSS template without destroying the site's clear organization. This took the most concerted foray into GIMP I've thus far attempted. The background of the site had been a tiled image, one pixel wide, with a thick white zone separating the light blue heading from the dark blue body of the page. I widened the image to fifty pixels and turned the straight white border into a hand-drawn curvy shape like an elementary school ocean. It took quite a while to get the ends to line up right, but when I was done, like magic my page had a distinct sky-and-sea theme. I was taken aback by how this one change completely changed the feel of the layout.

I wanted to run with the maritime idea suggested by my new border, so I took my site logo -- a blue-and-black box -- and revisited it in GIMP to see if I could give it an island shape that could sit on the waves. I had to deal with layers and transparency a good deal to make this work, since I didn't want to surround my island with a white box, and I discovered that PNG images can be partly transparent while JPGs cannot! I considered ditching transparency and just coloring the background of the logo with the same color scheme used for the site background, but that might have caused issues on computers with different screen dimensions from mine. In the end, my island-logo sat nicely on my ocean, properly centered above my content, with a nice, transparent background.

I liked the evolving line-drawing feeling of the site's art, so I went ahead and replaced a horizontal rule element on the verses page with a curlicue section divider I drew with the pencil in MS Paint. I really like the outcome; I only wish I'd been able to figure out how to use CSS to make the [hr /] tag default to this graphic.

Still on my artistic to-do list: make some seaweed out of line drawings to overlap the boundary of my still-boxy content pane; turn the menu items into clouds. Still on my technical to-do list: implement a blog for the news page; get a Creative Commons license on the verses page. Still on my miscellaneous to-do list: clean up the footer; write content for the About and FAQ pages.