Problems and Solutions

Last night, I poked around the site a bit, making some changes here and there. Thought I’d share them with you, as well as the thought processes behind some of the updates. A great way to learn is simply to look at what someone else did and why they did it.

The biggest change is the new background. I’ve been achin’ for something to replace the pale beige tile I was using since this design, Sangria, launched last June. It wasn’t that I didn’t like the pattern I’d been using; quite the contrary, I liked it very much. It had a translucent, lace-like quality that I thought suited the other subtleties of the design quite well. However, I wanted something with more of a visual punch.

Over the past few months, I tried a lot of alternatives, but nothing ever looked or felt just right. Or, at least, nothing ever looked quite as right as the old pattern did. There’s no one, perfect answer to any design problem. There are simply solutions, and then solutions that are better. The tile pattern was the best solution I had found thus far. Still, I sought something better.

Last night, inspired by this post at Web Designer Wall, I went digging through Lightroom for some photographs that might work as a background image. I really like the texture and tonal variety that a giant, photographic background can bring to a website, so I looked for photos that were abstract and kind of simple: close-ups, long exposures, that sort of thing. I didn’t want images that were very representational because they would only distract from the website itself. After digging through thousands of photographs, this is the collection I had gathered.

At first, I liked the idea of using a photo of the Golden Gate Bridge (bottom right). Now that I’m living in San Francisco, I thought it would be a good visual metaphor for where I am in life right now. Like I said, though, I wanted something less connected to the real world, so I eventually settled on a shot that I took last year through a rain-covered window in my apartment. It was vague, grainy, and had some nice tonal variety. Here’s the original.

I wanted the photo to work with the colors I was already using on the site–purple and orange–so I decided to either desaturate or colorize it. I really like to fiddle with Lightroom’s presets when I first open an image, just to see some options, and I instantly fell in love with the colors produced by the “Creative – Cold Tone” preset. The muted teal was perfect because it complements orange and is a brother to purple. I also sharpened the photo to bring out more of the grain. Here’s the result.

I experimented with the background-position for a while to see what I liked best, and eventually settled on a top left alignment. It looks particularly good on my 20″ display because you get to see a lot of the deep, dark teals toward the bottom of the photograph. Here’s a screenshot for those of you on laptops and smaller displays.

Of course, every solution creates another problem, and when I changed the background image, my copyright and “top of page” link were no longer visible. Originally, they were set in dark grey and sat over the pale beige background tile. However, with a photographic background comes unpredictability, as there are times when the footer will be on a light background and times when it will be on a darker one. This problem gave me a chance to innovate and come up with something new.

My first idea was to use a transparent black PNG as a background image for the footer. I love the glassy look of transparent black over a photograph, so I was excited to test it out. The results, as you can see now, are quite nice, so it stuck. I got lucky and found the solution on my first go. To finish up, I added a quote from my favorite poet, Billy Collins, and centered the text so the footer really felt like a cap for the end of the page. I also added a text-shadow to the footer content to increase readability.

I only spent an hour or two tinkering with the site, but I think the results are quite dramatic. I’ve come to learn that this is one of my favorite parts of the design process: refining what’s already good to make it better. It’s like polishing a stone. Just when you think it can’t get any better, you pull out a finer grain of sandpaper and buff it to a high-polish shine.