Web Designs that Incorporate the Four Natural Elements
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.
EarthOrganic 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. 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.
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. 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. 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.
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. 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. 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. 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. 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. 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. 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.
AirReduce 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
FireHind 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. 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. 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. 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. 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. 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. 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.
Water26000 Vodka 26000 Vodka invokes this element with enlarged water molecules. These molecules rotate around the links for a design that you can sink into. 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. 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. 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. 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.
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. 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. 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.
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:
and for water and air:
such a beautiful web design, from above list I like the imagine boris design…
Really like the Gazelle Touch one.
@Yvonne: Your both links are nice and interesting.
@ Article: A very nice collection about the Four Natural Elements.
Glad you like the links, Ralph.
Nice collection :) Some of the are really amazing :)
Pretty impressive list, never thought about the concept of the elements. What’s next? Feng Shui?
Interesting and impressive designs!
Nice collection. Watermelon Industries is my favourite, I love sites that go underground so to speak!
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.
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.
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.