I choose WordPress for my blog because there is a large developer community behind it. It has also been around for a while and for the most part, he security issues have been worked out. There are a lot of skins out there for WordPress but I decided that I wanted to have a unique look for my site and design something from scratch; here is my design process.

Figure out what elements you need

The first step I take when designing a website is to decide what purpose it serves. With past clients this was easy, because most of their sites were informational. They needed a home page, a description of their services, a way to contact them, etc. With this site, I knew it needed the normal blog features: categories, archives of posts, about me section. What I didn’t know is what other content I wanted to pull in. I decided that I wanted to combine my blog with my portfolio and my photo of the day project (which I have been doing for 3 ½ years). I also wanted to pull in content from the social networks I contribute to: Flickr and Twitter.

Sketch it out

After I figure out what elements I want on the site, I will sketch something out on paper. Yes, on paper. Typically I sketch out dozens of different layouts, basic wireframes of where content will sit.

Digital Wireframe

Once I narrowed down what layout I like I will create a wireframe in Photoshop. These are usually done in grayscale so I can see where content will be placed. At this point I don’t want to get bogged down with colors or patterns or design elements; I want to finalize the structure. Here is my wireframe:

Colors, patterns typography and a whole lot of revisions

I went through four different revisions before settling on this design; this site was quick. With a typical site I might go through eight or nine revisions. I knew I wanted to use neutral colors with one accent color, so doing the wireframe in grayscale helped a lot. I think if I had wanted a more vibrant looking site, I would have had more revisions. You will notice the samples below are very similar, I was having trouble figuring out the header and the navigation.

When deciding what design elements I want to use I frequently visit a lot of different sites. Once good resource to look at examples of websites is designmeltdown.com. They have hundreds of different designs all organized out by category.

Design takes me a week to complete. I like to work on the design for the few days, and then take a day or two off to think about the project. Usually when I come back at the end of the week I have a clear picture in my mind of what I would like the site to look like.

With my blog, I was lucky, I was able to take the time to go through the whole process slowly and come up with a design that I am proud of. With some freelance projects, the client is under such a tight timeline, there isn’t this much time.

What about you?

What tips would you give for desinging a blog, or a website? Do you have any suggestions or criticisms about my design?

Tags: Design, process, wordpress