My new blog now has a new design, rather than the old boring placeholder design it started with. I like this design well enough that I'm planning to update all the rest of the pages on my site with it. I'm even (gasp!) thinking of a redesign to the front page, which will be remarkable since I haven't changed it for many years. (Update: now the front page has been replaced with the new design.)

Coming up with a new design is always a challenge. You're starting off with a blank white page, and unstyled text. If you can get from there to a finished design that you're proud to look at (and show off), then it's a success.

I often start off by looking around at other sites for ideas. What works, and what doesn't? I looked at the "Top 10 Best Designed Blogs" link that floated around digg a while ago... but the only one on there that I really liked was the first one: Ordered List. It's a clean design... not too cluttered, no eye-burning colors, nice gray shades. I also like Layne Karkruff's website; again more gray, but with lots of "ooh, shiny!" details.

I looked at a number of other blogs to decide on a layout. The article-on-the-left, sidebar/links-on-the-right design seems to be fairly standard among blogs, and I think it's a good one, so I decided to use that. I'm also running adsense on the site; I debated whether to put the ads in the sidebar or at the bottom of the content. For now, they're at the bottom.

Of course that's only the structure of the page... next I had to decide on the finishes. Colors, art, backgrounds. Since I've used the starfield/space theme on my site for nearly as long as I've had Lightsphere.com, I decided to continue it here. I snipped a bit of the blue starfield design that I created for the UltraCorps site, and am using it as the background. (I doubt SJ will mind...) The planet in the corner was done pretty easily using Flaming Pear's Lunar Cell plug-in for Photoshop. From there it was just a matter of colors — several shades of blue-gray — and some css.

Usually I make a hand-drawn sketch of the design idea before I do anything else. Then I mock up the design in Photoshop. This lets me easily experiment with different looks and colors without hassling over HTML or CSS code. Once I've finalized the design in Photoshop, I slice and save the graphic elements, then start working on the markup and CSS.

I went with black type on a lighter gray background for the main article content. Even though white-type-on-black is the trend on a lot of blogs these days, SJ has hammered it into my head enough now that white-on-black is hard for some folks to read (and as my eyes get older, I'm finding the same to be true for me also).

So there it is, web design in a nutshell. :)