Blog Design for Beginners Part 2

The following post is part 2 (of 3) of a series of guest posts on the topic of Blog Design – written by blog designer, Peter Flaschner from Blog Studio.

In my last post, I described the process we use at The Blog Studio to design a web site. Today, we’re going to take the finished design and turn it into a fully functional WordPress theme.

So, ready? Excellent. For today’s lesson, you’ll need your graphics editor (Photoshop, Illustrator, Freehand, Gimp, etc), an ftp program to upload files to your server, and a pencil and paper.

I’m going to gloss over a whole bunch of technical stuff here. The point of this post is not so much to teach you how to write html as it is to give you an insight into the process we use to design and build blogs.

Step 1: Plan the attack
Let’s take a look at the design I whipped up:

As you’ll see, this is an extremely flexible design, capable of being many things to many people, all without looking cookie cutter. (Note that I only had a couple of hours to work on this, so a masterpiece it is not. But it serves its purpose for the sake of this demonstration.) We need to take some extra care at the planning stage so that we can accommodate all the stuff the design doesn’t currently show.

I’ll usually print out the design at this stage, and figure out how I’m going to structure the html. I avoid thinking about coding the site until this stage. I don’t want to design to my limitations, and find that worrying “how am I going to make this work” before I reach this point results in stale work.

I’ll also determine which elements are going to be h1’s, h2’s, etc.

Step 2: Write the basic html and css

Next I’ll open my html editor du-jour (currently the super marvelous Textmate and block out the basic structure.

A quick word on html and css: if you can get your head around the fact that you’re placing boxes on the page, you can pretty well do anything. What I’m doing here is building nested boxes, just like those crazy Russian dolls (bad metaphor, bare with me).

I haven’t added any content at all – just a bunch of div tags with ids and classes (use an id if the element appears only once per page, use a class if there’s more than one. Don’t ask why, I don’t know). When choosing names for your classes and ids, use names that make sense. Be as descriptive as you can. Trust me. It will just about save your life.

The Blog Studio’s Uber fantastic flexible thingamajig

Now, for my super secret oh-my-god-that’s-amazing trick. We’re going to start our stylesheet at this this stage. The trick we’re going to use is to give each id and class a different background colour. This will allow us to tweak our layout before we add a whole bunch of stuff into the code and make things complicated.

*/ Brought to you by the fine folks at The Blog Studio  
(www.theblogstudio.com) and the letter k */

* {
        margin:0;
        padding:0;
}

p {margin: 1em 0}

body{
        background: #fff;
}

#top-banner{
        margin: 10px auto;
        width: 825px;
        height: 40px;
        text-align:center;
        background: red;
}

#wrapper{
        margin: 0 auto;
        width: 825px;
}

#adwords-banner{
        margin: 5px;
        width: 815px;
        height: 20px;
        background: red;
}

#header{
        margin: 5px;
        width: 815px;
        height: 100px;
        background: grey;
}

etc etc etc

The next steps are coming right up in my next (and last) post in this mini-series!