Apr 12 2011

Web Designs that Incorporate the Four Natural Elements

Advertisement

Today, the market consists of countless synthetic materials that showcase the talent and hard research of man. However, at the core of these products are four elements that have existed since time can remember: earth, air, fire and water. The elements have long been thought of as the essential materials to sustain the human race.
[fblike]
However, in the modern age, these elements are starting to be an aesthetic source for man-made projects, such as exterior architecture, interior design and packaging. Now they have made their footprint on design in the technological age, serving as the inspiration and subject for countless web designers. Here, we show you a good number of examples of some of the best element-incorporating Web designs that are sure to blow you away.

Earth

Organic Grid
Organic Grid uses the element in a more abstract way, using the tones we typically associate with it. Rustic oranges and reds, marigold yellows and olive greens used on this site exemplify the colors found on the Earth and in its plant life.

Showcase

Watermelon Industries
Watermelons grow at the source: the dirt. Then they grow, ripen and feed communities. Thus, it makes sense that a site that aims to serve communities use the earth and its bounty as inspiration for their design.

Showcase

InfinVision
InfinVision exhibits a completely modern take on earth, with vectors serving as the trunk, limbs, buds and blossoms of a tree. This tech tree sits atop a spherical shape that represents land. Scrolling own to the footer, we get a black area that invokes an earthen existence, as flowers, grass and pebbles rest upon its surface.

Showcase

Rocket Club
Rocket Club’s rich tones highlight the textured sky that makes up most of the background image. These moss and turquoise tones float in and out of each other, and serve as an almost neutral background for the stark clouds. Around and on the background are simple text areas shaded in black, which keep the emphasis on the background while providing information.

Showcase

Chuan Production Film Studio
Chuan Production’s site features the beauty of dilapidated architectural buildings set upon arid land. With its abysmal black background, Chuan’s subject feels as if it is the past parapet in a deep, foreboding world. Adding to this feeling is the slight lighting effect that highlights the building and the rotating nagivation.

Showcase

Gladeye
Stars float atop a stationary mountain scape in this mostly gray scale design. Popping off the abysmal blacks and shadowy grays are stark whites and muted earthen tones from the mountain.

Showcase

Tapada Nacional de Mafra
Tapada Nacional de Mafra’s design doesn’t feature a land or a building once forgotten, but it does consist of a snapshot of rural life in the midst of contemporary architecture. With this photo, Tapada shows that ancient rituals and habits are ever-present in the modern age. Tapada keeps with the earthen them by using paper textures and brown tones.

Showcase

Prism Girl
In this majestic world, a large tree builds its roots in a modern cityscape. Users can flow up and down the tree, experiencing her floral abundance, leafy green moss and her existence among the clouds. With the tree’s roots firmly embedded in the cityscape’s land, Prism Girl reminds users of an unarguable truism: No matter what man-made architecture demands precious ground, the ground will always take it back.

Showcase

Vitamin G Studios
Immediately settling on this site, our eyes set their sights on a fly. This fly sits perched on top of a twig, with the branch and its mossy green leaves out of focus on the background. Here, for the fly and the design, Earth serves an important, ever-present function of foundation.

Showcase

Cure
Green, brown and beige tones give this site its earthy appeal. Driving this inspiration home are the paper textures used throughout the site’s design.

Showcase

2LK Design
Large number and letter blocks are placed in a pastoral scene, giving us the combination of old and new, of man-made and natural, of tradition and new age. We see the modern white tones echoed in the logo along the left side.

Showcase

Viola’
Voila’ uses a gorgeous flat landscape to serve as the basis for its focal point. However, the strength of melon-toned oranges, fuchsias and yellows, along with the deserted land, lend to a mix of fantasy and post-apocalyptic vibes.

Showcase

Air

Reduce Tu Huella
Reduce Tu Huella emphasizes its air influence by blackening out the surrounding landscape. This allows us to  focus on the layered clouds, the only colored items beside the cloud logo, in the background.  Next, the black pieces along the horizon and in the sky stand out, giving us the subject of the site. We’ll then flow (pun intended) down to the content area. With such structure, Reduce Tu Huella tells us what is of utmost concern: using our air in an efficient, but respectful, way.

Showcase

Yipori
At Yipori, no one can experience sadness. That’s because on this floating world in the sky, the dwellers are exuberant, the land is always clean and flourishing and the skies are always peaceful. Soaking you deeper into this world is are the floating semi-transparent clouds that stay crisp and ever-present.

Showcase

Rafael Vergani
Rafarl Vergani’s site showcases all the typical- yet beautiful- evidence of an air-inspired site: clouded background, soft blues and whites, semi-transparent additions and some sort of air-related focus.

Showcase

Who Is Leon
Who Is Leon gives a beautiful air-inspired design that appears hand-drawn. It lends to the idea of a sketch artist who captures optimism and limitless thought in nature. Adhering to this vibe is the statement, “me + you = amazing results.” Keeping this bubbliness and confidence at bay are the soft modern tones and a simple structure that speaks to subtle professionalism.

Showcase

Firefox Tweet Machine
Firefox Tweet Machine is just that: A machine that delivers tweets. These tweet updates are delivered via bubbles that emerge out of the top of the machine. These bubbles then spring up to the top of the page, where they bounce and linger before floating out of sight.

Showcase

Novembro
Novembro features a large sky-traversing apparatus floating across a sky that looks withered and tattered with rough treatment. While the scene seems to speak of foreboding danger, it serves to remind us that we’re only one piece of a very, very large design- evolutionary or created. No-nonsense sans-serif fonts and black tones lend to the seriousness already seen in the atmosphere.

Showcase

Altimea
Altimea’s gorgeous design is without a doubt influenced by this element, with airy blue and gray tones, a wisp-thin font on the links and a beautiful winged creature. The rich black bar on the bottom and the silver box anchor this airiness, creating a grounded design that reaches to the sky. This grounding effect is also used in the logo’s thicker font and the black bar on top.

Showcase

Stephen Caver
Stephen Caver’s design operates much like Rocket Club’s. Heavy black tone present in the text provides easy legibility while allowing the sky’s tones to bounce off its neutrality.

Showcase

Studio Kerozen
Studio Kerozen doesn’t utilize typical air elements. Rather, we see deep grays and blacks in a modern, structured design. However, Studio Kerozen’s index features smoke flowing through the blackness, highlighted in rick fuchsias, electric oranges and tinges of white. The smoke continues to ebb, flow and fall upon itself. With this, we get the subject that we can see, the smoke, and a reminder of the element we cannot see here: air.

Showcase

Shining Karma
Studio Karma’s site features a sleek palette, with liquid rotation of information for easy userability. The ever-growing blast of smoke on the left hand side serves as the invocation of ‘air.’ However, Shining Karma can also be thought of as invoking fire, as this smoke results from an unseen explosion.

Showcase

Fire

Hind Site Inc.
Lava shoots and flows from the intimidating volcano on Hind Site Inc.’s site. The red-hued sky and billowy clouds of the image are. These elements are mirrored throughout the site in orange toned links, text areas and CSS.

Showcase

Creative Fire
Creative Fire uses their own logo as a background for a fire reference. Mimicking the influence is the strong red bar along the bottom of the design and the strong red header in the right content area. Cooling off this heat is the soft, semi-transparent box and cool gray-toned content.

Showcase

Solace Beeswax Candles
Candles are a strong, readily-available source of the element of fire; thus, why should the site of a candle-selling company be any different? Lit candles sit in the forefront of a rich landscape toned in rich auburns, maroons, pumpkins, red-violets and melons. This landscape serves as a source of comfort for the viewer, with a bumbling brook, blossomed flowers and a clear view of a sunset. It’s understandable why Solace chose such imagery, as candles serve the same purpose as this landscape: warm and comforting.

Showcase

TuiSpace
Let’s take a step outside the Earth for a moment. There is no air or no earth (Well there is an Earth, but not the lower-case kind.) However, because stars and quasars perform the same light-emitting function, they can be considered the fire of space. Tui takes this association and runs with it, with a large galaxy and surrounding stars, quasars and pulsars serving as the backdrop to the site’s content. You can change the theme; other looks include landscapes, a giraffe and a cloudy sky- all examples of the other elements.

Showcase

InWare Powered Artillery
At InWare Powered Artillery, we get electric blues, purples, oranges and reds that flash as lightening across the focal point. Repeating these tones are the three glistening content areas below the focus. Enhancing the vibrancy of this palette is the black backdrop.

Showcase

DS Design
DS Design may not be completed yet, but their ‘coming soon’ page speaks volumes to the design standard the site holds. On a ravished, barren, fire-ridden landscape sits a crisp, sleek robot. However, this robot isn’t all too different from its surroundings, with electric pulsating from its core. It’s not known whether the landscape was caused by the large-scale robot, or whether the juggernaut was sent to save the land. What is known, however, is that the image showcases raw, fire-inspired talent.

Showcase

BBQ War
The site invokes fire via the orange and charred gray tones and the lightening bolt in the main image. This invocation is perfect for a Bar-B-Q site and perfect for any site referencing stiff, ‘war-like’ competition.

Showcase

Water

26000 Vodka
26000 Vodka invokes this element with enlarged water molecules. These molecules rotate around the links for a design that you can sink into.

Showcase

Brad Colbow
It’s hard not to see the influence water has on Brad Colbow’s portfolio site. In fact, nearly all of the website is under water, with the exception of the logo, links and design details at the top of the page.

Showcase

Gazelle Touch
Gazelle Touch soaks its site in varying blue hues for the ultimate water-inspired layout. Underneath the blue-toned city lies a calm body of water with slight reflection. Upon clicking one of the semi-transparent links floating at the top of the page, we softly sink to below the water surface to indulge in the content.

Showcase

Groovy Web Design
Water isn’t just known for its ability to calm. It’s also known as a deep abyss housing the known and unknown, a foreboding world all its own that houses creatures both fascinating and dangerous. Groovy Web Design invokes these aspects of water, adding the vibe of an action-packed movie with fun tilted sub-headers, vibrant tones and animalistic drama in action.

Showcase

Pusulaweb
Pusulaweb also provides us with the multiple angles of water, with underwater, surface and shore views. Adding to this is the play on light, as it comes down from the sky, dances along the trees and water surface, and shines down into the deep sea where the content appears. And once users automatically float down to read, they subtly ‘bob,’ just as one would do if floating in water.

Showcase

Tim Bjorn
The simple palette of Tim Bjorn’s portfolio is counterbalanced by the strong graphical detail in the water scene. Here, a small whale swims in a sea of circles, with countless water-drop shapes spewing out of his top.

Showcase

Waterlife
Waterlife is the ultimate water-inspired site, with the background consistently moving to show light shooting into the sea. Beautiful development adds to the professionalism and dark hues contrasted with bright blues and bold whites keeps with the theme.

Showcase

Piipe
Piipe uses a variety of detail to add to its layered feel, such a drop-shadows, large pixels with countless hues and transparency. Also adding to the layers is the play on perspective, with multiple waves sitting at a variety of distances and a far-away sun peering over the horizon. The detail on the mischievous-yet-lovable-looking fish is nothing to scoff at either.

Showcase

Combinations of the Elements

Oh Zan
Oh Zan features a vibrantly colored landscape, which you can float across to reach your desired link. Within this land, we get a combination of elements: the earth on which the enchanted land sits, implied water underneath a sheath of fog, the put-put of smoke flowing out of a distant building and a boiling sun in the background. Keeping these hues calm is the neutral gray-green background. (The background’s visibility depends on resolution.)

Showcase

Toucouleur
Toucouleur stuffs all four elements in its top image, with lava flowing on the barren earth, around the snow-capped mountains, into the dark ocean and underneath a busy, cloudy sky. Toucouleur reminds us that witnessing all the elements at play with one another doesn’t require effort; you can see it in most landscapes or cityscapes, manipulated or not.

Showcase

Lowe
Lowe doesn’t use a landscape or realism to provide a combination of elements. Rather, its whole design consists of shapes shifting around each other in a psychedelic kaleidescope effect. Then, these  strip away, unsheathing an underlying layer, which invokes a separate theme. These themes include water, as seen here with fish floating amongst the shapes, and air, which features windmills on a red-toned layer and hot-air balloons on a green-toned layer.

Showcase

Logoterapia
Logoterapia features a tree that’s gradually losing its leaves. These leaves gracefully flow to the land on which the tree sits. Next to this tree sits a giant cloud, softly resting along the reflecting surface of the water. Logoterapia includes water elements as well, with a small fish systematically springing out of and returning to the water.

Showcase

Concept 007
Concept 007 shows various scenes, which you can flip through, invoking the elements. The opening scene, for instance, combines a ship that touches both sea and sky. Its maiden of the ship makes her appearance only to be nibbled by the large fish. Another scene features a carnival, complete with roaming elephant and balloons that command attention as they float into the atmosphere. You can also view a giant boy who towers above the clouds as he tries to catch a helicopter. Concept 007 goes to show us that even in our most outrageous fantasies we cannot discard the essential elements of the world in which we exist.

Showcase

Element
Element is a company that sells energy drinks. These are said to provide consumers with a taste and feel that characterizes each of the four elements. Thus, it stands to reason that it’s site would play upon these elements. Each bottle that sits in the middle of the design emerges upon hover to showcase one of the four elements. With this emergence is element-specific hue that colors the bottle and the surrounding floating shapes. Upon clicking, the surrounding images change to more element-specific imagery and we are given a run-through of the product. The black tone serves to anchor the heavy development.

Showcase

Grzegorz Kozak
At Grzegorz Kozak’s site, we follow the whimsically contoured lighthouse down through space, where we reach the Earth’s atmosphere, ridden with white floating clouds and a turquoise sky. A little lower and we reach the base of the lighthouse, which rests on a land with sparse resources: a few bushes and a telephone booth. Right next to the land is the vast ocean and right underneath it are remnants of technology buried in the earth. The humor is in the details; buried are items such as an old Nintendo controller, cassette tape and floppy disk reminiscent of the early 90s.

Showcase

Imagine Boris
Boris Savitsky’s portfolio may be vary minimal, but it doesn’t skimp on the elements. Included are butterflies roaming in the sky, in addition to grass, trees, flowers and a lizard perched on a rock. Some telephone lines  and old-world street lights linger in the distance. In the blackness reside more butterflies, flowers and some twig-like figures.

Showcase

The Spot INFERNO
The Spot INFERNO’s site is one that belongs in an ancient atlas filled with mythological lands that are governed by an unknown figure. Here, we sift down through one of the worlds, gliding through the detailed clouds, to tiny villages perched around a large body of water and mountains and caves. From here, we go past an ancient city sitting in the mountains to woodlands, only to reach the earth. The Spot INFERNO doesn’t stop here, though. We drift farther and farther into the core, eventually reaching a Satan.

Showcase

Immersive Garden
Immersive Garden invites you to take a seat, where harmony awaits in the form of elemental balance. In this design, earth, air, fire and water float together in a dance where no one is leader. Beautiful fish and the tree sway in the same underwater motion, with small flower petals falling through the air. Billowy clouds and a pale palette make this atmosphere add to the coziness. Though the design changes with every page, one thing remains consistent: the use of the elements in tandem.

Showcase

Summary

With foreboding seascapes and towering, sky-high views, Web design is nodding to mother nature by combining current development trends with the basic elements. This nod to the elements is indicative of the growing appreciation and inclusion of all things natural in our technological lives. We can see this trend in interior design, architecture and countless products on the market. So we ask you: What’s your favorite non-Web example of a nature-tech infusion? Or do you have a smashing Web example that you didn’t see here?

(ik)
[fblike]

About the Author

Katie Thompson has a BA in journalism and design from Ohio State University. She has written for both print and online media, including Ohio-based CityScene Magazine and Web Designer Depot, and has more than seven years experience in web design and development.

Comments and Discussions
  • Yvonne Tang, 12 April 2011

    Cool list! Even though I have a preference for non-Flash website, I think the design of Immersive Garden (the last one on the list) is pretty impressive.

    Here’s another good one for earth:
    http://www.floridaflourish.com/

    and for water and air:
    http://www.pojeta.cz/

  • aming, 13 April 2011

    such a beautiful web design, from above list I like the imagine boris design…

  • InWard247, 13 April 2011

    Inspiring collection,

    Really like the Gazelle Touch one.

    Thanks,

  • Ralph, 13 April 2011

    @Yvonne: Your both links are nice and interesting.

    @ Article: A very nice collection about the Four Natural Elements.

    • Yvonne Tang, 13 April 2011

      Glad you like the links, Ralph.

  • Urviho, 13 April 2011

    Nice collection :) Some of the are really amazing :)

  • Rick, 13 April 2011

    Pretty impressive list, never thought about the concept of the elements. What’s next? Feng Shui?

  • Kian Ann, 13 April 2011

    Interesting and impressive designs!

  • Ted Thompson, 13 April 2011

    Nice collection. Watermelon Industries is my favourite, I love sites that go underground so to speak!

  • Ryan Leaper, 13 April 2011

    The four elements has for a long time inspired artists and designers of all types in their creative work. I think this showcase shows how it continues to provide inspiration and ideas to many web designers. Out of all of them my personal favourites are probably the earth inspired sites for their use of natural textures which I think always works well. Some really interesting concepts as well such as the 2600 Vodka site and the some what psychedelic Lowe site. I think the four elements will continue to be a great source of inspiration for many designers for years to come.

  • Katie McMillan, 16 April 2011

    Hi. Thanks for taking the time to write this excellent post. I know how time consuming posting articles is and I have to say, it is extremely well written, very informative and full of useful content. I look forward to your next post and have gained some inspiration from your dedication. Thank you.

  • chris george, 18 April 2011

    As a Web Design Company India CYBERMOUNT is one of the fastest growing web site designing company spreading wings in USA UK and India. Expertise in Web Designing, Web Applications and Online Marketing.

search form
 
image description image description