Watch your step, fresh paint

Well, You may have seen with my series of Extreme Makeover WordPress Edition, I’ve been working a lot on my new theme here.

Now you can see the result !

First of all, I wanted a cleaner theme, lighter and with clear content. Yes, my purpose here was to give more focus on the content so that you stay and read the blog, not only go on the zdmultilang page to do some comments on what’s not working

I also wanted to include some new features like threaded comments, more spread the love stuff, you will also see my twitter feed on the right sidebar.

The archive page has also been worked a lot on so that you can find your way inside the blog easily.

But more important than all the other reasons why you should like the new design is, I do LOVE it ! Now I want to blog more here simply because I’m not finding my own blog to be ugly and messy

By the way, leave comments, I don’t eat people and actually, I’m quite a nice guy !

Technical details

So, for those who wants to hear more of the technical details, this theme is not using any wordpress framework appart from the 960 gs css grid. jQuery is used for all the visual effects, I chose to use jQuery as it’s probably the most powerfull javascript lib.

Here is a list of the files I’m overriding :

• 404.php
• archive.php
• archives.php
• comments.php
• comments-popup.php
• footer.php
• functions.php
• header.php
• index.php
• page.php
• search.php
• sidebar-archives.php
• sidebar-left.php
• sidebar-right.php
• single.php

The theme has also it’s own defined widget and functions. One of the most important one is the one I made to display the monthly archives.

[Photo credit] – Gaetan Lee

Once you have decided the features you are looking form you should try to get some inspiration. Inspiration is very important to understand your niche and to find out what your audience would like to see in a Blog and what they do not expect. Of course, inspiration is not copying a blog, au contraire !

You will have to find what is best for you, take bits and pieces everywhere to make your own design unique !

Here are some specific places where to find inspiration:

1. Webdesign Cluster on Flickr
2. Web Design Pool on Flickr
3. WebDesignerWall made a great post on finding Inspiration
4. 44 Must Learn Web Design Layout Tutorials in Photoshop @ Naldz Graphics
5. 40 Web Design Artists And 102 Websites Worth Watching @ 1stwebdesigner
6. 25 Incredibly Artistic Websites @ vandelaydesign
7. 50 Stylish Navigation Menus for Design Inspiration @ Six Revisions
8. 30 Most Inspirational Business Websites @ elitebydesign
9. 41 Great Looking Free WordPress Themes @ Hongkiat
   

But there are also some more generic places to go for your daily dose of inspiration

• Smashing Magazine
• The FWA: Favourite Website Award
• Abduzeedo
• Css ZenGarden
• Naldz Graphics
• Elite By Design – Inspiration category
• The Design Inspiration

And you, where do you find your inspiration ?

[Photo Credit: stephenpoff]

1 – List the good/bad things about your design

Before to go to far, you should make a list of all the features you want and all you want to get rid of from your current design.

Which basically means, what do you want to keep from your current design and what do you dislike ?

For example, you might want to get rid of that left sidebar and move it to the right, get a better search system but want to keep your great Archives page !

2 – Define your style.

You have to define your topic. Then you’ll have to decide which style you will use.
Why is that ? Mostly because your topic and your style will have a bigger impact with a design made for them.

Let’s say for example you are a Video game company and you want to have a funny design, then you cannot have a serious style as it will be misplaced. If you have a comic style logo and have a corporate tone, then your audience will be lost.

An the contrary, if you have a profesionnal looking website like the one we can see at EA, then your tone as to be corporate.

3 – Define your content guidelines

How do you intend to present your content, one image as a header, 2 paragraphs as the introduction and h2 titles to cut the content ?

This content guidelines will help you to define the whole structure of the site (cf ch4). If you use a banner for all posts, then you have to define the placeholder with the correct sizing to make sure there is consistency on all pages of your design.

As well, if you do use separators for paragraphs, you’ll have to remember to design them.

4 – Define the general structure

You have to know how the content is going to be organized, this means define (or change) the names of your categories, the pages and how they will be organized, like subpages etc…

By doing that, you will give more consistency to your blog as well as readability. For example, you can see that I do have a header with pages, this will change in next design as there will be more sub-pages and therefore more submenus. I will also join multiple pages into one page with subpages.

About + Resume + Contact will become an entire category (page + subpages) and will lighten the header.

[Photo Credit: Caro Wallis]