As we observe the trend in web design we will notice that the website designs are moving from those heavy graphics to light, vibrant colour designs. Many of such designs are inspired by Mother Nature. Nature inspired designs are extremely calm and install freshness to the website. In this blog post I will try to point to few of such beautiful designs spread across the web. These designs also remind us of the need to connect to nature. We humans have already destroyed a great deal of nature. Each passing day we are realizing just that. Designs based on nature are very inspirational have a look yourself.

1. 4DESIGN :

This is one of the best design out there. No wonder it is on the top of the list. Just look at the design it is so refreshing and inspiring. When was the last time we something as beautiful and fresh as this. In this design you will notice wild flowers, a king fisher near it’s nest and a hot air balloon. The navigation is on a wooden like strip. Great Design!

2. N-DESIGN STUDIO :

NDesign-Studio has one of the best looking theme for wordpress. This custom made theme has a peacock, mountains, rainbow and roses. This design is drawn using Adobe Illustrator. NDesign has won many awards and recognition for it’s design. The point to note here is even the best designers are inspired by nature.

3. VOS RESSOURCES :

This design focuses on the wild side of the nature. The design consists of a beautiful leaf and the header sports a waterfall. This design also has bamboo’s at the right top. Even the favicon used in the site has the leave which also acts as the logo for the site, background colour is a pale olive leave colour. This layout is calm but not as vibrant as 4DESIGN.

4. ARBUSTS PHOTOGRAPHY :

This web design is for a website that does photography on wedding occasion. In this design the designer has show bride and groom enjoying lonely time with nature. Design shows a large lake, ice capped mountain and a tree which is showering leaves over the bride. All these are spread on a grassy plain. Designer has tried to merge the love between two person along side nature. A job well done.

5. BELFLORA :

This website is completely dedicated to nature. The complete first fold of browser ( The view area of browser which we can see without scrolling ) is covered by nature. Lots of grass, flowers and a cute butterly make this web design as close to nature as possible. The website is in russian.

6. HYPJO :

This design shows the nature at night. Be it day or night nature looks beautiful anytime. This layout shows a tree with birds returning to there nest after days work, half moon and stars. This design has a very unique navigation , instead of the usual buttons the navigation are person at work, roll over the icons to see the effect. Impressive! The layout is one of the most simplest layout of all we saw till now.

7. STUDIO 7 DESIGN :

This is another vibrant colour design. This design sports a country side scenery with some fresh vegetables. For information arbust photography website is done by Studio7Design. The logo shows a mountain and sun setting at background. This design is as fresh as it can get.

8. OPEN SOURCE TEMPLATES :

This website offers free templates, again this website template is done by Studio7Design. The header shows sunrising from mountains some clouds and birds flying around. Layout scales 100% to the browser and is mostly gray. Pretty simple layout.

9. CSS ZEN GARDEN :

The most simple of all design, a very light coloured layout which shows violet colour lotus. This layout also has a tree with lots of flower. Pretty calm layout and very easy on eyes.

10. KULTURBANAUSE :

This is the layout where nature is shown in it’s mystical form. It shows dried tree and the landscape is spread with fog. Looks a bit scary, if we scroll down we find the layout has a waterfall which falls down. Layout is mostly violet coloured with mountain in the background. A more of fantasy land layout.

In this compilation we saw nature under various moods. This also shows some of the best looking layouts are inspired by nature. The main reason why nature based layouts look so connecting is because we all can associate ourself with nature. Just a tip, if you are planning to enter any contest for making templates or design try do it on nature as your chances of winning is much higher than others.

Step 1: Fire up photoshop and start a new document of size 680×700. Select the background color as #525252.

Step 2: Create a new layer and Select the Rectangular Marquee tool and draw a rectangle and fill it with #2C2C2C. Here is the preview.

Create a new layer and draw another similiar rectangle and fill it with #5B5B5B. Make the width of this rectangle smaller than the previous one.

Step 3: Now select the previous rectangle i.e the layer that contains the first rectangle that we drew. Now go to Filter>Blur> Gaussian Blur and select the Radius as 8 pixels. This is what you get.

Here you can see our background is ready. Next we will add a header.

Step 4: Create another new layer select the rectangle marquee tool and fill it with the gradient. You should get this

Let us add some banner logo and text there. Now this part depends on individuals creativity.

What I have done here is created some layers and drew some basic shapes like circle etc and filled it with black + back ground colour gradient.

Step 5: Now that our header is ready let’s make the menu. Create a new layer and draw a rectange and fill it with the gradient as showing in the screenshot.

Rather than the usual menu i.e with bullets I have tried to add it with text itself like this Homepage >> About Us >> Portfolio >> Tutorials >> Wallpapers >> Affiliates the font that I have used is simple Arial Black. You can select any font depending on the font the layout’s appeal may change. Here is what I got

Step 6: Now out header and menu is done. Now we need to make a place where we can put out body. Create a new layer and select the rounded rectangle shape and draw it below the menu. This is what I got. This is also an important step. You can make the layout darker or lighter. This is what I did.

That is is we are done. Our layout is done. I would like to keep it simple. You can add some more boxes in the content area. I Hope you found this tutorial useful.