How I Designed This Website–Version 5.0

Earlier today, I took live a new website theme that I’ve been working on for a few weeks now. The process of designing a theme like this is lengthly but very interesting, and this particular version is one I’m pretty excited about.

I started with a pad of paper and a pen—like most my design projects, I find that old-school technologies work far better than computers to imagine layouts and creative design solutions. After playing with the elements for awhile, I then wrote up an outline for the page structure. The design of the page involves appearances, but the structure is like the skeleton underneath to hold it all together. For this site, it involves a header (the top part), the Main section divided into three columns, and the footer (at the bottom).

Unlike previous designs, I started this one from the beginning as a wordpress theme, which meant that I could see changes and dynamic content right away. I ran a copy of this website on my laptop and was able to see, immediately, any changes, as they happened.

Much of the site code was contained in two files: a single index.php file and a single CSS style file. Using class selectors, I was able to show and hide various sections to craft a simple, slim design package. Later, I separated out the various components of the PHP file into several chunks to make debugging easier.

I wrote more javascript and PHP than normal for this design. I also did more with CSS. The fact that the design is almost completely free of any images and requires a minimal amount of downloads is very exciting for me.

I’ve also added several other features. At the bottom of the left-hand column, there is a selection of links to sites I’ve discovered around the internet. I’ve also created a photos page that allows for much larger photos to be posted and viewed. It integrates with the blog so photos can be commented on and it is backwards compatible with older posts. I have also added quite a bit of material to About.

In the last couple of years, I’ve done a complete redesign like this every six months or so. It will be interesting to see how long this lasts.