Designing this Blog

It took me three and a half months to create the theme for this blog.

My wireframe, which turned out to be pretty dull.

Ok, so I was on-and-off, and many nights I was just too tired from coding at work to do any additional programming (esp. of the WordPress template variety) afterwards. I also wanted to mimic what I thought was the right procedure to design; that is, I wanted to do design research, proceed with brainstorming and some sketches, move to creating wireframes, create comps in Photoshop or Fireworks, and then finally crank out the templates, at which point I’ll actually get to spew my technical musings onto the internet.

If you’re wondering, yes, the above was completely overkill for what ended up being a simple, clean design.

I think I began to realize this when I was slogging through creating page after page of mocks and comps. Blog design is inherently repetitive, and after looking at hundreds of other blogs for inspiration there was a standard that I tried to adhere to anyway, so in retrospect a style guide probably made more sense than full mocks. In particular, I knew I wanted a clean page, with simple lines, ample white space and minimal distractions; the complex banner images, drop shadows, and transparent graphics kept getting in the way.

My first mock was a banner sandwich.

Eventually I came across a post on Quora which espoused the virtues of prototyping in code instead of in a graphical tool. As my strengths laid in writing code anyway, I felt it was worth trying. As it turned out, though, working via the “living mock” actually worked better than I had expected:

The kicker here is that I tried and stuck with this method the second time around; the comp you see above is already mostly implemented as a WordPress theme on my hard drive, and upon taking a break and a step back at three-quarters completion, I decided to redo the entire thing using the first design as a base.

And despite its clutter, the first version designed in Photoshop had the benefit of following a few design best practices – 960 pixels, using fonts conservatively, and applying contrasting colors consistently – which I judiciously copied in the subsequent redesign. The rewrite took a total of 3 weeks; or, more accurately, some 10 nights of two-hour coding sessions on nights when I wasn’t playing video games with friends.

If I only read that post sooner.