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).

Related posts:

1. Redesign of nemetral.net Today is the launching day for a redesign of nemetral.net!...
2. 15 must-have features for modern design blogs (part 2) In part 1 we saw how modern design blogs usually...
3. Will brown be the next fancy color? It is always a pleasure to detect new trends in...

Frog CMS: http://madebyfrog.com

Markup Factory: http://www.markupfactory.com/

Xero: http://www.xero.com/

Wordpress Shuttle: http://www.brokenkode.com/shuttle/

Squarespace: http://www.squarespace.com/

Firerift: http://www.firerift.com/

Accord5 Trellis Desk: http://accord5.com/trellis/

eManager: http://themeforest.net/item/emanager-10/19140

ActiveCollab: http://www.activecollab.com/

DabbleDB: http://www.dabbledb.com

I hope you enjoyed this series of admin designs.. please feel free to comment and suggest the ones I missed!

Related posts:

1. 10 inspiring admin interfaces Clients pay big bucks for sexy frontend designs but don't...
2. 15 must-have features for modern design blogs (part 2) In part 1 we saw how modern design blogs usually...
3. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...

Content

10. Inspiration CSS gallery

Most design blogs already have a “community links” section in place, but some go beyond and add an inspiration gallery to their blog. This list can be made of a Flickr group (see Bittbox and FuelYourCreativity), a 3rd-party inspiration gallery (see Help-Developer with InspireCSS) or a proper in-site gallery (see KreativeUse). Adding an inspiration gallery is great for it adds some content designers usually fancy and can parse faster than text. See the following examples from Bittbox, FuelYourCreativity, Help-Developer and KreativUse.

11. List posts/Round-ups

The best examples of list post based design blogs certainly include SmashingMagazine and Noupe; other design blogs fancying list posts include OutlawDesignBlog and SixRevisions. Just have a look at their most popular posts and you will see titles such as “100 Wordpress themes“, “53 CSS techniques“, “50 Amazing jQuery examples“, “101 CSS techniques of all time“, “26 free icons sets we love“, “63 must-have grunge fonts“, “25 excellent ajax techniques and examples” or “30 websites to follow if you’re into web development“. List posts usually come with a catchy title and work very well on social sites such as Digg, hence their huge popularity.

12. Contests

Contests are a great way to bring new users with a higher stickiness (because of the prize). Some blogs like to boost their comment statistics with winners designated out of a lucky draw from the post’s commenters; other blogs require some actual work to be done (designing a logo for example). The very fact of giving away a prize is usually reserved to already popular design blogs for obvious financial reasons; some emerging blogs, though, manage to set up contests based on prizes offered by partners. See the following links from a few modern design blogs:

• The <hr/> contest on SmashingMagazine
• Guest post for a MacBook Air on SmashingMagazine
• 1000 free business cards on aComment
• WooThemes giveaway on FuelYourCreativity
• DevSnippets contest on Noupe

13. Tutorials

Modern design blogs are also about explaining stuff, whether it relates to CSS, JavaScript, clever usage of colors or Photoshop wizardry. Here are a few links of tutorial sections from famous design blogs:

• Abduzeedo
• SpoonGraphics
• Noupe
• YouTheDesigner
• SmashingMagazine

14. Interviews

We designers love to know how other designers work and where does their inspiration come from: interviews recently emerged as a popular way for new design blogs to publish interesting content and for already known designers and bloggers to promote their name, blog and/or services. See the following selection of links from popular design blogs:

• FuelYourCreativity
• Abduzeedo

15. Freebies

The web is all about freedom, and we designers enjoy freebies! Giving away quality software or data (could be vector pictures, icons, wordpress themes, wallpapers etc.) is a great way for new designers to show their skills and for design blogs to reach a wider audience. We just can’t resist downloading freebies! Here are a few selection of freebies-oriented blogs:

• Bittbox
• aComment
• DesignReviver
• SpoonGraphics
• The Daily Inspiration (Woork)
• YouTheDesigner
• Abduzeedo
• SmashingMagazine

16. Bonus feature: series posts

Organizing your posts into series is a great idea since it makes users coming back to the blog and perhaps even subscribing to the feed. What’s more, some blogs fancy writing series of series, all on the same topic but at different points in time, which makes it possible for the content to be renewed and explained from a slightly different point of view.

I hope you enjoyed this series of post on 15 must-have features for modern design blogs. Next post will wrap up these 15 good ideas and offer links towards tutorials and tools for you to implement them on your own blog. Stay tuned!

Related posts:

1. 15 must-have features for modern design blogs Design blogs are popping up all around the web these...
2. 15 must-have features for modern design blogs (part 2) In part 1 we saw how modern design blogs usually...
3. Copycat design, Inc. How to define the boundary between inspiration and mere copy?...

Features (cont’d)

6. Most popular posts / Best posts

The difference between the two may be that “most popular” posts are the posts actually read by most visitors whereas “best posts” may be chosen by the blogger himself. Both cases lead to the same result: highlighting high quality posts from the archives and giving visitors an incentive to spend a few more seconds on the blog. On the contrary, having a “latest posts” widget may not be necessary when your blog’s front page already lists the 5 or 10 most recent posts. See the following examples from YouTheDesigner, JustCreativeDesign, AComment and SpoonGraphics.

7. Latest comments

This feature immediately shows the new visitor where the discussion currently is on the blog. And it may not be on the latest posts! On top of that, it gives a first view on how many comments a post may gather (you can have all the 10 latest comments on the same posts if the latter is successful, or the 10 latest comments spread over several posts in case these usually gather less comments). The following examples come from BlogPerfume, DesignReviver and YouTheDesigner.

8. Related posts

Simply in-dis-pen-sa-ble. The “related posts” feature is among the very basics of how to trigger internal navigation and to make your design blog more sticky. It is usually located at the bottom of the posts, just before the comments, along with the social buttons. See the following examples from Bittbox, Vandelay Design and JustCreativeDesign.

9. Post promotion links

Don’t be shy asking for post promotion! These banners usually make it very clear that digging the post is nice and appreciated (with a big heart for example). This promotion div may be located before or after the post (sometimes both). The trend seems to go towards a pre-selection of social news sites rather than an exhaustive list through widgets such as AddThis for example. Most popular social sites in the design blogs niche include Digg, Delicious, DesignFloat, Dzone etc. See the following examples from OutlawDesignBlog, Noupe and WeFunction.

The last 6 ultimate features for modern design blogs will cover the types of content design bloggers must include in their blogs. Stay tuned, for there is more coming!

Related posts:

1. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...
2. 15 must-have features for modern design blogs Design blogs are popping up all around the web these...
3. New design for nemetral.net Three different designs in a couple of months, that's a...

Presentation:

1. Nice design

As usual, design is key here. A nicely dressed design blog gathers a wider audience: the examples of DesignReviver and WebDesignerWall speak for themselves.

2. The “magazine” style: pictures in posts

Design is all about graphic appearance, and a smart way of enhancing the visual appeal of a design blog is to add custom pictures to each post. Here are some screenshots from OutlawDesignBlog, FuelYourCreativity and HelpDeveloper.

3. These BSA ads on the right sidebar

Modern design blogs seem to be making their money out of traditional Adsense CPC goodness embedded within the posts, usually right under the title, and fixed monthly returns from sexy BuySellAds or PerformancingAds units. Some examples include Woork, OutlawDesignBlog, DesignShard and NaldzGraphics.

Features:

4. Several RSS feeds

RSS is key and must come in different flavors: full feed, comments feed, category feed etc. Although most visitors will subscribe to the full feed, offering the choice is a nice feature demanding readers will surely appreciate. Examples include CSSGlobe and DesignMag.

5. Community links

Cheaper than guest posting, and quite attracting for new visitors willing to promote their own posts, community links are a great way of socializing a design blog. Based on a plain WP commenting system, these links will add content to the blog for free! Famous examples include SmashingMagazine and Abduzeedo.

That’s it for now: parts 2 and 3 of this exclusive roundup will be published in the coming week. Stay tuned to discover these other 10 features that make modern design blogs rock!

Related posts:

1. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...
2. 15 must-have features for modern design blogs (part 2) In part 1 we saw how modern design blogs usually...
3. New design for nemetral.net Three different designs in a couple of months, that's a...

JeffCroft.com

OrderedList.com

MattBrett.com

AvalonStar.com (not completely brown, but still a little bit)

Brown is not that usual in web design, but the color has been in use for a few years on a few websites (see DesignMeltdown’s little chapter about brown websites). The point here is that all these 4 websites have recently been redesigned in brown as they were previously dressed with very different color schemes (black, white, pink). Is this the starting point of a new trend?

Do you know other famous blogs who recently switched to a brown-based layout?

Related posts:

1. New design for nemetral.net Three different designs in a couple of months, that's a...
2. 10 inspiring admin interfaces Clients pay big bucks for sexy frontend designs but don't...
3. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...

Hell of a sexy monk: Ekklesia360 CMS
Neat admin interface for this church-specific CMS.

Emperor of design: AIGA CMS
Probably one of the best designed admin interfaces ever: Weightshift embroidered this CSS dress for the custom CMS behing AIGA.org’s last redesign.

Duke of media-oriented CMS: Ellington CMS
Ellington is a Django-based CMS for media sites. Python hackers can benefit from this superb admin interface by using the Django web framework with astonishing auto-admin features.

Ecommerce beautified: Magento
Magento is a porwerful and well designed ecommerce web machine. Kind of a milestone.

Pure numbers: Less Accounting
Lessaccounting is an accounting online software for small businesses.

Take me to the cloud above: Mosso
Mosso is a scalable hosting cloud for web applications coded in whatever language. Easy to use and works pretty well.

Famous blogging tool: Movable Type 4
Stone Age blogging system now revamped and open-sourced with a brand new admin interface.

Harmonious CMS: Symphony
Symphony is a lightweight and flexible web publishing system for your small projects, with a white and pure admin interface.

Hosted goodness: Reflect
Reflect is a hosted website solution aimed at managing websites.

Queen of interfaces: Expression Engine 2
Colourful interface for the second release of popular CMS ExpressionEngine (coming “Summer 2008″). Congratulations to Duoh for the redesign.

Backend designs are hard to find due to restricted access: help us dig out the best hidden jowels out there by leaving a comment!

Related posts:

1. 10 more inspiring admin interfaces A few weeks ago, my post 10 inspiring admin interfaces...
2. New design for nemetral.net Three different designs in a couple of months, that's a...
3. Will brown be the next fancy color? It is always a pleasure to detect new trends in...

Before

After

I have spent some time on the search and 404 page (the “no results found” search page looks alike the 404 page in terms of usability, offering a visible search box and lists of popular and/or recent posts). Of course, the design is XHTML and CSS-proof and although it appears ok under IE 6, I have added the “Save the Developers!” funny widget for IE 6 lovers.

And oh, geez.. there’s also the courage to dare the red. Many a blog is dressed with blue or black-based themes, because a lighter blue is still a blue and a lighter black is a kind of grey. But releasing red-based theme is more risky in terms of colors, for a lighter red is no longer a red: it’s a pink.

I hope you enjoy the redesign!

Related posts:

1. Redesign of nemetral.net Today is the launching day for a redesign of nemetral.net!...
2. Google’s unbreakable design This post is a down-to-earth trackback to the Official Google’s...
3. 15 must-have features for modern design blogs (part 2) In part 1 we saw how modern design blogs usually...

Before

Here is what nemetral.net used to look like:

After

Now here is what nemetral.net looks like:

Along with the redesign I’ve upgraded Wordpress to version 2.5.1, changed the favicon to match the one of my portfolio and added email subscription. I still have some hesitations on the #333 background and I may change it for a lighter one (maybe stripped). The advertising system has changed too: advertisers can now display 125×125 ads on the sidebar (see rates on the advertising page).

I hope you all enjoy the redesign! Now let’s focus on writing quality content

Related posts:

1. New design for nemetral.net Three different designs in a couple of months, that's a...
2. The pursuit of APIness (part 5) XML-RPC is damn easy to use and many projects still...
3. Google’s unbreakable design This post is a down-to-earth trackback to the Official Google’s...

Case 1: Inspiration

Let’s take an example. Today in my RSS aggregator I fell upon this website. First thing I thought was “Hell dude, that’s pretty much the kind of design you find on Nick La’s Web Designer Wall!”.

Have a look at the screenshots below:

Here we are rather in a case of inspiration: as you can see, Michael Coyle’s website can be compared to Webdesignerwall when it comes to floral backgrounds, color tones and big bold font. The structure of these two websites, however, is different: Michael’s website is a typical freelancer website with a large header, a portfolio on the right and a horizontal design whereas Webdesignerwall keeps the traditional vertical structure of a blog starring the famous sidebar on the right and much scrolling hidden under the visible part.

Case 2: Copycat

Now let’s have a look at (yet another) blatant copycat of Khoi Vinh’s Subtraction. Have a look at the two screenshots below (first one is the original, second one is the copycat):

As you can see here, not only the general feeling of the website is repeated (black&white design, big picture on the header, orange menu links etc.) but also the whole structure:

Conclusion

Distinguishing between inspiration and copycat is essential in our designers’ jobs. I believe that structure is one thing and painting is another one: as long as the structure is different, the painting can be the same (that’s inspiration). But if both structure and painting match, then one is falling into the easy trap of copycat.

Related posts:

1. 15 must-have features for modern design blogs Design blogs are popping up all around the web these...
2. 15 must-have features for modern design blogs (part 3) Last week we saw how modern design blogs usually manage...
3. New design for nemetral.net Three different designs in a couple of months, that's a...