I am available for freelance work - HIRE ME

25 Examples of Green and Grassy Websites

posted by Matt Ward on Nov 29, 2009.

One extremely popular trend that I have noticed in website design over the past little while is the use of green and grassy elements. In this post we will be looking at 25 examples from across the web, and discussing the advantages and disadvantages of this particular technique.

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

Anna Pawelczyk

Blogsville 2009

Blogsville 2009

RIPIE

RIPIE

TwittGround

TwittGround

New House Farm

New House Farm

Ten24Media

Ten24Media

Acroex

Acroex

BimbiSicuramente

BimbiSicuramente

Blossom Village Resort

Blossom Village Resort

CampamentoUniversiatrio

CampamentoUniversiatrio

Clark Studios

Clark Studios

Dean Oakley

Dean Oakley

Foot Steps

Foot Steps

GeoVision

GeoVision

Guga

Guga

HearthCore

HearthCore

Jaider Morais

Jaider Morais

Juan Diego Velasco

Juan Diego Velasco

KiddiKicks

KiddiKicks

Mint

Mint

Parcheggio

Parcheggio

Riegos Ariel

Riegos Ariel

Slim Kiwi

Slim Kiwi

SPAFU Online Marketing

SPAFU Online Marketing

Yodaa

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!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Dec 1, 2009

website design New York City says:

Simply mind blowing!!!! Good work!

Dec 1, 2009

John says:

I like them…green is good!

Dec 2, 2009

What Creative says:

Really great inspirational list! – It’s going straight in my Delicious.

Check this one out too http://www.muddyfaces.co.uk

Dec 2, 2009

CC says:

Really nice list! This site comes into mind at once when it comes to green and grassy websites :)

http://idesi9n.com/pathwebsite/

Dec 4, 2009

Dave says:

Yes, grass has been done a Bazillion times before, but it still looks good. Just like rounded corners, it’s the outdated design trend that just keeps working.

Dec 5, 2009

Ivan says:

I would add morphix.si t this list…

Dec 12, 2009

Motti says:

Very Nice Designs!

Jan 5, 2010

Riegos Ariel says:

Hello, I like it,
but the url for Riegos Ariel is not correct
http://www.riegosariel.com.ar

Thanks
Ariel

Jan 5, 2010

Matt Ward says:

Thanks! I updated the link accordingly!

Jul 8, 2010

hermes kelly bag says:

Yes, grass has been done a Bazillion times before, but it still looks good. Just like rounded corners, it’s the outdated design trend that just keeps working.

Leave a Comment

Copyright © Echo Enduring Media 2009-2014