4Trend alert: isometric banners
This article was written by nemetral.
Voices matter! Please feel free to share your opinion, ask for more explanations or point out divergences using comments.
No time to read this now? Bookmark it and come back later..
Note: this post is a “trend alert” i.e. a quick roundup of something new emerging in webdesign.
Isometric banners is the best way I have found so far to describe this new trend I’ve observed in web design for the past months. More and more websites seem to wear these modern bass relief decorations, usually to make important points stand out from the rest of the design by climbing “above”. Here is a collection of 8 examples of such isometric banners in action.
Canonical example: yoast.com
On this example we can clearly see how two levels of isometric banners stand out from the rest of the design.
1. Design Mag
The effect can be seen in the header of Design Mag.
2. ZinePress (Wordpress theme)
On ZinePress, isometric banners are embedded along the sidebar.
3. Imprezz (Wordpress theme)
Imprezz also embeds isometric banners in the sidebar (actually the middle bar given the design).
4. Vintage (Wordpress theme)
Vintage uses a shadowed version of the stand-out banner.
5. Blues (Wordpress theme)
Blues proposes a rounded variant of the classic square isometric banner.
6. Webdesign News
Webdesign News displays two such banners: one in the header and one in the footer.
7. Kupferwerk
Kupferwerk illustrates a slick version of the shadowed isometric banner.
8. Cats Who Code
Last but not least, Cats Who Code designed an unicoler isometric banner on the sidebar.
Please do let me know other examples you know by referring to them in the comments.
Updates:
9. From The Couch
From The Couch has original irregular isometric banners.
10. Sarah Longnecker
Sarah Longnecker has two isometric banners.
11. Build Conference
Header and footer are isometric on Build Conference (very clean design too).
Did you enjoy this post? Consider subscribing to the RSS feed!
May 16th, 2009
8:43 pm
Very cool, but how is it done?
May 16th, 2009
9:37 pm
@Alex: I guess it’s technically very simple to do. It only requires drawing ability (to draw the bass relief line) and a gradient for the shadow. Photoshop has already had far more difficult to do!
May 17th, 2009
7:18 pm
I very much dislike this design accent. But Kupferwerk is very original. I might even have to “borrow” it for myself
June 17th, 2009
1:37 pm
A great example of something simple yet very effective. Adding a “fake” 3-d effect to the banners looks surprisingly good. This is one trend I don’t really mind.