Blog

How to design a blog: part 1, an overview

Posted by Peter F on August 31 2006 in, Blog Design, Design, Series, How-to

I’m a baaaad baaad designer. That’s the only reason I can give as to why I’m never happy with my own websites.

See, it’s not that I’m bad at designing websites, rather I’m bad a following my own “rules” when designing for myself.

My last design here at The Blog Studio was really nothing short of a disaster. See, I started the design during a lull in work, fueled by a desire to move the site to Expression Engine and to test out a couple of theories I’ve had kicking around in my head about search engine performance. The lull disappeared almost as soon as I started my design (of course), and as a result I rushed the process, skipping key steps along the way.

After only a few weeks, I stripped the design elements off the site, resulting in the bare boned presentation you see today.

They say that what you see is what you get. In the case of the current site what you see is really not indicative of what The Blog Studio offers. So I’ve clearly got to do something about it.

I thought I’d open up the process I use when designing a website, and share the whole thing with you – warts and all. My reasons for doing this are threefold:


  • Give you insight into how we work

  • Give you some tips and techniques that might help you

  • Force me to follow my own damn advice

In other words, I need a client! And I’m enlisting you, dear old blogosphere, to be that client.

Here’s an overview of the steps we’ll be following:

To start, I’m going to describe the purpose of the site. I’m going to list my goals for the redesign, and highlight what I like and what I don’t like about the current iteration.

Next, I’m going to create two documents: a mood board and a target board. The mood board visually describes the feeling I want the site to convey. The target board gives best-in-class examples of specific bits of design related to the project. Every design project is built on the shoulders of giants. It’s helpful to have a sense of the best of what’s come before, so that we can have a measure of comparison. It’s hard to know if you’ve acheived a goal if you don’t know where the goal posts are.

Following that, we’ll get into designing wireframes. These simple documents help define the layout of the site. The reason for this step will be self evident once we’ve completed it.

We finally get into designing the visual elements of the site at this point. I’ll post all my comps – the good, the bad, and the downright horrible – to help show that good design is a process of iteration and evolution.

Once the design is complete we’ll get down to the actual business of coding. This gets broken down into three stages – write the html and css, integrate the pages into a cms/blog software, and test the whole thing across browsers. Again, I’ll share any tips or tricks we use.

I figure the whole process will take about a month to complete, but may be delayed due to this little thing called workload. I’ll keep you appraised as we go.

To summarize then, the redesign process will be broken down into the following steps:

I’m looking forward to working with you throughout this project, and look forward to your feedback!

Email | Print |