Refactoring

This website is only about 6-months old, but I decided I needed to make a few changes. I’ve received a tremendous amount of positive feedback and for the most part, I’ve been pretty pleased with the design and the organization of information.

In spite of the positive feedback, there were a few aspects that bothered me and some small adjustments were necessary.

Item #1: Content strategy

For starters, when I originally published the site in May 2007, my intentions were to dive into full-time freelancing in the near future, so the site had a distinct “this is Oaktree Creative, the company” approach to it. Much of the content of the site was written to reflect that approach and (unintentionally) the homepage was little more than a glorified splash page. It looked nice, but seemed empty to me.

Solution: Completely rebuilt the homepage to show a featured blog entry, a list of recent entries in one column and the Murmurs (RSS here) list in another column. I moved the portfolio links to the bottom above the footer. I also rewrote the About page, making it more personal and less “about Oaktree Creative, the company.”

Item #2: Blog entries limited to full articles

Occasionally, I come across a good article or see something on the web I’d like to comment on or point out. The way this blog is set up, it doesn’t lend itself to a short, link-blog format.

Solution: I’ve been looking for some way to integrate that type of content on the homepage and wanted an easy way to implement it without having to write a bunch of code. I also wanted it to be easy to publish when I found something interesting.

A friend of mine pointed me to (and helped me set up) a nifty little tool called Simple Pie. Simple Pie is a PHP script that pulls items in from an RSS feed. In my case, I’m pulling items I’ve tagged as “murmurs” in my del.icio.us bookmarks.

Item #3: Horizontal Banding

Another thing that bothered me was this concept of “horizontal banding” that seemed to visually dominate each page – again, especially the homepage. What I mean by horizontal banding is that each “section” of the site was separated visually by colors and border treatments. So it gave the site a “banded” feel to it. An orange band at the top for the header, followed by a brown band for the navigation, followed by a wider, white band for the “main content” and then a larger tan section for more content and then a final band (darker tan) at the bottom for the footer (see graphic).

Graphic depicting the visually banding of the site.

Solution: I was able to remove two “bands”, which I think helps make the site a bit more visually fluid and less “compartmentalized”. I got rid of the navigation band; it now blends in with the header. Also removed the footer band; it now blends in with the bottom portion of the page instead of being set off in its own section.

While I had the hood up and my hands greasy, I decided to make a few other cosmetic changes. Some are more obvious, like the color palette and the header graphic. Others were more subtle like text size adjustments and a few new icons.

All in all, I’m pleased with the changes. Mostly, I’m excited about the Murmurs, which will give me a chance to keep the content more dynamic around here. If you’re interested, grab the RSS feed to follow the updates and by all means, feel free to chime in with your feedback.

(There’s still a few things I’m working. A couple of the newer portfolio links at the bottom of the homepage don’t work yet. I know about it and I’ll be fixing that soon.)

No Comments

  1. beth says:

    I like the new muted palette and the leaf illustration at the top, very classy (not to say the old site wasn’t.)

  2. unkle e says:

    I found these comments very interesting. I am a total amateur with almost zero graphic design ability, so I enjoy checking out good designs to see what I can learn. I had your old site bookmarked (along with quite a few others) because I thought it was one of the best I’d seen. I thought it was a great example of a full width “banded” site, and although I normally don’t think brown is the best base colour, you made it look very good.

    But I think the new colours are even better, and while the home page doesn’t have quite the same “work of art” feel, function is more important, and I understand what you are trying to achieve. (My best friend is an architect, and has taught me that good design is about use and function, and only secondarily about appearance.) So thanks for sharing your ideas.

  3. Teevio says:

    Looks fantastic! My only suggestion, is that the area on the Homepage where you have the archives has a ton of whitespace on the left. You could possibly add Month archives or make that section fill the area visually?

    Great job though!

  4. Umair says:

    Your both designs, previous and new, look absolutely gorgeous.

  5. chuck says:

    Teevio – thanks for the suggestion … I think that’s a great idea. Something for the long holiday weekend, perhaps.

  6. Dennis says:

    Chuck – the realignment looks great…although the previous was great too. Keep us the good stuff and I think your draw to color is very soothing.

  7. Ricardo says:

    Both of your designs are nice and look so elegant.
    I have your site bookmarked since some months ago.

  8. Alexandra says:

    I kinda liked that splash of color you had in your earlier version.

    Anyway, I really like your site. It’s done with great taste and elegant colors. Easy to navigate. Awesome job

  9. Enzo says:

    Actually, I like the old version better. The horizontal bands give it a nice look and the orange color was very nice. The new design is nice too, but I think you took a step backwards.