How to Redesign a Blog: Redesigning DPS

In this post (the first of two) Web Designer Matt Brett shares some reflections and tips from the process of redesigning my Digital Photography School blog.

When I was approached by Darren to take on the task of not only redesigning, but expanding his Digital Photography Schoolblog, I was thrilled and a little intimidated. I knew it was going to be a massive undertaking on all fronts. With DPS being one of Darren’s largest projects and with it having such a huge following, the pressure was on to deliver a top notch redesign.

Setting Our Course

Most projects I take on are personal blogs, or brand new sites. Neither of which require a whole lot of planning up front. DPS was different in that it is well established and chalk full of content. Before we settled on a timeline, I thoroughly assessed every step of the project and created an outline that spanned a total of 5 weeks.

• Phase 1 – Design (7 days)
• Phase 2 – XHTML/CSS Templates (3 days)
• Phase 3 – WordPress Development (7-10 days)
• Phase 4 – Forum Integration (3 days)
• Phase 5 – Finishing Touches (2 days)

The WordPress Development phase ended up taking a bit longer than anticipated, as we managed to sneak in some new features along the way. Which in turn cut down the amount of time allotted for the forum integration. At the end of it, I had to put in a bit of extra time to tidy up some display bugs (primarily with different versions of Internet Explorer, of course). But overall, we managed to stick pretty closely to the schedule and consider the launch of the new site a success.

It’s All About Structure

One of the most important and underappreciated steps in designing or redesigning any website, is coming up with a solid structure (or layout). Most people call this the wireframing stage, which has been part of my regular routine for years now. Spending a day or two to really flesh out just how you’re going to lay things out not only makes it easier for the client to get a clear picture of where things are headed, but also eases the amount of revisions in the design phase. It’s much easier to move things around and make significant changes when you’re dealing with flat boxes and placeholders.

Before the end of my second day on the project, I delivered a wireframe for the article layout which basically looks like a stripped down version of the final design. After a couple revisions, I took the wireframe and started playing with colours and styles (click image for enlarged view).

Design Direction

It’s always nice when a client gives you free reign to try new things when it comes to design. Darren really didn’t give me a lot of direction in this department, other than to see he wanted something that looked more professional and one of the main goals was to increase usability and readability.

I spent some time checking out the current trends via design showcases, and determined which routes I didn’t want to take. I also peaked around at other photography and camera equipment sites to see what related others in the same field were doing. There seemed to be a lot of stark contrast – typically, sites would be on a solid which background with one dominant colour. Similar to the previous version of DPS which was blue and white.

First on the not-to-do list, was “Don’t use white, anywhere.” With the exception highlights in some of the icons, I stuck to that. Using off-white and beige in place of #fff. It didn’t take long before I started working with some rich browns, and almost gold tones. While this normally wouldn’t be my first choice for a colour scheme, I felt with it being completely different from the previous design and out of the ordinary for this type of site, it might be just what we need for a fresh, new feel.

When Darren mentioned he wanted to split the site up into 3 separate blogs, I immediately thought of doing a unique dominant colour for each. Since “Photography Tips & Tutorials” was basically the catch-all blog and closely resembled what the previous version of DPS was, it made sense to go with blue. From there, I simply went through my colour pallete and chose some other colours that worked well with the rest of the site. Green was a no-brainer, and I wanted to use red for the “Post Production” blog. The problem there, was that it ended up being closer to pink than red, which Darren wasn’t thrilled about. When toned down to more closely match the blues and greens, we ended up with a very muddled red which is closer to brown, but still works (click image for enlarged view).

The rest of the aesthetics came together pretty easily. I decided there would be no high gloss or “wet floor” type effects. And instead opted for soft gradients which brought a warm feeling to the site that the stark contrast of the previous version lacked.

On Thursday Matt will continue to reflect upon the redesign of DPS. Stay tuned to ProBlogger’s RSS feed for the 2nd part.