Redesign… version 4

Somehow, some way, after more than eight months tool­ing around in Pho­to­shop, I man­aged to give this site a major design refresh. The moti­va­tion was the May 1 Reboot, but I’ve been trying to get this done for quite some time.

First, my objec­tive was not to totally re-​brand myself and my site. I like how this site’s struc­ture and style have evolved over the past 2+ years, and I love the green & orange. So, job #1 was continuity.

Keep­ing this in mind, there was a lot of room to improve…

Logo
I switched to a Mac­in­tosh almost 2 years ago, and it was one of the best pur­chases I’ve ever made. I wanted to keep the old Alison “N”, but fig­ured it would be nice to aqua-​fy it, in honor of OS X.

Nav­i­ga­tion
The site header and nav­i­ga­tion in the last design took up too much real estate. I always admired Jason Kottke’s deci­sion to min­i­mize his nav bar in his last redesign:

The yellow-​green thing at the top is a tag. Like the red tag on Levi’s jeans or even the red stripe on Prada shoes. It’s small, out of the way, but when you see it on some­thing, you know exactly what you’re hold­ing in your hands.

I decided not to go too small, since I wanted to make it easy to click and nav­i­gate, but I com­bined the site header and nav­i­ga­tion in one hor­i­zon­tal green block… the gra­di­ent was used, in order to break up the “block-iness”.

Photo Head­ers
I knew that this time around, I wanted to make the photo header a bit more dynamic, and easily updated. Flickr has become such an impor­tant and enjoy­able part of my online life, that I decided it would be great to inte­grate my Flickr Pho­to­stream into the site header.

This how­ever posed some difficulty… how to inte­grate? Sure, Flickr has a great API, but it would be quite daunt­ing for this coding ama­teur to build the kind of photo header that I envisioned.

So, I looked around for some help. I remem­bered Bryan Bell men­tioned that he was work­ing with Nick Chap­man on a kind of site header built using alpha-​channel PNGs, and javascript. But, despite some show-and-tell, it seems that they don’t have it worked out yet. And, after spend­ing about an hour trying to figure out how to get a 24-bit PNG to play nice in IE 6 WIN, I decided that I didn’t really need my logo to over­lap my photo header…

Still, Bryan and Nick’s idea got me think­ing — Todd Dominey’s SlideShow­Pro would be an excel­lent match for what I wanted — though, I’d have to deal with the trade-​off of having Flash embed­ded in my site. Having spent the past 2 years learn­ing about and embrac­ing Web Stan­dards and con­cern for acces­si­bil­ity, I’ve avoided using Flash… but, the more I read about SlideShow­Pro, the more I thought that it was the per­fect fit for what I wanted. It has built-​in sup­port for the Flickr API, it’s easily cus­tomiz­able to any dimen­sions or color palette, and it’s built by a guy that I respect and enjoy reading.

I wasn’t able to get the Flickr func­tion­al­ity imple­mented yet, (wait­ing on my request for an API key), so I just threw a couple of photos together for this launch.

Feed­back?
Please email me or leave a com­ment, let me know what you think. I did a bit of test­ing on IE6 WIN, so hope­fully there won’t be many quirks to work out.