Not a member? Why not join us or log in? (No more hassle filling in comments, less obtrusive ads and asides.)

Living the highlight - Banners

Posted by Andrew Faulkner on January 11th, 2006.

Andrew Faulkner is the admin at fadtastic. Andrew prides himself on standards-based, accessible web design in the city of Nottingham, UK. He believes in aesthetically pleasing accessible design and that 'standards compliant does not equal boring.'

http://fadtastic.net/

Andrew Faulkner has posted 208 articles.

RSS Feed for fadtastic.net RSS Feed for Andrew Faulkner

Full Profile →

Something short and sweet:

Noticed some of the basic ‘banners’ on sites these days? Simple solid colour backgrounds on banners are slowly being replaced by a very slight gradient - a highlight at the top of the banner.

Examples:

Pixelpanic
CSS Beauty
Q-design
Capture
Ordered List

Why is this ‘in’? That’s something I cannot answer.

What i can answer is what does it add to the design?. The highlight at the top makes anything (navigation especially) at the bottom of the banner appear more vivid. If you take a look at these designs, they all use some form of ‘tabbed navigation.’ Without the highlighted banner these navigation schemes could appear a little ‘flat.’

So, beloved reader, do you like them or dislike them? And what else do you think this highlight adds to a design? And 10 points for each new example spotted.

( 8 so far )

Comments RSS Feed

I think it adds more depth to an otherwise boring area. It leads your eye into the website.

I think they are brilliant. If its done subtly it is effective but where designers go wrong is when they create strong gradients. These become garish and too bold.

Do I get 10 points if I post this:
http://www.gawds.org/

Matt

Matt Davies
January 11th, 2006
#

I agree with Matt, it looks great if it’s done right.

Here’s another example:
http://www.wishlistr.se/

Jimmy
January 11th, 2006
#

I’ve actually been noticing a rise in subtle gradients in general, and not just for banners. And I must say I’m a fan. For example check out the beautiful www.joyent.com which not only uses subtle gradients all over the place, but was mysteriously unmentioned in the previous “the return of cream” article :)

I’ve also seen it in pages that have that new Mozilla flavor of a corporate look, like www.digg.com.

Steve Cochrane
January 11th, 2006
#

I agree with Matt, it adds some sort of depth to boring areas. Flat colors don’t really make you want to look closer, while gradients trick the eyes into thinking something else lies further down the page.

if you dont get what I mean, look at it this way. A gradient is a blend of two colors, really actually one color fading into another. The human eye is automatically attracted to the first color, which slowly makes the eye want to follow the path towards the second color. The trick is effectively placing the right content at the end of the gradient, so the whole thing isn’t a waste.

other than that, they just plain look nice

Zeerus
January 11th, 2006
#

Gradients do work extremely well with the tabbed navigation.

We use this technique on http://www.soul-scape.com

Ben
January 11th, 2006
#

Those are great comments! I’ve always liked flat colours and flat designs without shadows or texture. I still do. I usually thought gradients were mostly irrelevant and added to bandwidth. But you’ve changed my opinion. After thinking about it, I reckon those sites would not look as good or work so well without gradients. Excellent topic!

Peter
January 12th, 2006
#

This is a great site! Just found it. Personally I like the subtle gradients as a way to add dimension in an otherwise flat medium. It seems to me that from showing designs to the lay person (non-designer) that they will tend to like banners graced with subtle gradients more than a flat solid color banner. That’s an absolutely non-scientific statement there, no research to back it up other than my own impressions.

Do I get 20 points if I point out that this very site uses a gradient in the banner area? Of course my comment comes about 10 months after the original posting date!

Mark
October 25th, 2006
#

Mark,

No points there! We didn;t have a gradient when this was written. Oh the irony.

Welcome to fad.

Andrew Faulkner
October 25th, 2006
#

↑ Jump up to the comment form

The above post has obviously kept you amused. Why not discover similar material:

The posts Something stripes me as odd…, Cutting it out, BBC NEWS | Magazine | My brand new life, Diagonal Lines Still Keep Going, Break Out the Earth Tones, are related to this post.

Or why not take time out to find out about the author of the post.