25 Examples of Green and Grassy Websites

Those of you who may have read my 25 Dark Websites and 25 Creative Footers posts may be noticing a pattern developing here. I’ve decided to do my best to stick with the whole 25 theme for these roundup articles. It’s just a nice, round manageable number, but still enough to prove valuable. I have a wide range of different ideas for these roundups, too, so be on the look out for more coming your way.

I’ve also been doing some thinking about roundups in general. I’ve seen several different posts just this past week that are complaining about how the authors’ RSS readers are getting crammed with all kinds of roundup posts – so much so that it’s getting difficult to find other, valuable content.

I guess I hadn’t really thought of that before. Most of the stuff in my reader is actually tutorial and/or freebie oriented. I see most of the roundups I visit via Twitter. Still, I certainly don’t want to be viewed as clutter, so I’m going to do my best to add extra value to these roundups with a bit of extra editorializing!

Anyhow, today I want to look at a trend that I’ve been noticing in my frequent visits to various CSS galleries. It seems that on almost every page of these galleries I see sites that are designed around green and grassy imagery. Obviously, such sites don’t actually appear on every page, but there certainly are a lot of them! They tend fall into one of two categories. Either they use a ground level view of grass as a sort of horizontal divider or feature lush rolling hills – usually vectorized and cartoony.

Here are 25 different examples of this trend.

Anna Pawelczyk

Blogsville 2009

RIPIE

TwittGround

New House Farm

Ten24Media

Acroex

BimbiSicuramente

Blossom Village Resort

CampamentoUniversiatrio

Clark Studios

Dean Oakley

Foot Steps

GeoVision

Guga

HearthCore

Jaider Morais

Juan Diego Velasco

KiddiKicks

Mint

Parcheggio

Riegos Ariel

Slim Kiwi

SPAFU Online Marketing

Yodaa

These sites come in varying degrees of effectiveness, and I am in no way trying to suggest that these are great or sensational designs (though I did weed out some of the weaker designs – pun intended). I am also not saying that they any of them are poor. This is simply a showcase. However, this collection certainly demonstrates that there is a very strong trend towards using these this kind of imagery in web design. And there are many different types of sites represented, suggesting that it is not just one particular group or industry that’s latching on to this trend.

You make also notice that these elements all tend to work pretty much the same way. The grass stretches horizontally across the screen, creating a clear and logical divider. Most of the sites listed here actually take advantage of this, using the natural break as a means of organizing their content in some form or other. It’s an interesting technique that many of these sites actually implement quite well.

Now, before you get too inspired and run off to throw a grassy divider into your next website design, let’s take a moment to think about some of the advantages and disadvantages of using this kind of imagery.

Advantages

• Position yourself as Green – The entire concept of the environment and climate change is a huge deal these days. Many people are thinking and talking about it, and this use of nice, green grass very naturally posits your site as being “green”.
• Natural Divider – We’ve already touched on the fact that that this design technique provides you with a very obvious horizontal break, which you can use to organize your content
• Open and Friendly – Grass can suggest friendliness and openness – a sort of neighborly camaraderie – and could be a useful visual element if this is the kind of image you want associated with your site or brand.

Disadvantages

• Position yourself as Green – Wait, didn’t we just mention this as an advantage? We did indeed, and while it can be beneficial, it can also work against you. Many environmentally conscious people are also very aware of what companies are doing, or not doing, and can have very strong backlash against those who try to make themselves look “green” without taking any actual steps or initiatives to helping the environment or slowing climate change. Beware of the backlash that can come from this kind of “greenwashing”, even if it’s unintentional.
• A Tired Concept? – This post alone collects 25 grassy sites, and I had several most listed when I was doing my research. I’m sure there are more than that, too. So, I think it’s pretty safe to say that this kind of imagery is pretty common out there on the web these days. As such, unless it is a perfect fit for your site, you may want to think twice about following this particular trend.
• Wrong Visual Cue? – Another possible disadvantage with this trend could be the strong associations that grass can convey. Will visitors immediately assume that the site has something to do with grass itself – perhaps a seed or fertilizer company? As designers, we always (or at least almost always) want viewers to look at something and get it right away, not have to puzzle it out on their own. If using grass (or any other design element) will obscure meaning rather than reveal it, then it’s probably not the right choice

Obviously, this is just a really cursory look at the trend of using green and grassy designs on the web, but I hope that it has been at least somewhat insightful and/or inspiring for you.

I’d love to hear you opinions! Have you ever used grass as a design element? Are there any other sites that you would like to add to this list? Are there any other advantages or disadvantages that strike you? We’d love to hear them, so feel free to drop a comment!

Posted by Matt Ward | permalink | 18 Responses »

Metaformation

Categories: Inspiration, Websites

Tags: grass, Inspiration, trend, Websites

18 Responses »

Posted: 10:25 PM on Nov 29, 2009