How to Create an Organic Web Design
(and Showcase)

Organic design is commonly applied to products such as chairs, electronic equipment, books and home décor.

Following the same principles, organic web design has recently emerged as a trend.

Professional designers and companies have taken a more natural approach to creating their websites, logos and packaging, leaving behind the overtly technological sheen of the early 2000s.

Yes, fellow designers, it is safe to say that the new age of organic design for websites and corporate logos has taken effect.

Whether overt or subtle, whether scanned elements or graphics that mimic nature, organic web design has taken on many forms. But what constitutes organic design? What makes it successful? Let’s find out…

 

What Makes an Organic Web Design?

Though the name suggests that some kind of ecological statement is being made, organic web design is more about bringing natural elements into a technological environment.

These elements could be the representation of natural materials in a design (wood grains, fabrics, earthy textures) or something more abstract that captures the ebb and flow of nature (items, materials, colors, shapes). Organic web design is a broad concept and can be divided into four categories.

  • Using materials, textures and fabrics that hint at organic elements
    Objects such as muslin, burlap, papyrus, paper, tape and wood. These items come from the natural environment and thus give a layout a natural appeal.
  • Using abstract essences of nature
    Colors, shapes, graphics, materials and brushes that mimic the “flow” of nature. These are subtler than wood grains and muslins and are intended to give but a hint of an organic essence. We see this on websites that have modern streamlined graphics and a soft natural touch. Oddly, plastics are the most common materials used to achieve an organic look: unlikely materials are fair game in web design.
  • Creating a whole that is greater than the sum of its parts
    If an image is created that uses only brushes or graphics in order to create another image, we can say that we get more out of the image as a whole than the sum of its parts: the brushes or graphics. This comes more frequently in negative space, as brushes may be used to outline or fill in another image. When we add up the parts, we get one thing — the brush — but when we look at the whole, we are getting two things: the brush and the image created. This is common among typographies, as we may use them to create a totally different image, be it by playing with the negative space or adding brushes.
  • A looser interpretation of “organic” web design
    We generally define organic as something coming straight from nature, but it can also be something created (and then neglected) by humans, such as an abandoned piece of wood from a building or materials that once decorated a home and are now stained. Organic in this sense means something completely different: it takes over objects that are left behind by society. Old photographs, ripped cloths, distressed wallpaper: these all can be as organic as a piece of wood or leaf.

In recent years, organic design has taken on an “essentialist” quality. Essentialist organic design is a more minimalist ideal: use only what you need to achieve what you’re after.

For instance, if we wanted to create an image of negative space and brushes, we could use only the amount of brush necessary to create that image. Essentialist organic design leads to a more contemporary look and is spreading in the web design field.

These four categories can be played with and manipulated to get the feel that is right for you and your client. Mix and match any of these: they can all work together successfully.

 

Hints for Successful Organic Web Design

  • Earthy colors can be vibrant
    Burnt oranges, deep gray-purples and olives can be just as exciting as light yellows and bright reds. Plus, they work better together, and because you will more likely use neutral tones in your organic design, you can use more of these colors without overwhelming the design.
  • Vibrant colors can be organic, too
    Fire-truck red or cobalt blue can be just as earthy and organic as browns and grays. Find these colors in a vintage image or natural pattern or distress a pattern that has these tones. They can be refreshing when used with a muted palette.
  • Balance, balance, balance
    The environment remains stable through a careful balance of elements, and design is no different. This is even more important in organic design. Balance those gray hues with more colorful ones. Calm that wood background with flat, large or simple tables or div layers, or even a monochrome paper texture. One trap with organic design, as with all design, is that you can have too much of a good thing, and the line between successful and overdone can be fine.
  • Organic doesn’t mean scrapping the modern
    Just because you want an organic design doesn’t mean you have to abandon your modern influences. You can keep your chrome-looking background, purple complementary color or non-organic fonts. Softening a modern design doesn’t take much, nor does it need a floral vector. A simple curl of a graphic, brush or vector can achieve a natural essence just fine.
  • Think differently
    There is much more to nature than the obvious. Pick unlikely items that are natural but are less common, like light.
  • Urban areas are environments too
    Just because it is removed from the forest does not mean it is no longer an ‘environment’. Think concretes or damask.

To see organic web design in action, check out the following websites. These websites illustrate all, or some of the four categories of organic web design explained above.

Mooi’s background, an intricate wood pattern, is the main- and natural- element here. To this, Mooi adds a vibrant red hue, just one of the few modern touches in this design that don’t strip away its organic feel.


30A Guide plays with the more abstract interpretation of organic design, involving rustic papers, old photograph negatives and stamps. In addition, 30A makes us feel we have stumbled upon an already existing, non-digital environment.


I Love Dust includes many modern elements, but it does have organic hints: the animated tear drop, the circular fonts and the floral-shaped vectors.


While the influence is not obvious, Entry 5 Productions’ layout does incorporate organic design: We get rounded edges on the header links and logo, as well as a good amount of soft, natural tones. While subtle, these organic qualities take the edge off Entry 5 Productions’ modern look.


We may typically think of papers, woods and cloths to portray organic design, but materials such as leather are equally natural and less commonly used in web design. In addition, Saddleback Leather gives us an organic feel by using old maps, tags and upholstery.


Web Maremma is a good example of how a whole is more than the sum of its parts. If we look at the logo, we see what is intended: a ‘W’ and an ‘M.’ However, when we break the whole into its individual parts, we get incomplete letters. Thus, what we gain as a whole is, you guessed it, more than the parts combined.


This modern piece includes a cement backdrop, rounded edges and organic-looking backgrounds for the bottom text areas. These types of additions are typical in organic design.


Not only is the background a rough paper texture, but Lorelei Web Design incorporates a red drip or spill of some kind. An unlikely element, yes, but it is natural.


Hub’s white bricks stand out here, but what’s more important to note is the dropshadow on the images and the soft movement of these images when you hover over them. The shadow makes us feel as if the images have always been there, and the movement of the images when hovered upon mimics the flow of nature. The green, though vibrant, is clearly organic as well.


What stands out for Kulturbanause is the broken wall, implying that this wall has crumbled away over time. In addition, we have water seeping in from the other side onto the islands of land. This uses two forms of organic design at once: the use of overt natural images and settings and the use of something that is worn and decaying.


Pixel Umbrella’s natural appeal is in its barely-there background- a textured gray wall that hints to concrete or plaster- and the soft curves of the font (namely, the ‘b’ in ‘umbrella).


The bird may be a good addition to gain organic flare, but the colors of font are what drive Janic Design’s layout. The CSS is a focus in this kind of layout, and Janic Design adds organic appeal by using different shades of greens, teals, yellows, browns and deep gray-blues.


When all else feels modern, add a little natural feel in your logo. Josh Puckett’s raindrop logo is overtly organic, and the colorizing of the droplet only enhances its natural essence.


What is not organic about I Love Colors’ site design? The colors, the vectors, the ripped papers and the textured background are all adding to the organic appeal of this layout.


Greydient uses a rotation in the large images, but each one has organic appeal, with additions including dilapidated items, like what you see here, and floral brushes.


Flowers, birds and cloud-like imagery. An organic design that’s so overt you can’t miss it.


The globe image is nice, but the Oypro logo – which looks like a few leaf petals – and the soft edges on the links are what finish off the organic feel. The swirls of natural color help too, of course.


Orange Label’s layout has many modern qualities, with the use of squared text areas and a simple color scheme. However, Orange Label adds in organic design with its use of outlines of natural objects, soft edges and, most notably, text areas that feel as if they are made from negative space.


Another example of overt organic design, VixML’s layout consists of watery and cloudy imagery, a city setting and rounded edges galore.


Brown Blog Films may have a heavy use of wood in its design, but the wooden planks as links and the ‘hung’ picture of the logo are what top off the organic charm here.


Aside from the tree and the curvy font on the logo, there are two organic items to note: the handwritten font on the navigation and main background.


What makes Got Aqua a particular example of organic design is not the image of the skull or the handwriting, but rather the cork background. It is an interesting choice for a natural feel, but it is natural and a great neutral texture.


What is fun to remember about nature is that it does not only consist of bark and birds (and the like). It also consists of light waves, gases, sparks, light, among (clearly) other things. Noe Design plays with these unlikely sources of inspiration, giving us intensified ribbons of color and text that seems illuminated.


Bell 2 Lodge sets itself apart in that the graphics are large and are an obvious combination of vector and photo. We can see that the wood is an image of actual wood, whereas the leaves used are clearly graphics that were built in a program. It is an exemplary play on what is man-made and what, essentially, is not.


DJ Folio’s logo is the main organic component on the site, using simplified, rounded shapes that possess a natural feel. Also, through the separate circles and graphical bits of the ‘J,’ we get a product that is more than the sum of the individual shapes.


The coding is what is of note here, aside from the overt organic additions such as color, leaves and sky. The coding used to run Mathieu Furnon’s portfolio makes the transition from image to image seamless and natural.


The combination of dark tones with cooler blues and creams, as well as the ‘drawn’ effect on half of the logo add subtle organic touches to the obvious woods and papers.


The addition of ‘handwritten,’ off-kilter font flanking the more graphical font is just one aspect of organic design here.


Natural auburns, oranges, melons and browns soften the crisp, modern white in this layout.


Look beyond the trees; the water colors and the deep-but-earthy hues in the header image add a dramatic but organic appeal.


Written exclusively for WDD by Sarah Thompson.

What textures and tones do you prefer when creating an organic feel? As a user, which do you think is more appealing: subtle or overt organic themes?



  • http://www.logobliss.com Logo Bliss

    Nice collection, I love the Osvaldas portfolio.

  • http://www.5alarmint.com Jamal

    Great info

  • http://colorboxdesign.net DawiD D

    Awesome, very inspiring!!!

  • http://twitter.com/alanarenfro Alana Renfro

    Thanks, Web Designer Depot! Interesting collection with a lot of unique visual elements. I had never thought of my design as particularly “organic” before, but I suppose the handwriting in this one: http://bit.ly/zJOHl and the use of natural elements of floating white space, cork & grass in this one: http://bit.ly/L3D9Y would count? Thanks for always bringing such fun and helpful information to the design masses. It is appreciated!

  • http://www.fivefingercoding.com Jason Garrison

    Nice collection. I like the Agami Creative design. I prefer organic elements that are more subtle. I think they make designs more powerful and let the content come through.

  • http://www.designblend.co.uk starr

    This is a great collection. I Love Colors is one of the best looking sites around. I love it

    • http://www.ripplenet.co.uk Tim Read: Ripplenet web design

      I agree – its got the right blend of elements very well matched together.

  • http://www.fivefingercoding.com Chet Garrison

    Great list of inspirational website designs. It proves that the more unique a design is the more it gets noticed. Web design has come a long way.

  • http://www.brettjankord.com Brett

    Nice Collection!

  • http://www.mattcraigdesign.com Matthew Craig

    I love Entry 5 Productions!!!

  • http://www.egracecreative.com Brandon Cox

    After reading the content of this post – I’m feeling healthier already. I love the way you guys match inspiration with instruction!

  • http://www.bebop-ad.com BebopDesigner

    Brilliant collection! these are really inspiring. Beautiful work.

  • boteragfa
  • Matt

    These are all very pretty, nice article! But aren’t these backgrounds going to be particularly large files at this size? I’m a web design noob, so I was wondering how it might be possible to optimize backgrounds like these so that they aren’t always over 200k in file size…

  • RoaldA

    I love articles, tuts and everything about webdesign! Thanks! :D

  • http://redstage.com/magento Redstage Magento

    Nice collection! Thanks for the information.

  • http://irama.org/ Andrew

    Nice round-up! BTW the “red spill” represents a wax seal, so it’s not entirely unexpected in that context.

  • http://www.littleboxofideas.com Sneh Roy

    Nice broad spectrum on organic design. The inspiration websites are beautiful! Thanks!

  • http://www.copiousinc.com Tim

    Thanks for showcasing our client’s site, saddlebackleather.com – it was a great experience designing and a fun challenge working with so many leather textures.

  • http://www.designforsite.com Le

    Nice round up. Barefoot Wines also has a very nice, beach-style organic layout: http://www.barefootwine.com

  • http://www.dgenerador.com/diseno-de-imagen-corporativa.html diseño imagen corporativa

    Muy buen blog de diseño! great blog! thanks from Argentina.

  • Marco

    Jeezus these sites here are painfully horrible. Not all of them but 94%. Jezus Christ it’s like someone knows how to use photoshop and do a little css and they make a fugly website. It’s got big pretty colors and a tree! Yay I’m a professional web designer!

    I know I’m an ass but you people will learn these examples suck in the coming years when you get better.

  • http://www.adriemooi.nl Adrie

    Thanks for the example! although my site has been redesigned completaly, I think the screenshot still serves as a nice example for the article. Very inspiring work, and yes I’m a professional (senior) webdesigner too! ;)

  • http://www.neotericuk.co.uk/web-design-uk.php Websi Design UK

    Organic Designs yeah they are looking great, as they are different from others. Designers have apporached them in a natural way. Really a great collection. Its all creativity with imagination how beyond you can think about. If we are paying time to create unique and noticeable designs than they are great ones. Thanks for sharing and writing such a nice hints on ODs. Creating such a beautiful posts are appreciated in the industry.

  • http://www.crearedesign.co.uk Luci

    I love organic designs, and whilst generally a lot of those you’ve collected I wouldn’t necessarily class as ‘organic’, but 2.0/organic hybrids that doesn’t mean that many of them aren’t beautiful. A few I’m… not so keen on, but again that’s personal preference!
    Thanks for a great collection!

  • http://www.aledesign.it aledesign.it

    Great post of inspirational website designs!!! Magic..and more ideas! A natural approach and nature is important for everyone..I like this type of thinking and building sites. My preferite site are: http://www.kulturbanause.de/, http://mathieu-furnon.net/ and http://www.30aguide.com/… amazing!

  • http://anelllya.blogspot.com Anelia

    Just as usual a GREAT GREAT collection! Thank you people!

    *p.s. That logo of the DJ FOLIO reminds me the logo of David Airey…. (http://www.davidairey.com/) I don´t know if this is just a stupid coincidence, but they do lookalike.

    Of course, that´s not your problem guys.

    Greetings

  • http://www.w2point.com Web 2.0

    Awesome collection, great work :)

  • http://www.bendesign.eu/ Bendesign

    Wow! Great Designs. Thank you. :)

  • http://www.empfehlenswert-wien.at wien

    helpful post, thanks

  • http://confort-it.com Confort-IT

    Very inspirational – thank you!

  • http://www.domino-studios.com Daniel

    Hello,

    I have another example ! It is one of my sites, for an turistic organisation in France : http://www.oust-broceliande-vacances.com/
    Here in Brocéliande we love Elves and Trolls, so we decided to create something close to the legend, feeling magic and mysterious.
    Hope you will appreciate it ;)

  • http://www.swissitweb.com Claudia

    Thanks for this collection with us, indeed very talented designers and developers.
    Great post, keep up the good work!

  • http://www.PJDesignsAndConcepts.com Cheap Web Designs

    Great blog post. Organic designs is a good concepts especially in today world’s. I will use one and design a site for a client using this concept as I design sites for a living myself.

    Thanks
    PJ

  • http://betterproductions.com Brandon

    The “red drip or spill of some kind” for Lorelei Web Design is a wax letter seal not a “spill or drip”…. just thought I point that out.

    • http://avenue-seven.org Sarah Thompson

      Several people have mentioned this. I agree upon looking at it again; the wax looks a little ‘wetter’ than I would design/illustrate wax to be (which is why I must have not put two and two together as quickly as you guys), but thats all a personal design technique preference.

  • http://www.philippineglobaloutsourcing.com Philippine Outsourcing

    thanks for the inspiration :)

  • http://www.sametomorrow.com/blog Adam

    Good list there are some nice stuff.

  • http://www.osvaldas.info Osvaldas

    Thanks a lot for listing me!

  • http://www.brushthis.com Liora

    Some excellent concepts here. Thanks for the insight.

  • http://www.stablewebdesign.co.uk/ web design hertford

    Great post, it is really going to help them who are planning for an Organic Website Design. Thanks

  • http://gomobile.com.ar/ Zim

    When I started to redesign my blog, I was inspired partially by Kulturbanause (though what I did finally was totally different). I invite you to see my design :)
    Great inspirational article!

  • Wolfi

    That´s very nice collection. My Favorites are http://www.enigmabg.com/ and http://www.webdesign-firebird.de What do you think about it?

    Greetings

  • http://www.blog.okiedokiedesign.net/ OkieDokie

    Wow,

    This comes in handy right now
    I’ve satarted a project which will probably head this way

    I’ll use this post for sure

    Thax for the post

  • http://www.seniorwebdesigner.com Mohammed Alaa

    The collection are really amazing but remember that the customers won’t understand most of the collection there is only like 4 websites of the collection that could be understandable for any client.

    i’m not saying they are not good but what i mean is that the normal clients are not graphic designers that they will appreciate all the efforts done in this organic layouts.

    do you agree with me?

    Thanks,
    Mohammed

  • http://www.downwithdesign.com Gareth Hardy

    Interesting article

  • http://www.kronikmedia.co.uk web design UK

    Organic designs can work well on blogs and websites for creative industries. However a majority of businesses may prefer a more corporate and clean cut feel. I think the context of use is improtant to consider in deciding whether an organic design such as the ones mentioned in this post, will work or not. Whilst it can work well for media or creative businesses, it may have the same effect for others.

  • http://www.tedgoas.com Ted Goas

    Great article, though I thought this has to do with SEO when the word ‘organic’ was first mentioned.

  • http://www.cypherbox.net cypherbox

    Wow..What an inspiring design. Thanks for sharing!

  • http://www.seobrandmedia.com web application development

    The preliminary step is aim to maintain the site simple, understandable and translucent to attract visitors going in to your page and so bringing them closer to buying a product.

  • http://findhostcoupons.com/ Host Coupons

    Useful article and great tips, thanks! I hope that professional web designers will agree with me!

  • http://spotlightmedia.in/ web design chennai

    I like this article very much

  • http://www.simonday.com Simon Day

    The Kulturbanause site is possibly the nicest site I have ever seen in 12 years surfing.

    Simply stunning!

  • http://www.chipdesigns.com.au Robert

    There are some great organic designs in this article. Thanks for sharing.

  • organic

    The soundsplash site is pretty awesome in my opinion. I really love the organic concept but with a lot of simplicity…its easier on the average eyes.
    Thanks as always for the cool ideas!

  • http://www.link-optimise.com Richard Teahon

    I can see the organic website perspective, but really the word ‘organic’ is missplaced, as there is no natural element to what is in essence a picture. It is a little like taking the picture of a cow and saying it is organic, even though once slaughtered on the dinner plate, it will probably transpire that it has been so stuffed full or antibiotics that in death it is inorganic.

    A better description of the websites would be ‘earthy’, as these are the materials that are depicted.

    Just a thought.

    Thanks.

    • Sarah

      ‘Organic design’ is an actual form of design that uses the above methods to create it. While the term does not perfectly translate into the web, as the web is nothing but graphics and coding, the use of a broad ‘organic design’ principles is being used on sites.

      • http://wfxyz.tumblr.com/ Wafiq

        Pat me in the back but I thought the term organic in design were meant to be something that is out of normal shape. Literally organic may be meant something to deal with nature and earth. But in my opinion, it doesn’t have to be something organic literally. Remember the ‘organic shape’ they taught in school?

  • http://rate.kg/ rafael

    Guys I liked this site articles and posts, just up to date. I also follow smashingmagazine and prevoiusly thought that it was superb as desiger onfo source, but after seeing you site I changed my mind. Now you are my favourites.
    Wish you good luck

  • http://wpworkshop.la/ The Frosty

    Very nice colors on some of these sites!

  • http://www.cginspired.com Chris

    Great collection here – love the saddleback design, very easy to get wrong!

  • http://www.leosys.net/saas-development.aspx saas development

    just awesome design, hope similar design will be available for wordpress.

  • http://www.iastron.com/5000 Kulin

    I really like the concept of Organic Web Design, it teaches a lot.

    happy new year

  • http://www.turkish-houses.com Turkey property co.

    I think green color will be good for an organic website design but you have to choose right type of green color

  • http://goldennetwork.net web design miami

    great post ! I just like the collection , thanks for sharing !

  • http://www.buenosairestravelplanet.com Buenos Aires travel guide

    The tips that you mentioned in your article are a great truth! Thank for sharing them with us :)

  • http://www.grafikguru.com Best Web Designing Contest

    Just amazing… The way you said is really excellent. I too agree with you. Going natural way is the best way to design the organic site. Now I am going to design a site with the help of your site tips and then going to post it in a contest running by grafikguru.com

  • http://tgoden.com/ Abhilash Thekkel

    Nice collection. Great post overall.

  • http://www.citec.in/ Website Design Delhi

    Agami Creative Webstie is just amazing….nice collection. Thanks for sharing :)