Refresh for a New Year

It’s been a long time coming since I’ve wanted to bring my own hand into a blog design around here, and as much experience as I’ve had with WordPress, it’s always been a really intimidating prospect. Although I come from a coding background, it’s something that I haven’t really pursued since school, as I went more down the interaction, usability and design route.

After making use of many, many templates, I never really felt they reflected my own aesthetic sense or information architecture in any way. That’s why a few weeks ago when I finally had some runway to get heads down into things, I took a swing at redesigning this humble little blog site!

Initial Thoughts

There were a few key things I wanted to feature with my personal site – primarily, my resume, my work in photography and video production, and an easy way to get in touch with me using social networks or otherwise.

I went through several paper sketches of what I wanted to achieve, but the first soft draft here reflected some of the basic ideas I wanted to get across. I’ve been intrigued by the idea of vertical-tabbed navigation with descriptive text for quite a while, as well as the way serif and sans-serif fonts can play off each other to form a visual hierarchy. I liked this pass, but there was too much visual distraction in the right with the photos and videos competing for attention.

I also didn’t like the use of icons in the tabs once I finished the design. They were really redundant given the subtext descriptions, so those had to go.

Coloured Tabs

The next revision saw some pretty major changes to the layout of the page. I experimented with traditional horizontally-aligned tabs for the navigation, but this time treated them with some colours. My idea was that each page would have their own flavour that not only gave the page a sense of identity, but also visually act as an anchor to the user’s current location in the site.

A few things bothered me about this design – the amount of empty space in the lower left resulted in an awkward flow of the eye down the page, going in a sort of backwards ‘r’ pattern. This design also screamed to me as ‘democratic’ or ‘all content was created equal’. There was no distinction between the main content of the page to the rest of it. The tab colours reflected this as well and really didn’t ‘pop’ to me.

Colours

It was at this point that I started undertaking the task of determining what kind of colour treatment I wanted to give the page. As I usually do in these situations, I head on over to COLOURlovers for some inspiration and almost immediately came across the Optimistic 2009 palette.

Not only did this reflect the sort of fresh look I wanted to give to the page, but also reflects the mindset I’m coming into this year with. It’s a really good time to be alive, not in spite of all the doom and gloom around the economy, but because of that gloom. This year is a time for renewal, change, growth and excitement, and I thought this palette communicated that really well.

That being said, I felt it was missing a certain bit of drama, purity, and masculinity to it and so pulled it apart a bit and came out with my own new palette, AS.com.

With some slight tweaks to the existing colours (keeping the original Optimistic red), I added a fairly complimentary blue to the mix. The colours needed to be able to back white text, so the green and yellow were a bit of a challenge to pull off.

Pulling it Together

Now that my colours were set, I took a fresh look at the page and went back to vertical tabs, and obviously was a little bit in love with the palette at this point. Too much emphasis was giving to the navigation, and the left side of the page in general. The design lacked a certain amount of whitespace that I desired.

However, this design was starting to bring the idea of a natural path to completion into the page, progressing from title, to current page, down the content and over to the related information on the right.

Setting the Stage

Given the problems I was having with flow around the page and surrounding the navigation, I started to look at whitespace and the overall grid of the page. Bringing in some guidelines with a very defined amount of spacing (which I think I tend to a little OCD about in my designs) gave the logotype some breathing room, and started to define the boundaries of the content vs. sidebar a little better.

The video sidebar section was also cut at this point, as I felt it was detracting from the overall simplicity of the page. It also was a tad redundant given that I devoted an entire section of the site to video. The issue I had with this design was that the colours were still drawing all of the energy away from the content area and thus it felt lifeless. It was also difficult to determine the active tab since the only differentiator was a small section of pixels connecting it to the main content area.

Et Voila

My last revision is the design you’re looking at now. Having removed the coloured backgrounds from the inactive tabs, and giving the content area the same coloured border as the page itself, it added some interest geometrically to the page, and an interesting dynamic effect in that the border would extend longer down the page as you navigated to different pages.

Cutting the dark grey boxes from the page for my short bio and Twitter update also gave the page a much lighter, more airy feeling.

Letting Content Speak for Itself

You’ll also note that all subpages such as video and resume dispense with the right sidebar, instead favouring the content, giving it an extra 200+ pixels to work with. This means I can display my videos at their full original resolution, and that my resume can be set in a natural, almost printed format rather than confining it into a narrow column.

I’ve also started bringing in the idea of adding ‘secondary actions’ to the content pages. You can see an example of that on the resume where the PDF download link is shown in place of the sidebar area. This position helps communicate the idea that it is a related action and doesn’t interrupt the flow of the content.

Next: Business Cards

Looking at how many conferences, unconferences, and other events with lots of networking potential I’ve found myself at lately, I thought it might be a good idea to extend the design into a new set of cards that I could represent myself with outside of the work I do for IBM.

I just ordered this set from Moo so I’m hoping they turn out well. Overall I’m pretty happy with how everything turned out, and it’s giving me new incentive to start writing on here again, which is always a good thing

Feedback

As with all things I welcome any feedback, positive or negative you might have. Feel free to add yours to the comments below. This was my first design that I’ve actually implemented by hand since I took on my job as an Information Architect, so it reflects a lot of the concepts and knowledge I’ve acquired since then.

However, I know some of the code might not be so elegant (this is painfully obvious when viewing the site in Internet Explorer) and admittedly the site does lack a certain amount of flare that I aspire to. Those things will improve with time as I refine my skills with design tools and am better equipped to commit my wild ideas effectively and digitally.

Credits

This design was pretty difficult for me to pull off as I really haven’t had enough experience in Web programming to do some of the things I wanted to achieve, but I’m pretty proud of it looking back on the work that went into it.

I’m also really grateful for the help I had with it along the way and would like to thank Dan Hocking, Phil Nelson, and Alistair Morton for valuable help and feedback while bringing this all together.