Designing a Generic Blog Layout: Part 1

Due to the ever increasing popularity of blogs… I have decided to do a tutorial detailing the steps of designing a layout for a blog. There are several blogging tools (wordpress, blogger, MovableType, etc.) and Wordpress is my own personal choice, however this layout will be applicable with almost any blogging platform.

For the sake of this tutorial I will be going through the design process only, I may do a tutorial on slicing up the psd and creating the layout in XHTML/CSS… but that will be another tutorial at a later date.

This tutorial will consist of 3 parts:

  • Explaining Blog attributes
  • Setting up the Wireframe/Layout
  • Graphic Skinning

Anyways, let’s dive right into it… (FYI, I am using photoshop CS3 in this tutorial, so if you are using a different version some of the keyboard shortcuts may be slightly different)

Part 1. Explaining Blog Attributes

Most blogs have several common features. This is not to say that every blog HAS to have these features but I have found that for the most part, the attributes that I will explain usually re-occur amongst most blogs.

THE HEADER - The header is usually where your logo, site navigation and occasionally your rss/search is included. Not all blogs are structured like that but for the sake of this tutorial, that is we will be placing the logo & navigation elements.

MAIN CONTENT - This portion is where you would include your main site content (featured news section, new posts, etc.) and is the main ‘meat’ of your site.

SIDEBAR - Most blogging platforms have several widgets that can be tossed into the sidebar for easy management. There are tons of different types of widgets, for this tutorial our sidebar will contain the following: Recent Posts, Advertisement buttons, Categories

FOOTER - The footer usually contains your copyright & privacy information. Occasionally there will be other elements in the footer as well. We will just be putting the copyright & privacy policy for simplicity’s sake.

Those are the main elements that we will be using to generate the wireframe/layout in part 2 of this tutorial. That wraps it up for part 1, I hope you enjoyed it and be on the lookout for part 2!

3 Responses to “Designing a Generic Blog Layout: Part 1”

  1. ANDRE Says:


    CheapTabletsOnline.Com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. High quality drugs. Order pills online

    Buy:Levitra.Cialis Soft Tabs.Viagra Soft Tabs.Propecia.Viagra Super Active+.Viagra.Soma.Zithromax.Maxaman.VPXL.Cialis.Viagra Professional.Cialis Professional.Tramadol.Viagra Super Force.Cialis Super Active+.Super Active ED Pack….

  2. TYRONE Says:


    NEW FASHION store. Original designers collection at low prices!!! 20 % TO 70 % OFF. END OF SEASON SALE!!!

    BUY FASHION. TOP BRANDS: GUCCI, DOLCE&GABBANA, BURBERRY, DIESEL, ICEBERG, ROBERTO CAVALLI, EMPORIO ARMANI, VERSACE…

  3. Tom Says:

    advair diskus…

    advair diskus…

Leave a Reply