Guidelines for Eco Themed Web Design

I’ve been watching and following design trends for a little over a decade now, and one massive trend I’ve seen snowball from a buzz-word to a full-grown beast, is going “green”.

With $4 per gallon being considered a steal at the pump, more people are trading in their concrete slinging S.U.V.’s for more economically-sized smart cars or hybrids. And figuring out ways to reduce a company’s carbon footprint has turned in to a full time occupation.

So what does any of this have to do with the design world?
Simple. Being able to tell a customer that you’re a “green” organization gives you a leg up over the competition. Everyone loves going to sleep at night thinking Ferngully is still a lush and thriving forest. In some industries you might as well be out of business if you’re not LEED (Land Environment Economics and Development) compliant.

I can recall a meeting I had with two different furniture manufacturers who were looking to have work on their website. One was on top of the green game and wanted to slather their LEED certification and boast about their green operation as much as possible. The latter, who at that point not as successful, had heard about being green but wasn’t quite sure what that meant.

I’ve done a fair share of business with LEED certified businesses and organizations, and encourage other non-certified clients to at the very least mention their green practices. There are several ways to do this and they can range from being simple to being quite elaborate.

Let’s use Century Furniture Century Furniture as an example. They have a clean, mostly white and off-white color site, which allows them to drop three logos into their footer.

As you can see, the slight bit of color in the logos pulls your eye towards them. This is a simple task that should only take the web developer a matter of minutes to do, assuming the footer was set up as a single stand-alone file and then dynamically dropped into the bottom of each page. It’s a perfect solution if the site is already created and the company chooses to promote their environmentally sound business practices.

Eco Arc is another website using the logo design method to inform clients of their environmental awareness. Note the prominent display of their “Queen’s Award for Sustainable Development” at the top of the page, centered within their header. It’s clearly an achievement they’re proud of and want every visitor to their site to notice it and be impressed.

They also utilize the footer of their web site to promote the environmentally-friendly associations that they belong to.

Another good practice when promoting a company’s environmental sustainability practices is to inform customers and clients of just what your practices are. This can be done in a page of its own, included in the company description, or summarized on the home page with a link encouraging readers to follow in order to read all about their environmental efforts.

I would recommend summarizing your efforts on the home page by briefly stating some of the key practices exercised, and then encouraging the visitor to follow a link to find out more information as they choose. The last thing you want to do is scare off a new visitor with epic displays of text. It’s better to give bullet points and inform the viewer there’s more information available.

Chris King offers an example of a clean, simple, sustainability page that informs their prospective customers of the extra effort they take to reduce their impact on nature. Note the simple image on the left of what their final waste product looks like and text that’s free from acronyms or environmental organizations you’ve never heard of. Just clean and simple.

RFM Seating is another great example. One of the links in their main navigation bar is “Environment.” When you hover over it you’re given a drop down menu and have the option of reading about “Sustainable Practices,” “MAS Green,” and “LEED Points.” The only advice I might offer on this site would be to have those links open new pages within the site, rather than PDF files. This would help with their SEO and boost the likelihood of them showing up in a search by someone interested in chairs from an environmentally-friendly company.

When you already have a site that’s created, live, and fully functioning, it’s easy to drop in some logos about your green business practices, add some text to your homepage, or link to a new section about your sustainability practices. But what if you’re given a fresh slate? What if your client wants to totally redesign their image with a newer, fresher, “more green” look?

Colors are the main ingredient. Think of a color scheme that will make the viewer feel refreshed, or like they’re outside. Green is a pretty obvious choice, symbolizing vegetation, leaves, grass, and nature. Some other colors to consider are what makes the green so green: blue sky/water, and sunshine. So do consider adding in a vibrant blue and maybe an orange-ish yellow as well. If the client wants a site with a darker tone, consider going with an earthy brown color. You’ll notice these colors are present in each of the example used previously.

Hewlett Packard was voted as the 2nd Greenest Company by Newsweek magazine in 2010. But if you visit their website you will see a severe lack of associations, third party logos, and blurbs on the home page boasting about their sustainability practices. Instead you get a very clean, very simple site with a palette of green, blue, yellow and brown chosen as the accent colors for the site. It’s a design and color palette that doesn’t outwardly boast that they’re environmentally friendly, they just create a personality that instills their sustainability efforts in to the viewer with relaxing, earth-friendly colors.

Another option to consider is to use landscape shots with rolling hills, free from buildings, roads, and any human interruption. That is exactly what Arm Energy Solutions did. Their logo is a combination of all sorts of sustainable energy practices and they utilize the rest of their header to take you out in to a peaceful nature setting with rolling grassy hills and a blue sky full of fluffy clouds. Notice that the main colors they chose for the site as well as their use of logos to partnering green organizations they’re affiliated with.

Feel free to push the standards of the industry and create a website for your client that will stick out far beyond its competitors’. Be creative and think outside of the box, like Disgen. They utilize the industry standard in colors, but added a background image of a topographical map to get the viewers of their site to start subconsciously thinking about the environment.

Sometimes the best way to push the standard for design aesthetics within an industry is to go outside that industry for inspiration. Below are a few samples of nature-oriented websites that will help you get some creative juices flowing.

We’ll start with a few websites for a mountain bike video series from The Collective:

Their film “Roam” utilizes the same topographical map background image as we seen earlier from Disgen.

Their “Seasons” film even lets you choose a background image depending on which season you prefer, spring, summer, autumn, or winter.

The CCC Celt website randomly loads a peaceful setting, full-size background image of rolling grassy hills meeting a sandy beach coastline. It may not be the first thing I think of when I think about a library, but it definitely helps put me in to a tranquil state while viewing the site.

Rainbow Cleaners uses a gorgeous montage image of just about every peaceful outdoor scenario you can think of: rainbows, butterflies, grassy hills, trees, flowers, blue sky, fluffy clouds, mother and daughter playing. As if that wasn’t enough, they also use the bullet point method I mentioned earlier to quickly inform the viewer of their “Earth Friendly” benefits.

Then there are the creative animated-style sites like Jiri Tvrdek’s portfolio site. Animated fluffy clouds and blue sky decorate the background behind the green and earthy brown tree that contains sun-shaped, and colored, figures that act as the links to navigate through his site. Meanwhile, an incognito “100% recycled design” decorates the trees foliage and his portfolio is displayed down the bark. Quite clever.

There are no definitive guidelines when it comes to green web design. In any case, the more methods used the better. I think it’s safe to say that no negatives can be taken from a company who takes pleasure in informing their customers and clients of their sustainability efforts.

It’s your job as the designer to determine what looks best, and what design best represents the company’s philosophy and attitude, then put that into an online, digital medium.
Good luck!