We're currently in the process of launching the new global wrapper for IFILM.com. The project includes a new global header and navigation, a new site background and and frame, and a new site footer.
The new IFILM look and feel
The project was introduced to me like this:
"Welcome to IFILM, glad to have you aboard. We currently have 1,238,023 links in our header and need a way to fit 1,238,024. Next week." Maybe I'm exagerrating. In fact, there were closer to 14 links, two forms, and a home button, and they needed to fit in 4 additional links. The goal, in short, was to add links to an already crowded header and come out of it with a more usable interface. Without going into a complete case study, I'll talk a bit about the project.
The old IFILM look and feel
Header and Nav:
The previous IFILM navigation was only three months old, but certainly seemed more dated than that. The main section navigation was a series of "tabs"... 12 of them, all with 12pt. uppercase HTML text. These tabs had no rollover or active states and were seperated from the page content by a banner ad. Obviously, the tab metaphor here was quite broken, as there was never a time when the tab color was flush with the content color. Not being enamoured with the idea of fixing the tab metaphor, I instead designed three large, tactile buttons with bold white text, representing the three main fnuctions of the site: Browse (channels), Submit, Forums. Using a technique I first discovered at Stu Nichols' CSS Playground, I faked sunken (embossed) text by using CSS to absolutely position shadows with a -1x1 offset. This allowed me to keep the button text HTML instead of using graphics.
Next, I collected all of the "channels" links and grouped them into a dropdown submenu. I opted to use CSS only and keep JavaScript out of the equasion to keep things simple. No delay, no animation, no muss no fuss. We added 4 new channels with this launch, so that original array of 12 buttons would have been 16!
The old IFILM header
Now about those ads floating precariously between the navigation on content... I immediately pushed them above the nav and out of the way, but included them in the large black box that houses the entire header in an effort to appease our advertisers, who may have otherwise felt marginalized.
The previous nav had a "Clip of the Day" and "Instant IFILM" forms battling for attention with the many buttons, diminutive brand logo, and search form. I kicked those right out of the nav and placed links to their respective pages in the drop down. I also moved the search form label into the search field itself and created a button that feels more like an attachment to the field than a seperate entity.
Business concerns necesitated top-level links to our most popular pages: Top 100, and Viral Videos, so those were placed in the nav's top-level hierarchy as well.
The sum of these efforts is a clean, concise page header and nav menu with a total of 5 top-level buttons, one form, and a bold brand logo.
Background:
This was a no-brainer. Although out of scope of the original project, I realized early on that the two biggest problems with the site were the sheer amount of content on each page, and the fact that nothing was holding it all together graphically. Not being able to do anything about the first issue (yet), I set about a quick fix for the second. A single image used as a CSS background in a wrapper div serves to create the illusion of columns on the page. A tiny bit of cleanup was needed to be sure all of the different pages were the correct width. 5 minutes of work begat some big wins in this case.
Footer:
Another no-brainer. So many links and with no defined layout at all. I simple put them into columns and gave them a frame that mimicked the site's new background. Remember that IFILM was launching 4 additional channels, so there were going to be quite a few links in the footer. I removed certain atypical and redundant links such as "jobs", which should be linked to from the "about" or "company" page. Such a difference.