Close
Close

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.

dps-redesign09-home.jpg

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).

dps-redesign09-wireframe-tnail.jpg

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).

dps-redesign09-mock01-tnail.jpg

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.

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Brent Riggs says:

    Good process… thats’ the big mistake people make, not planning well or being structured about a design OR redesign. Interesting post… thanks….

    Brent Riggs
    http://www.brentriggs.com

  2. Rahul Jadhav says:

    Wow i have never designed a blog so it was nice to know the process of designing a blog

  3. CS-Weekly says:

    State of the art design! Wish Darren can share us some stats later to show the resign effect. Such as new visit bounce rate, PV, stay on site time, etc. I guess it will be huge!

    Jensen Liu | http://www.cs-weekly.com

  4. Writer Dad says:

    Wow, that seems like such a massive project! The outline seems sensible – really well articulated. Thanks.

  5. One mistake I make with redesigning is not having a set plan and sticking with it.

    Good to see your process!

  6. Very nice designs.

    You did a great job capturing and keeping Darren’s clean look.

  7. I went from a 2 column to a 3 column design and the longest part was the restructuring. And since I’m not a programmer, it was a hellofa job! :)

  8. Tamar says:

    Really nice post, tips are great. Planning and design is a major part of a blog and any website for that matter. Thanks much guys.

    http://www.eznetbusiness.com

  9. CS-Weekly says:

    State of the art design! Wish Darren can share us some stats later to demo the resign effect, such as new visit bounce rate, PV, stay on site time, etc. I guess it will be huge!

  10. Kayla says:

    This is probably one of the most useful posts I’ve read in a long time. Great plan, and wonderful insight. I’ve been meaning to re-do my own blog design for quite sometime, but I’ve been afraid to venture into it because like this example site, there is so much content there already.

    I really feel more confident now, thank you. :)

  11. I can see how redesigning such a well established blog could be intimidating. You’ve done a nice job though. Have you redesigned any other major blogs that we might know of? Just curious.

    - Dave

  12. Alex says:

    Agreed on the time frame, thank you for sharing :-)

  13. Blog Expert says:

    The design of this Blog is a lot better. It makes it much more professional and not like a typical Blog.

  14. Robert "Butch" Greenawalt says:

    Very sound advice and appreciated I spent a week or better on a template and asked a question and was told the template was being completely recoded. Sometimes the easy way is to let someone experienced do it. Live and Learn they say. Nice post.

  15. Will Lowrey says:

    Thanks for sharing the process. The site looks great! When you did the wireframing – did you use Fireworks?

    Also, in choosing the colors for a site – do you have a rule of thumb for the number of unique colors to include? I have found that 3 (like in your site) can work well – but much over that, and it can feel busy.

  16. Mark Daymond says:

    Some sound advice here. I have a new website to work on and I am trying to resist the temptation just to dive in. This reminds me that I need to spend time planning out what I want.

  17. Gennaro says:

    Re-designing a successful blog is a bit of a risk. People don’t generally like change (except for in politics). That being said, innovations in technology make it vital to re-design occassionally

  18. Steven Ings says:

    I’m a new blogger and there are a lot of points here that will help immensely as I continue to develop my blog.

    Thanks for the great post. The new design is a great improvement.

  19. Great advice! I do a lot of theme customizing for people and the hardest for me is figuring out what the people are looking for. The design is really important, as well as a timeline like you suggested.

  20. James says:

    Not everybody knows what DFS looked like before — you should probably post a before-and-after shot.

  21. James says:

    DPS haha sorry

  22. Awesome insight. I am still learning some things in the design department, and a reflection post from a great designer such as yourself will really get me to think through my process a little better.

    Can’t wait for part 2.

  23. Matt Brett says:

    Thanks so much for the warm response, everyone! Darren told me his readers would really enjoy a look behind scenes of the DPS redesign. It appears he knows his readers well. ;)

    @David at Animal-Kingdom-Workouts.com: I normally stick to smaller projects – blogs for individuals and such. But last year I redesigned Comic Book Resources, which is still the largest project I’ve worked on since I started freelancing. I also worked with Chris Pirillo a few months back on his social media WP theme.

  24. Martin says:

    Thanks for the look behind the scenes of the redesign – it’s interesting to see how you approached it and executed it.

    (FYI, there are still layout issues with DPS in IE6, particularly around the tags at the top of the blogs.)

  25. rikin says:

    There’s some great tips here for new bloggers and designers too. And in regards to this site …even though you use Thesis, as do I, a lot of thought still has to go into the actual design. It drives me bonkers sometime.

    Cheers!
    -rikinontheweb

  26. Gary Lee says:

    I just found DPS a couple of months ago and was just starting to get used to the old design when BAM, you guys threw in the new one. It took me a while to get used to it, but I’m slowly coming around. The even more ignorant part of me just realized it was THE Darren Rowse’s other project. It really is a great resource for tips . . enough so that i started my own photography blog – http://www.mrgarylee.com/photography

  27. Trey Baird says:

    That looks really awesome. I can understand the importance of planning ahead, and building the frame first.

    Thanks a lot for clueing us into the process of what you do. The timelines also help to put it into perspective. You’re a professional, and it still takes you that long to properly do it. A good reminded to beginner bloggers, that there is no instant gratification in this industry!

    Kudos.

  28. J.D. Meier says:

    I agree – structure is key.

    It seems like there’s some definite patterns and practices for user experience that work way better than others.

    I’m surprised when some blogs make me work too hard for finding basic features.

  29. John says:

    Interesting to read about, but design is not something I feel competent to take on. I use a template from Squarespace, which I can change quickly. I wish there were more choices, and maybe there are since I “redesigned” a few months ago, but it’s a better option than learning design. I don’t have the time.

    FYI, a couple of words are misspelled. It’s “chock” full, not “chalk.” And free “rein” not “reign,” although the latter could be also be a play on words.

  30. The new design looks very clean and nice. Good evolution of DPS.

  31. SEO Tips says:

    Great process looks excellent in my opinion :)

  32. TechMata says:

    I take a look at DPS and it is a very nice site. How I wish I have designing skills.hehe

  33. Jason Annas says:

    Great article, I like how you broke it down and can’t wait for the next article.

    Love the redesign too.

  34. Oh yeah, it was so funny I didn’t know you had finalized a new blog design yet and I went over to your blog to show my wife something I thought cool about your site and it was totally different. I was like hey babe come check out the new design.

    Anyway, I like it. It’s sweet.

    Kenney
    The Work From Home Secret

  35. Ryan Bickett says:

    Great post. I am currently working on a new blog design. While this post covers a redesign, I still gained a lot of great insight from this into the areas I should be focusing on as I begin the process of designing and building my new blog.