Just as I prepared to launch my new weather block, I got word that the folks over at CNN.com were in the final stages of a redesign. I hate being upstaged!
Now that the dust has settled, its time to take a look at what CNN.com has offered and how we can implement it in local news websites.
Tri-colored nav
Using a different color to highlight specific sections on a site is not a new idea overall but, CNN.com is one of the first news sites to implement this practice.
On first glance, we notice Home, Video and NewsPulse; then we see U.S., World, etc. I don’t think it is any coinsidence that Video and NewsPulse are the two most changed sections on the website. These categories represent two of the features that make up a modern news website successful: non-text content and interactivity/connectivity.
The single-color tabs indicate a steadfastness to the design. That is to say nothing dramatic has been done with the visitors’ usual destinations on the site.
So if you were to redesign tomorrow, how could you implement a 3-color nav?
- Large nav- You’ll need to make your navigation is at least 30px tall (that’s about half an inch), if you try to squeeze in too much gradient in a smaller space your multicolored nav will be hard to read.
- Use similar colors- If you have a super colorful header image you’ll want to pick a bland nav scheme. Stay inside the same color family; but make sure to distinguish the colors. In the example below you can see I’ve used two gradients and a solid color for the main color. There is not quite enough difference between the inactive tab on the left and the one on the right.
- Choose the sections you’re going to highlight with care. You’ll send the wrong idea about your site if you flag your classifieds tab over news or weather. I realize that the GSM may want to highlight your coupon category, but that’s what house ads are for.
Follow me on Twitter