Redesign… version 4

Somehow, some way, after more than eight months tooling around in Photoshop, I managed to give this site a major design refresh. The motivation was the May 1 Reboot, but I’ve been trying to get this done for quite some time.

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

Keeping this in mind, there was a lot of room to improve…

I switched to a Macintosh almost 2 years ago, and it was one of the best purchases I’ve ever made. I wanted to keep the old Alison “N”, but figured it would be nice to aqua-fy it, in honor of OS X.

The site header and navigation in the last design took up too much real estate. I always admired Jason Kottke’s decision to minimize 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 something, you know exactly what you’re holding in your hands.

I decided not to go too small, since I wanted to make it easy to click and navigate, but I combined the site header and navigation in one horizontal green block… the gradient was used, in order to break up the “block-iness”.

Photo Headers
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 important and enjoyable part of my online life, that I decided it would be great to integrate my Flickr Photostream into the site header.

This however posed some difficulty… how to integrate? Sure, Flickr has a great API, but it would be quite daunting for this coding amateur to build the kind of photo header that I envisioned.

So, I looked around for some help. I remembered Bryan Bell mentioned that he was working with Nick Chapman 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 spending 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 overlap my photo header…

Still, Bryan and Nick’s idea got me thinking — Todd Dominey’s SlideShowPro would be an excellent match for what I wanted — though, I’d have to deal with the trade-off of having Flash embedded in my site. Having spent the past 2 years learning about and embracing Web Standards and concern for accessibility, I’ve avoided using Flash… but, the more I read about SlideShowPro, the more I thought that it was the perfect fit for what I wanted. It has built-in support for the Flickr API, it’s easily customizable to any dimensions or color palette, and it’s built by a guy that I respect and enjoy reading.

I wasn’t able to get the Flickr functionality implemented yet, (waiting on my request for an API key), so I just threw a couple of photos together for this launch.

Please email me or leave a comment, let me know what you think. I did a bit of testing on IE6 WIN, so hopefully there won’t be many quirks to work out.

7 Responses to “Redesign… version 4”

  • Looking good ned. I like the flash header; It works really well on your site.

    Oh, and 8 months is nothin’. I think I’ve been perpetually working on a redesign of my site since the dawn of time.

  • Looks very nice. I really like the use of SlideShowPro. I’m also a bit of trouble getting to to do what I want with Flickr, but it’s a great tool no doubt.

    Anyhoo. The site looks very nice.

  • good job ned – i was surprised you made the may 1.

  • Pretty hot man. Pretty damn hott.

  • Hey, the new design looks real sharp. I especially like the N logo and header bar. Also, the subtle gradient shadow thing is real nice and soft…

  • Ooohhh… the post-comment page…

    indicating that comment is queued for moderation, has some remnants of the the old style, and may need some tweaking…

    Unrelated: I too am thinking of making the switch to a mac, and would love to hear more on that subject (aside from what you’ve written). Any drawbacks?

  • Thanks everyone… I realize there are a few stray items to deal with… like the “thanks for leaving a comment” screen. I’ll be sorting these out in the coming days.

    I think the right column feels a bit crowded. Perhaps I will bump out the site’s width.

    Also, I’m still waiting for my API key from Flickr! What’s taking so long?

Comments are currently closed.