Redesign ‘08: Structure and Style

Thursday, September 25th, 2008

It’s almost a month to the day since I launched my redesign, and I figure it’s about time that I open up in regards to how this all came together, and later, how everything works. My previous design was online for nearly 3 years, and shortly after launch, I wrote a couple articles sharing some of the CSS techniques I had used, along with some WordPress snippets. I’m planning to do that again, but first I’d like to walk through the initial planning stages. From wireframing, through months of design mocks.

Coming Up With Something Different

Since I had been sporting the same layout and design for so long, I wanted to really switch things up and go drastically different. At the same time, I wanted to maintain the image that people have come to know me for. My initial goals were…

• Anything but black. Preferably dark text on light background. Stick with pink as main accent colour.
• No visual horizontal division. Attempt vertical division.
• Come up with new section heading/sub-heading treatment and/or placement.

I managed to come up with a pretty unique layout with my first wireframe. The idea with the ideas, was that they would be mini-tabs along the left margin. Clicking them would push the entire site to the right, revealing a tray that contains all of the headings and descriptive text. While I thought this was a great concept and would raise some eyebrows, I knew it would be a nightmare for older and lower spec machines. Not to mention, some people might not even notice them and wonder what all of the content actually was. In short, hiding the headings by default wasn’t the greatest idea.

My second wireframe corrected this potential issue by dumping the headings in a gutter off to the right. Having them as part of the main container meant I had less space for content, so some rearranging took place.

Doing Away With Black

I assume 2 things come to mind when people think of my old design - grunge and black. All along, my intentions were to stick with the grunge theme, but I definitely wanted to move away from dark colours primarily. I started working with beige and light browns, and after much tinkering with adjustment layers, settled on a colour scheme.

For the longest time, I couldn’t figure out what to do with the header and footer. I wanted to have the headings separated from the content area visually, but that gutter would be made wider for the article layout where it would be re-purposed as the sidebar. I had tried stretching the header and footer from edge-to-edge, but didn’t like the “T” shape it produced. After much fiddling, I decided to restrict the entire site in a container.

Back to Freelance

You may have noticed that there was no place for my design work on the homepage in the previous mocks. Up until March of this year, I had been working for a design studio and wasn’t able for hire. When I made my return to the freelance world, I revisited the homepage and put in a prominent space to promote my work.

It wasn’t long before I overhauled the design section to make it even more prominent. At the same time, I came up with the idea of separating blog and design related items in the main navigation. With the exception of the header, I was really happy with how things had come together and considered the homepage complete.

So Much For Change

Over the past year or so, I’ve taken a liking to brown. I own some brown clothes, and Deanna picked up this great set of luggage that’s brown with white and pink lining. I absolutely loved that combination and decided to give it a go. I posted a side-by-side comparison on Flickr to get some perspective from my peers in the field, and see which people were favouring. Some great points were raised and I decided to go with the brown.

Last Minute Decisions

One thing I was never crazy about was the length of the homepage. As much as I liked giving my readers a place on the homepage (recent comments), it was something I could do without. At the same time, I came up with idea of the thought bubble for my latest Twitter update, so that was one less thing adding length to the page. As I mentioned before, I wasn’t stoked on the header - primarily the nav and the “logo”. So I took another stab at it and came up with something much better.

The last thing to change before I started building the site out was the primary colours for each section. I had kept the colours from my previous design, but they were just too stark against the brown.

And that’s it. The final mock was locked down and I moved onto the XHTML/CSS phase.