Author Archive

Web Designs that Incorporate the Four Natural Elements

Advertisement in Web Designs that Incorporate the Four Natural Elements
 in Web Designs that Incorporate the Four Natural Elements  in Web Designs that Incorporate the Four Natural Elements  in 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.

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.

Screenshot-organic-grid in Web Designs that Incorporate the Four Natural Elements

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.

Earth5 in Web Designs that Incorporate the Four Natural Elements

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.

Infinvision in Web Designs that Incorporate the Four Natural Elements

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.

Rocketclub in Web Designs that Incorporate the Four Natural Elements

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.

Earth1 in Web Designs that Incorporate the Four Natural Elements

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.

Gladeye in Web Designs that Incorporate the Four Natural Elements

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.

Earth3 in Web Designs that Incorporate the Four Natural Elements

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.

Earth4 in Web Designs that Incorporate the Four Natural Elements

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.

Vitaming in Web Designs that Incorporate the Four Natural Elements

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.

Cure in Web Designs that Incorporate the Four Natural Elements

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.

Earth9 in Web Designs that Incorporate the Four Natural Elements

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.

Earth10 in Web Designs that Incorporate the Four Natural Elements

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.

Air2 in Web Designs that Incorporate the Four Natural Elements

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.

Air3 in Web Designs that Incorporate the Four Natural Elements

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.

Air4 in Web Designs that Incorporate the Four Natural Elements

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.

Air5 in Web Designs that Incorporate the Four Natural Elements

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.

Combo4 in Web Designs that Incorporate the Four Natural Elements

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.

Air7 in Web Designs that Incorporate the Four Natural Elements

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.

Air8 in Web Designs that Incorporate the Four Natural Elements

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.

Stephencaver in Web Designs that Incorporate the Four Natural Elements

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.

Air10 in Web Designs that Incorporate the Four Natural Elements

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.

Shiningkarma in Web Designs that Incorporate the Four Natural Elements

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.

Fire1 in Web Designs that Incorporate the Four Natural Elements

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.

Fire3 in Web Designs that Incorporate the Four Natural Elements

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.

Fire4 in Web Designs that Incorporate the Four Natural Elements

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.

Fire6 in Web Designs that Incorporate the Four Natural 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.

Fire7 in Web Designs that Incorporate the Four Natural Elements

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.

Fire8 in Web Designs that Incorporate the Four Natural Elements

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.

Bbqwar in Web Designs that Incorporate the Four Natural Elements

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.

Water1 in Web Designs that Incorporate the Four Natural Elements

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.

Water2 in Web Designs that Incorporate the Four Natural Elements

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.

Water3 in Web Designs that Incorporate the Four Natural Elements

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.

Water4 in Web Designs that Incorporate the Four Natural Elements

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.

Water6 in Web Designs that Incorporate the Four Natural Elements

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.

Water8 in Web Designs that Incorporate the Four Natural Elements

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.

Water9 in Web Designs that Incorporate the Four Natural Elements

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.

Water10 in Web Designs that Incorporate the Four Natural Elements

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.)

Combo1 in Web Designs that Incorporate the Four Natural Elements

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.

Combo2 in Web Designs that Incorporate the Four Natural Elements

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.

Combo3 in Web Designs that Incorporate the Four Natural Elements

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.

Air6 in Web Designs that Incorporate the Four Natural Elements

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.

Combo5 in Web Designs that Incorporate the Four Natural Elements

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.

Combo6 in Web Designs that Incorporate the Four Natural Elements

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.

Combo7 in Web Designs that Incorporate the Four Natural Elements

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.

Combo8 in Web Designs that Incorporate the Four Natural Elements

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.

Combo9 in Web Designs that Incorporate the Four Natural Elements

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.

Combo10 in Web Designs that Incorporate the Four Natural Elements

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)


Showcase Of Delicious Coffee Websites

Smashing-magazine-advertisement in Showcase Of Delicious Coffee WebsitesSpacer in Showcase Of Delicious Coffee Websites
 in Showcase Of Delicious Coffee Websites  in Showcase Of Delicious Coffee Websites  in Showcase Of Delicious Coffee Websites

For designers approaching a deadline, coffee is a delicious necessity. Lucky for us, having a coffee break is not really difficult. But it’s more than just a 3am fix. With every late-night run to the local coffee house, we contribute to a populous network of coffee trading, sales and experience.

And in fact, coffee houses and suppliers are quite a business, with online presences ranging from simple layouts with striking typography to advanced layouts with remarkable photography. Coffee websites: what do they look like? What do they have in common? What metaphors, visuals and typography are they using? Well, this is where this showcase comes handy; let’s take a closer look at tasty coffee websites and examine their distinctive features and peculiarities.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Showcase

Far Coast
Rustic oranges and blues are at play Far Coast’s website, with hints of distressed textures for an even more vintage vibe. The top navigation bar complements the large images that span the bottom, and the size of the centered text balances these for a pleasing look. Contrasting the richness of imagery is a neutral background, as well as low-opacity shots on either side.

Coffee54 in Showcase Of Delicious Coffee Websites

Gorilla Coffee
Thick lines, a dark two-toned palette, heavy shapes and an urban setting remind the user that coffee can be just as enjoyable when sipped in a fast-paced city as in the mountains. Flash in use.

Coffee501 in Showcase Of Delicious Coffee Websites

Ipsento Coffee
Instead of working with generic templates, Ipsento Coffee provides truly professional photography, displaying various navigation options in a quite unusual but attractive way. No links, no pages, no frustration with poor navigation. Ipsento shows that you can be complex and professional in design without having to indulge in equally complex development.

Coffee8 in Showcase Of Delicious Coffee Websites

Coffee Club
It’s no accident that the word “Indulge” emphasized in this design. With the aerial view of the natural setting, multiple areas of primary and secondary focus and beautiful balance of features, you’ll be indulging in this design as much as the Coffee Club’s menu.

Coffee47 in Showcase Of Delicious Coffee Websites

America’s Best Coffee Roasting Company
Balance is key in this design, and in many ways. America’s Best balances the abundance of gray tones in the big background image with a few shots of bright blues and rusty reds. In the same vein, the small text on the right side of the text area is balanced by the large focal text on the left. Overall, this text and link area is centered in the design. There are subtle balances as well: the “heavy” part of the picture is the top right, balancing the logo on the left.

Coffee48 in Showcase Of Delicious Coffee Websites

Pura Vida
Lime green isn’t an obvious tone to associate with coffee, nor with a website. But Pura Vida uses it to embody the qualities of its coffee: fair-trade certified, organic and shade-grown. The tone is cooled down by the rich browns, crisp whites and suede neutrals.

Coffee18 in Showcase Of Delicious Coffee Websites

Seattle’s Best Coffee
The most interesting part about Seattle’s Best Coffee website is its interactivity. You can rotate the cup to reveal different information about the company, its partners and the coffee. As the website says, “Go ahead. Take it for a spin.” Your design taste buds will be satisfied.

Coffee17 in Showcase Of Delicious Coffee Websites

Café Henrici
With a simple “flip” of the menu, you get all the information you need about Café Henrici. Café Henrici’s use of perspective in the layout image draws users into the scene, making them feel as though they are sitting at a round table in the Café, sipping a steamy cup.

Coffee42 in Showcase Of Delicious Coffee Websites

Sweet Sallie’s Bakery & Cafe
Though Sweet Sallie is as much a cafe as a bakery, its website exemplifies the cute-cupcake vibe found in many bakeries. With various blues, lavenders and teals and a feminine background pattern and type, this website’s all about baked-goods deliciousness. The cafe is simply the cherry on top.

Coffee14 in Showcase Of Delicious Coffee Websites

Influx Café
With a design as modern as the furniture in the photo, the Influx website is sure to please. On the home page, we are first presented with a sped-up video of goings-on in the cafe, giving us a fly-on-the-wall look at the cafe… and some tasty-looking muffins. From there, users can navigate to the sub-pages, which continue the clean palette.

Coffee9 in Showcase Of Delicious Coffee Websites

Tapped & Packed Coffee
The Tapped & Packed website combines the beauty and simplicity of modern design with traditional charm. A simple yet elegant palette of deep grays, crisp whites and soft yellows is combined with crisp lines to give a modern touch, while the serif fonts and roman numerals lend traditionalism.

Coffee6 in Showcase Of Delicious Coffee Websites

Caravan
Caravan’s website (or rather “Coming Soon” page) is decadent in rich grays and browns. Crisp whites bounce off the dark tones in both serif and sans-serif fonts, giving the typography a professional look. The background image gives us a view of its modern product design, which reflects the website itself, with its sparse text and neutral color choices.

Coffee10 in Showcase Of Delicious Coffee Websites

Cilantro Café
With drawn images dancing about a meditating man, impulsive swathes of paint and a variety of colors and objects, Cilantro Café reminds us that coffee can be both impulsive and relaxing. Reinforcing this contradiction is the radial balance of links that are off-kilter.

Coffee49 in Showcase Of Delicious Coffee Websites

Kicking Horse Coffee
The classic black and white palette of this website reflects the product design of Kicking Horse Coffee’s cups. The website uses splashes of bright tones to (ahem) kick it up a notch, and it adds slight textural elements for intrigue. The large focal point anchors the design, allowing the designer to make the links and text area large. It’s big, in your face and effective.

Coffee37 in Showcase Of Delicious Coffee Websites

Robust-ah!
Robust-ah’s large photo could have easily overwhelmed this space, becoming a distraction from the information featured below. Instead, the design actually benefits from the large photo, which anchors the rest of the information by giving the structure clean lines and the information a hierarchy. Robust-ah’s design is not what you would expect from a coffee website, with its deep-purple and light-blue tones. However, some things need to be improved here: larger font-size would help, and so would removing text-shadow from some parts of the text.

Coffee1 in Showcase Of Delicious Coffee Websites

1369 Coffee House
This coffee house website may look generic and simple, and that’s because it is. But the generic vibe and simplicity ensure that the large photo and generous information remain clean and organized.

Coffee5 in Showcase Of Delicious Coffee Websites

Park Avenue Coffee
Park Avenue Coffee gives a playful feel with all the vintage charm of its busy patterns, whimsical logos and strong color palettes.

Coffee7 in Showcase Of Delicious Coffee Websites

Greyhouse Coffee & Supply Co.
Greyhouse Coffee emphasizes its menu so much that you have to hover around the bottom or top for the sleek sub-navigation bars to float into view. Design-wise, the menu’s cork background lends organic relief to the modern feel of the other pages.

Coffee11 in Showcase Of Delicious Coffee Websites

Tre Amici
Reminiscent of I Spy books, Tre Amici’s links are scattered across the various photos of its coffee house. With images that skate in and out upon link clicks, Tre Amici shows an interesting, interactive take on the stagnant photo tours of other websites. The transitions in the Flash-based navigation could be certainly improved, though.

Coffee13 in Showcase Of Delicious Coffee Websites

Dunn Bros Coffee
The Dunn Bros Coffee website has multiple textures, including burlap, paper, and photography, to exude a cozy vibe. The aerial view is also quite nice, giving us a few extra textures to enjoy: the blackness of the coffee, the shininess of the mug and the roughness of the coffee bean.

Coffee16 in Showcase Of Delicious Coffee Websites

Marley Coffee
Marley Coffee’s website is aesthetically pleasing, with a simple yet modern palette, lovely Flash and a simple point of focus. But don’t be so quick to click, not until you see Mr. Marley close up, sipping a cup of coffee and peering over the mountains and wilderness.

Coffee19 in Showcase Of Delicious Coffee Websites

Jones Coffee Roasters
Jones Coffee Roasters has a simple website with a simple layout, but the colors are bold and comfortable, and the textures add coziness and warmth. Easy navigation and a homey feel: a workable, beautiful combination.

Coffee20 in Showcase Of Delicious Coffee Websites

Blaser Café
Blaser Café’s website features crisp whites and a no-nonsense, user-friendly structure, which reminds us that coffee isn’t just about sipping brew and enjoying a break. It’s a business. But we all know what all work and no play leads to, and so Blaser Café adds a fun touch, too, with whimsical image transitions on the home page.

Coffee21 in Showcase Of Delicious Coffee Websites

A Chacun Sa Tasse
A Chacun Se Tasse lets us take in rich screen-wide images of its coffee house while reading information in an elegant gray information box. Sifting through images requires only a quick hover on the right side of the page, with no jolting image or page transitions.

Coffee23 in Showcase Of Delicious Coffee Websites

Turquoise Coffee
At the opposite end of the color spectrum is Turquoise Coffee, which uses calm neutrals, muted turquoises and subtle splashes of unexpected tones to grab the user’s attention. The website may not be as flashy or inspirational as some others we’ve seen, but it’s pleasant, easy on the eyes and user-friendly, and it gets the job done. It reminds us that simple isn’t so bad. The line-height and padding could be increased though.

Coffee27 in Showcase Of Delicious Coffee Websites

Looney Bean Roasting Company
Nothing says decadence quite like red. And nothing is a more perfect match than red and subtle khaki neutrals. Reds and beiges may not be the go-to colors for coffee products, but here they play off the large coffee-swirl background to emphasize the coffee’s creamy delectability, rather than its high-energy potency.

Coffee28 in Showcase Of Delicious Coffee Websites

Storyville Coffee Company
This website is tasty enough on the low bandwidth option, but go high bandwidth if possible. Here, everything says rich: the warm tones of the large transitional images, the rich grain in the borders, the page transitions, the balance of information on the secondary pages, the decoration upon link-hover and the elegant, deep-toned pattern background. The coffee is “artfully roasted,” and the website is certainly artfully crafted.

Coffee291 in Showcase Of Delicious Coffee Websites

Bean Exchange Coffee House
History comes alive on the website for this old Philadelphia coffee hub. The coffee house communicates its rich history in the look and feel of the website, with every bit of ornateness, palette and structure contributing to the theme.

Coffee30 in Showcase Of Delicious Coffee Websites

Java Cabana
There is such a thing as too much of a good thing, and certainly in the case of color. But Java Cabana’s heavy use of brown—typical of coffee websites—isn’t overbearing, thanks in part to the texturing of most of the brown elements, which help to break up the monotony. In addition, the steel accents bring a gray neutral that breaks up the brown without becoming an overt accent tone. Add in some great illusions of dimension, and you’ve got yourself a delicious website. Flashy transition effects in the footer of the page could be achieved with CSS3; you don’t really need Flash for that any more.

Coffee38 in Showcase Of Delicious Coffee Websites

Cuvée Coffee Roasting Company
This company boasts, “We take our coffee seriously. But we don’t take ourselves seriously.” It may sound like a cliché, but if its design is any indication, Cuvée Coffee is being honest. With fun cheesy yellows, handwritten fonts and playful graphics, the website feels as whimsical as it is professional. The palette stays grounded in warm hues, helping to maintain professionalism and hint at Cuvée’s birthplace: the arid state of Texas.

Coffee26 in Showcase Of Delicious Coffee Websites

Café Britt
An abundance of imagery is on Café Britt’s website to stimulates several of the senses. The stainless steel logo against the rich gray background convey the professionalism of the company. The wood and plant imagery in the navigation bar and footer brings a natural aura. We also get an intimate feel from scrapbook-like elements such as the handwritten fonts, old-paper textures and painted scenery on sub-pages. The website is wide, but that helps to accommodate the abundance of content.

Coffee39 in Showcase Of Delicious Coffee Websites

Paul Dequidt Torrefacteur
Soft plays on opacity and drop-shadows give texture to the large white information areas at the center of the page. The large background contains the palette from which all tones are pulled. The dimensions could be overwhelming, stifling any smaller images in the text area, but the large image in the white section maintains equal proportions. In addition, we get a definitive sidebar and two-column balance, adding stability to the layout.

Coffee40 in Showcase Of Delicious Coffee Websites

Starbucks Coffee at Home
Starbucks uses a chalkboard as it’s background, providing an instant means for texture. The dark hue of the board helps anchor the bright colors that appear upon link-over. Balance is kept centered; this simplistic form of balance keeps the intricate links and unique coffee navigation in check.

Coffee61 in Showcase Of Delicious Coffee Websites

Cafeshop Especial
Dimension, texture and the colors in the links and sidebar ensure instant recognition of important sections, while the soft background adds a neutral base and subtle interest.

Coffee43 in Showcase Of Delicious Coffee Websites

Swiss Water
In the rotating pictures, you’ll find women talking to one another over a cup of coffee, women enjoying a solitary cup of coffee, women sipping coffee while working. These scenes highlight coffee’s status as both a vehicle for social interaction and an occasion for brief solitude, and they form the largest part of the website, above the fold and in your face. The soft blues and whites minimize the distraction of the top links, search box and the like. Even the logo takes a back seat to the driving concept: coffee’s friendliness and warmth.

Coffee44 in Showcase Of Delicious Coffee Websites

Café Théâtre de la Marionnette
It’s not often that a torso with a coffee-cup head descends from above on strings and slides down the page, but with a name like Café Théâtre de la Marionnette, the sight is not surprising. Neither are the rustic textures and intriguing images (such as the doll-like dresses). But what keeps this website in the modern era is the beautiful development, which gives us a realistic bounce as each page loads.

Coffee45 in Showcase Of Delicious Coffee Websites

First Colony Coffee and Tea
Using a mix of old and new design, First Colony Coffee and Tea definitely breathes new life into tradition. The serif fonts, black and white imagery and crest in the logo create a colonial vibe and take the edge off the stark modern yellow in the image and background. With the expansive space along the right side and abundance of text, this website could easily have been boring at first glance; but the focal point comes to the rescue, with the smooth sway of steam from the coffee cup and the soft scrolling of the background image.

Coffee46 in Showcase Of Delicious Coffee Websites

Juan Valdez
This website gives us more than a warm welcome. Here, we are personally greeted by Juan Valdez, we traverse the rich countryside scene, and we enjoy all the animated goodness that this design has to offer. And if you don’t have time to take it all in, you’re in luck: the easy navigation makes the content extremely accessible, an advantage that many heavy websites don’t have.

Coffee32 in Showcase Of Delicious Coffee Websites

Lavazza
Lavazza’s neutral brown background emphasizes the big links of rotating coffee cups that occupy most of the page. The neutral background also accommodates bright tones that run the spectrum. These whimsical touches are balanced by a simple white font for navigation and darker browns for drop-shadows and highlights.

Coffee33 in Showcase Of Delicious Coffee Websites

Café Rouge
Various textures create a warm, entertaining vibe on Café Rouge’s website. The textured background, rough paper, old stickers and supple light are just a few of the touches that make this website cozy. The movement in the photos and scrolling images below add flare.

Coffee51 in Showcase Of Delicious Coffee Websites

Anodyne Coffee
Anodyne’s website is simple. Its coding is basic, and its design is line-based and simple, which might cause some designers and developers to cringe. However, with the Web now so obsessed with bells and whistles, seeing a simply coded, simply designed website is a breath of fresh air. The traditional serif fonts hearken back to simpler times. What would be really necessary, though, is to replace an image used under the header to display opening times and the address with simple text that would have higher contrast against the background.

Coffee3 in Showcase Of Delicious Coffee Websites

Dôme Café
Like Café Rouge, Dôme Café uses a variety of textures to make the user feel cozy. The rotating images add excitement, and elements such as the white ribbon in the logo and the trim around the links instill tradition.

Coffee52 in Showcase Of Delicious Coffee Websites

Double Coffee
Double Coffee matches its big imagery with big text, big text areas and bold white fonts, achieving proper balance. Red runs rampant across the website in different hues and tones, bringing consistency and cohesion to the website. Adding to the cohesion are white cups, dishes and creamers that mirror the font. It’s proportionately spot-on and features interesting touches, such as a credit card. The consideration for all of these basic design principles make the website appealing and make us want to stay for one more page.

Coffee53 in Showcase Of Delicious Coffee Websites

Kaffebrenneriet
Like the Far Coast website, Kaffebrenneriet balances big rich imagery at the top with a neutral brown and taupe bottom, as well as focused images and simple fonts. Shadows set off the logo and two navigation bars, and the play on opacity and light make for an overall professional feel.

Coffee55 in Showcase Of Delicious Coffee Websites

Mugg & Bean
The dominance of one color, the balance of the large imagery and text areas, the traditional white font and the accent tones make this website easy on the eyes. Drop-shadows, reflection effects and beautiful image movement make it look even more professional.

Coffee56 in Showcase Of Delicious Coffee Websites

Old Town
Old Town plays up its name in this design, with its yellow-sepia blend in the background, the old village nestled in the countryside, the italic serif fonts and the flock of birds in the sky. We also get a touch of modern, with scrolling videos on the billboard and an animated delivery truck. The heaviness of the billboard is balanced by the town, and together they are balanced by the six links along the bottom, which reveal sub-navigation in white boxes upon hover.

Coffee57 in Showcase Of Delicious Coffee Websites

Copper Door Coffee Roasters
A multitude of textures, along with paper, wood and nails, give this website its natural look. The nice handwritten font for links and page headers and the drawn lines under hovered links punctuate the naturalness. Warm greens and oranges bring out the equally warm hues in the textures.

Coffee59 in Showcase Of Delicious Coffee Websites

ROM Coffee Bar
The circle of ROM Coffee Bar’s logo is reflected throughout the website, providing continuity and visual interest and giving the crisp whites and steel blues a softer feel.

Coffee31 in Showcase Of Delicious Coffee Websites

Quills Coffee
Big images, fonts and links provide balance, while the contrast of font types adds variety to this big neutral design.

Coffee34 in Showcase Of Delicious Coffee Websites

Melitta
There’s no better way to involve a user in your product than by simply throwing them into the scene. Most coffee websites do this with a close-up of coffee or a large static image of customers enjoying the atmosphere. Not Melitta. Melitta puts us at eye level with the rest of the coffee shop’s patrons, making us feel as if we too are sitting and sipping. We get a large view of the coffee shop’s charming exterior, and we can even watch as the patrons move, change and enjoy the experience. What’s best is how large the graphic is, giving us a full-on view of the perfect Melitta experience.

Coffee35 in Showcase Of Delicious Coffee Websites

Related Posts

You may be interested in the following related posts:

(al)


© Katie Thompson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress