Redesign… version 4

Some­how, 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 try­ing to get this done for quite some time.

First, my objec­tive was not to total­ly 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 con­ti­nu­ity.

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

I switched to a Mac­in­tosh almost 2 years ago, and it was one of the best pur­chas­es I’ve ever made. I want­ed to keep the old Ali­son “N”, but fig­ured it would be nice to aqua-fy it, in hon­or of OS X.

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

The yel­low-green thing at the top is a tag. Like the red tag on Lev­i’s jeans or even the red stripe on Pra­da shoes. It’s small, out of the way, but when you see it on some­thing, you know exact­ly what you’re hold­ing in your hands.

I decid­ed not to go too small, since I want­ed to make it easy to click and nav­i­gate, but I com­bined the site head­er 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”.

Pho­to Headers
I knew that this time around, I want­ed to make the pho­to head­er a bit more dynam­ic, and eas­i­ly updat­ed. Flickr has become such an impor­tant and enjoy­able part of my online life, that I decid­ed it would be great to inte­grate my Flickr Pho­to­stream into the site header.

This how­ev­er posed some dif­fi­cul­ty… how to inte­grate? Sure, Flickr has a great API, but it would be quite daunt­ing for this cod­ing ama­teur to build the kind of pho­to head­er 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 head­er built using alpha-chan­nel 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 try­ing to fig­ure out how to get a 24-bit PNG to play nice in IE 6 WIN, I decid­ed that I did­n’t real­ly need my logo to over­lap my pho­to 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 want­ed — though, I’d have to deal with the trade-off of hav­ing Flash embed­ded in my site. Hav­ing spent the past 2 years learn­ing about and embrac­ing Web Stan­dards and con­cern for acces­si­bil­i­ty, I’ve avoid­ed using Flash… but, the more I read about SlideShow­Pro, the more I thought that it was the per­fect fit for what I want­ed. It has built-in sup­port for the Flickr API, it’s eas­i­ly cus­tomiz­able to any dimen­sions or col­or palette, and it’s built by a guy that I respect and enjoy read­ing.

I was­n’t able to get the Flickr func­tion­al­i­ty imple­ment­ed yet, (wait­ing on my request for an API key), so I just threw a cou­ple of pho­tos togeth­er for this launch.

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­ful­ly there won’t be many quirks to work out.

7 Responses to “Redesign… version 4”

  • Look­ing good ned. I like the flash head­er; It works real­ly well on your site.

    Oh, and 8 months is noth­in’. I think I’ve been per­pet­u­al­ly work­ing on a redesign of my site since the dawn of time.

  • Looks very nice. I real­ly like the use of SlideShow­Pro. I’m also a bit of trou­ble get­ting to to do what I want with Flickr, but it’s a great tool no doubt.

    Any­hoo. The site looks very nice.

  • good job ned — i was sur­prised you made the may 1.

  • Pret­ty hot man. Pret­ty damn hott.

  • Hey, the new design looks real sharp. I espe­cial­ly like the N logo and head­er bar. Also, the sub­tle gra­di­ent shad­ow thing is real nice and soft…

  • Ooohhh… the post-com­ment page…

    indi­cat­ing that com­ment is queued for mod­er­a­tion, has some rem­nants of the the old style, and may need some tweaking…

    Unre­lat­ed: I too am think­ing of mak­ing the switch to a mac, and would love to hear more on that sub­ject (aside from what you’ve writ­ten). Any drawbacks?

  • Thanks every­one… I real­ize there are a few stray items to deal with… like the “thanks for leav­ing a com­ment” screen. I’ll be sort­ing these out in the com­ing days.

    I think the right col­umn feels a bit crowd­ed. Per­haps I will bump out the site’s width.

    Also, I’m still wait­ing for my API key from Flickr! What’s tak­ing so long?

Comments are currently closed.