2006.05.13
On website design
I’ve had several people comment on the fact that they quite like the design of my weblog, so I thought I’d write a bit about how the design came together.
First off, I wanted to make sure that the site validated as XHTML 1.0 at least, and that CSS was used to style the site where possible. I also wanted a weblog engine that was flexible, easy to maintain, and well-supported. WordPress was an obvious fit for me, because it allowed for very flexible templates, was capable of generating XHTML, and wouldn’t get in my way. As a bonus, it’s free (as in freedom) software.
OK, so now I’ve got the blog engine, but the default theme wasn’t really me. I found a theme I kind of liked (Ocadia by Becca Wei), but it still wasn’t me. For one, I wanted a 3-column layout, and I found the design a little to constraining to tweak to my liking.
So, I went off in seach of the holy grail. Literally. I took the basic 3-column layout presented in that article, and fit it into a really simple (read: ugly) WordPress theme. At first, I tried to sort of merge it in with the Ocadia theme, but this didn’t work so well, so I started a new theme from scratch, using other WordPress themes as a sort of reference. This approach worked much better for me, and I also understood how the theme worked from the inside out, so making tweaks and changes over time has been pretty easy to do.
|
|
|
||
I decided that I wanted to use a photograph as the basis of the theme, but I wanted to avoid having a blue theme. My last blog had a blue-heavy theme, and I was tired of it, so I was looking for something fresh. I very nearly used a photograph of Pelican Point as the basis for the visual design. I had problems getting a masthead I liked, though, and I was having a really hard time finding colors that worked in a palette of greens and yellows. I’m not a graphic designer, and this just wasn’t working for me.
Frustrated with this project, I went for a walk, and as I was coming home, I noticed a sign that I’ve seen hundreds of times before, and it provided the inspiration I needed. It was one of the signs for Cohos Evamy.
What’s really odd is that the sign looks nothing like any part of my blog. What struck me about the sign is the way it delinated an image and used negative space for impact. This gave me the idea to have a photo in the upper left corner of the page, but leave most of the masthead blank, and use strong lines to separate the masthead from the rest of the content.
Ultimately, the photograph I wound up using in the top-left corner was a photograph of some paper mache peppers I have hanging on a closet door. It’s one of the first photographs I ever took with my Canon EOS 20D. For some reason, the ability to use really rich reds, yellows, and purples in my design really resonated with me.
Armed with the photo and my copy of Photoshop Elements, I set off creating the rest of the images I needed for my theme, and gradually worked them in over time. I also borrowed some style ideas from a number of places. I honestly can’t remember them all. For the most part, I cut and pasted, and scaled chunks of the original photograph to get the basic color elements, then started working them all together. The little push-pin and comment images took a while – I drew them essentially from scratch. All of this took a number of hours in Elements, but I was quite pleased with the result.
And so the first version of my new blog theme emerged over the course of a week or so. The CSS stuff took a while to get all settled – there’s quite a number of styles in there that I really had to fiddle with to get them “just so”.
Through this entire process, I kept the following things in mind:
- Use a simple palette. I only really use 6 basic colors in the entire weblog theme (plus subtle variants): black, white, grey, red, purple, and yellow.
- Use repetition to reinforce the design’s structure. The nature of the blog makes this very easy to do, and it’s quite effective in making the design both appealing and effective.
- Use negative space for big impact in a few places, but don’t waste a lot of screen real-estate with giant margins around things.
These three principles helped to guide me when I was creating the initial version of the blog layout, and kept me with a general sense of what I wanted to accomplish.
After the basic version was done, I was quite happy with the result, but I wanted to make the blog feel a bit more personal. So, I added in the Random Photo thing on the left, which also served to add a bit more visual interest to an otherwise very textual layout. A few months later, I added in the Recent iTunes section, which I think is a kind of fun and interesting window into my personal life – you can see what I’m listening to as I’m listening to it. Design-wise, that little purple musical note was essential in keeping that content easy to read, since it serves as a very small separator.
Really, it was a matter of drawing inspiration from a few sources, then doing a whole bunch of grunt work in text editors, web browsers, and photoshop to bring it all together. I didn’t have a goal in mind that I really drove towards, but worked things out as I went along, letting the design itself drive the process. I’m a little surprised at where I ended up, but really, it was just the natural conclusion to the path I set out down originally. I also learned some new XHTML and CSS kung-fu in the process, which will certainly come in handy in the future.
Subscriptions