Adopting The Art of Feng Shui in Web Design

Adopting Feng Shui in Web Design

Feng Shui, pronounced fung-SHWAY, is an ancient Chinese practice of aesthetically placing things in a specific way in order to allow positive Qi to flow through the environment. Qi, also referred to as chi or ch’i and pronounced in English as CHEE, is the Chinese word for that active principle within all living things. The literal translation of Qi is air or breath. has been hailed ” Feng Shui has been hailed as the Environmental Science of the 21st Century.

Adopting Feng Shui in Web Design


Feng Shui was historically used to orient buildings during construction, especially those of great importance such as temples or tombs. A building’s purpose could be determined by how it was placed according to the bodies of water or the stars. Practitioners use what they believe to be the laws of Heaven and Earth. Feng Shui’s literal translation of “wind-water” refers to Guo Pu’s passage from the “Zangshu (Book of Burial)”: “Qi rides the wind and scatters, but is contained when encountering water.”

Feng shui has actual “laws” that govern such things as placement and colour when arranging items. Because these “laws” are subjective and not objective, many people believe it to be a fad or a gimmick that holds no basis in real, scientific practice. However, there were reasons the Chinese came to perform these exercises in design.

Eight Diagrams
Image credit: Ba-Gua

Placement of buildings in relation to the sun allowed for the building to get warmer or stay cool, depending on need. There are many practical reasons for Feng Shui, in spite of its reputation as a superstitious methodology.

Modern Feng Shui

Feng shui today is different from the Feng Shui of centuries ago. It has different methods of rationale that are related to modern day life. With the Western movement of Feng Shui, many things have been lost in translation, allowing for inconsistencies and mistaken Feng Shui placement.

Modern Feng Shui

One of the items that seems to have been forgotten is that the zodiac can affect Feng Shui. Because your zodiac sign relates to the type of energy you have, it is important to remember what type of energy will be living in the space when planning how to Feng Shui your apartment.

Who Practices Feng Shui?

Countries that use Feng Shui include: China, the Philippines, Japan, Korea, Thailand, Vietnam, and the United States. While the old ways of practicing Feng Shui are observed in the Oriental countries, in the United States it has become an aspect of decorating the house.

Who Practices Feng Shui?

The basic principles change to suit the mood or need, which negates the energy flow. It has become a big business with people hiring themselves out as Feng Shui masters without knowing the complete art of Feng Shui.

How Does Feng Shui Fit in with Web Design?

Essentially, modern Feng Shui involves arranging items for maximum Qi flow. This includes size, shape, colour, and functionality. What does this mean in terms of web design? Think of it as improving user experience. It’s no surprise that a computer monitor’s screen is referred to as a desktop, since it holds folders, files and links that a person may need while working on the computer.

Each web site is like a new desktop: it has items that the website owner wants visitors to use. So, arranging these items aesthetically and with a sense of purpose is the first step in using Feng Shui for the webpage.

Think of the website in terms of an office suite. Most suites have an entry area where people get their first impressions. This is the landing page of your website. It does not need to have everything that you want the visitors to see, but it should have the essential items that will keep the visitor engaged and wanting to see more of the website. A good arrangement of links and information will create movement for Qi to flow through the website.

Each page on your website is like a cubicle in an office suite. They should be arranged for maximum efficiency, but also so that people can find their way. Providing links that will take them wherever they want to go, including back to pages viewed before, allows the Qi to flow through the website. Dead-end webpages that cause the visitor to hit the back button causes the Qi to become stagnant and can cause the visitor to leave the website without finding everything they need.

Simplicity

Too many items on the desktop can slow a person down when they work, especially if they are looking for an important document. So, why would it be any different on a webpage?

Fellswoop

We all love images that really draw attention, but too many can create confusion and reduce Qi. The same logic applies with long lists of links. Simplify as much as possible to maximize the flow of Qi.

Placement

The way a website is arranged goes a long way toward whether visitors enjoy moving through the site or whether they will leave as soon as they can. Logical placement of links and other graphics will allow the visitor to navigate through the website without becoming frustrated trying to search for what they want. For instance, contact information can usually be found in one of two places on a website: either on the top or bottom of the landing page or on its own page easily found through a link to that page.

Cooper Kids

For the company’s logo, think of the pages as being letters written on a company letterhead. Most companies put their logo at the top of the letterhead so that is the first thing the person sees when they open the correspondence. The same is true for website placement. Some companies prefer to put the logo at the bottom of the page, and if it flows with the rest of the page, then it is good Feng Shui. Remember, though, that wherever you place the logo, it should be in the same place on every page to allow for the consistency necessary to keep the Qi flowing.

CSS-Tricks

Sidebars, search boxes, and menus are tricky items to place. Depending on what type and shape the links take depends on where it should be placed on the page. Search boxes and menus should be placed where they are easily seen, typically in the upper right hand corner of a screen where it is out of the way. Sidebars can be useful for clarifying information, but too many sidebars can disrupt the flow of Qi.

Colours

Colours can set a tone for a business. If you provide a daycare service, having dark drab walls does not advertise an inviting environment for children. However, bright colours would not be appropriate for a funeral home. This same principle would hold for a website. It should be cautioned, though, that too many muted colours could cause boredom in the visitors, while too many bold colours can overwhelm the visitors.

The Famous 4th Street Cookie Company

Choose the Feng Shui colours that will compliment the product or service on the website, as well as compliment each other. Colours in Feng Shui are based on the five elements recognized by Chinese culture: Earth, Fire, Metal, Water, and Wood.

  • Earth – If your goal is to provide a look of stability or to nourish visitors either in mind or body, then light yellow, beige, and/or various earthy colours should be used.
  • Fire – If you want to convey high energy and passion, then use red, orange, purple, pink, or a strong yellow.
  • Metal – If you provide a service that is best known to be clear and precise in its practice, then choosing grey or white for the website is ideal. However, too much white space does not give good Qi. Remember, Feng Shui is a delicate balance.
  • Water – Water is life, and colours like blue and black provide a sense of calmness, purity, and abundance.
  • WoodGreen and brown give the sense of health and vitality that living trees embody.

Shapes

Feng shui uses the shapes according to the Chinese elements, also, so it is important to pay attention to them. Earth is represented in square, fire is the triangle, metal is identified as round, water with waves, and wood is the rectangle.

Yuna

However, it is not necessary to include every shape on a webpage to achieve harmony and balance. Mixing too many different shapes can also throw off the Qi.

Images

We all have those images that we love and think represent us and our ideas. Some have many images that fit that description. However, putting too many similar images on a webpage can overwhelm the space and stop the flow of Qi.

Gene's Sausage

It is better to choose one or two that not only represent fully the website and its message, but also fit with the colours and shapes on the website. It is also important that the images placed on the website are clear and defined. A blurry image can stop the flow of Qi.

Lines

Feng shui is based on nature and naturally occurring things. In nature, straight lines are rare. However, we have learned to live our lives along straight lines, and adding movement to the website in other ways allows us to encourage the flow of energy.

Racket

Where straight lines become a Qi problem on websites is when there are scroll bars. These straight lines can break the flow of Qi on a webpage. Keeping the text on the website simple will eliminate this worry.

Stillness

Stagnation produces bad Qi, but stillness is an important element to have in Feng Shui. A constant, still object such as a company logo or a home button in the same place on each page allows the Qi to flow and the visitor to know that he is still on the same website. It also lets the visitor focus on the other information on the webpage, rather than letting their eyes wander to new things that may take them elsewhere.

Fat Man Collective

Stillness also comes when there are loading issues with graphics or pictures or even the website itself. Sometimes, the graphics disappear due to these issues. This delay disrupts the Qi of the webpage. The whole point of Feng Shui is to keep the Qi moving, and loading delays stop Qi from moving.

Movement

Items that use the elements, such as plants or waterfalls, are essential items in real-world Feng Shui designs. They encourage the flow of Qi within an area. In web design, this can be achieved by using curves, fluid lines, and images of natural elements like flowers or trees that have been cut from their box and have their own shape.

84colors

Placement of items also adds to the fluidity of the page. This all promotes positive Qi. However, there is a difference between fluid movement and distracted animation. Setting an animation on a looping cycle can distract and annoy the visitor, causing them to lose the message the website is trying to deliver.

Essentially, the website should be usable. People understand how the back button works, and they would rather use the back button than have new windows open. With new windows, Qi is broken from that website and a whole new Qi flow is started. It makes for a very choppy website experience. Moving to new pages within the website allows the Qi to stay within the website, even when the visitor is navigating back to the previous page via their back button.

Typography

While some type fonts are lovely on their face, not all fonts are appropriate to use on the Internet. The size of the font is also important, because you don’t want people leaving your site because they couldn’t read the content as easily as they should.

DesignWise

Picking a font that is common for every person’s computer is important because if they don’t have the font you choose for your website, then they will not see the website as you intended, and the flow of Qi will stop due to the inconsistent format of the website.

Content

Content is important for a website, whether you take Feng Shui into consideration or not. The content should make a point, and not have so much “fluff” that the reader will get bored quickly. Most people reading content on the Internet initially scan the material to see if they are interested in reading the whole site.

Design Woop

Headers and sub-headers identify what the subject of the section is, while short paragraphs allow them to scan the document or article quickly to get the information they need.

Showcase of Website Designs with Effective Feng Shui

These websites may not intentionally have incorporated the art of Feng Shui into their website design but most of them have certain elements which has done well with regard of Feng Shui.

WELD
WELD

Apple
Apple

Carsonified
Carsonified

Tracy Apps Design
Tracy apps design

Aussie BBQ Legends
Aussie BBQ Legends

Marie Catribs
Marie Catribs

Komodo Media
Komodo Media

Design Disease
Design Disease

Threadless
Threadless

AdaptD
AdaptD

MailChimp
MailChimp

Adopting Feng Shui in Your Website Design?

Feng Shui is a balance of colour, shape, light, space, placement and movement to let the Qi flow unencumbered through an area.

How can you make Feng Shui work for your website? How would you use the elements on your website? Is there a website that you like that you’ve noticed follows the principles of Feng Shui?

Aidan Huang is a web enthusiast and ingenious blogger who loves all things design, interesting and technology. He is the editor-in-chief at Onextrapixel and have founded several other interesting blogs. Do keep in touch with him on Facebook and follow him on Twitter.

Comments

  1. / Reply

    the article is extremely interesting, as well helpful to preserve some really important features, while web site designing. All above mentioned items should be balanced indeed, so that to present one’s site in the grand manner, as site’s visual look is the first thing a website commer sees.

    • James Tan,
    • August 23, 2011
    / Reply

    Agreed! Very interesting article and therr are so much to learn from the complexity of FengShui. I’m a deep believer of such practices and spend much of the time adopting it in various part of my life. I think it’s good to consider it in web designing too.

  2. / Reply

    I think getting a balance with all elements on a website is very important, understanding how colours, layout, typography and content need to flow is a key factor; and getting this wrong can make your website look disjointed. I think with experience many of the factors mentioned in the blog become second nature, and you will start to see a unity between all the elements on your page. When you first start out designing websites I think keeping the site simple is always a good idea, once you build up the confidence and understanding then you can start experimenting with elements on the page.

    • PixelTunnelVision,
    • August 24, 2011
    / Reply

    As much nonsense as this kinda is, and as tired as I am of designers trying way too hard to make it look like they perform rocket science for 4 months to come up with a website layout (when we all know they usually do it in one night of just cramming Photoshop and using common sense), I have to admit that I found this to be an intriguing read. Well written, too.

  3. / Reply

    What a clever idea! The more I work with clients on their websites the more I realize that usability and approachability are the two most important aspects of design. There’s an emerging trend of hiring a “usability expert” to determine what should go where – and I wonder how much of their expertise is based on these same principals of Qi and energy.

    Very cool. Thank you for the article.

    • V,
    • August 24, 2011
    / Reply

    Interesting twist on a blog topic, but considering Feng Shui is about energy flow in physical space, it isn’t really possible to apply it to something as mundane as a website layout. Props for the creativity though.

    • Jen,
    • August 24, 2011
    / Reply

    Really interesting concept. I like how you explained what Feng Shui typically is and then attempted to translate that to a website. Some people obviously think that’s pushing it but your suggestions of lines, movement, typography, etc are not wrong.

    • Rana mukherjee,
    • August 24, 2011
    / Reply

    The article is interesting.

    • Pablo,
    • August 24, 2011
    / Reply

    I don’t want to be the party pooper, but Feng Shui is not science, web design is. You know, the golden ratio, rhythm, balance, proportion, focal points… and all the principles of design.

    ” Feng Shui has been hailed as the Environmental Science of the 21st Century “. By whom? and again, it is a pseudoscience.

    ” Feng Shui is a balance of colour, shape, light, space, placement and movement to let the Qi flow unencumbered through an area. ” The discipline that is a balance of colour, shape, light, space and movement it’s called design. Does Feng Shui teach us about additive synthesis of colour?

    If simplicity in design is needed, it’s been called mimimal design for a while. There are many examples of graphic design of the early 20’s, same style, and people in those years knew nothing about Feng Shui.

    Talking about Feng Shui in webdesign is like talk about acupuncture in medicine. Seriously, flow of energy?

    Regards.

      • Chris,
      • August 24, 2011
      / Reply

      @Pablo, you are obviously someone who are ignorant and have no understanding about the topic. Please research and read up before you comment. What you doesn’t know or believe in does not mean it is not effective or exist.

      We are talking about a “new and interesting” approach here away from the common talk about simplicity and minimalism.

      It’s just another way to improve web design, no harm intended. It’s like the belief and religion someone believe it. We should be respectful and learn from it.

        • Pablo,
        • August 24, 2011
        / Reply

        @Chris, I don’t remember have insulted anyone, please read up your comment to find differences. I’m not talking about beliefs, the article does. I don’t want to be bad-mannered with the author and appreciate the effort in writing the article but don’t agree.

        We are talking about the Feng Shui approach, and I think is not convenient. Why are you offended? Am I forced to think like you?

        To improve something, or to be sure that a technique is effective, it has to be tested. Are Feng Shui principles proven? Nearly they are, they are usability principles as well.

        Which are the points this pseudoscience adds to webdesign?. It seems to me that all this is just renaming the common simplicity and minimalism in a “new age” way:
        – Wow, fire colors provide passion and energy, and water colors are calm.
        – Wow, the logo should be in the same place in all the pages to be consistent with the Qi flow.

        Let’s rename usability as Qi flow, maybe we get more customers that way.

        Regards.

          • Chris,
          • August 24, 2011
          / Reply

          @Pablo, I’m not offended. I just want to emphasize that the art of Feng Shui has proved to be effective and adopted in various area of design, e.g. interior, construction, etc as the article have mentioned.

          It can be applied here in web design too. The art of Feng Shui maybe too profound for beginners to understand and there are lot to learn about. It is not wrong to say that the concept could be identical to UX or other Western design concept. Ultimately, our main goal is want to design something that works and is better for the web community.

          I’m not forcing you to think like me neither am I’m going to think like you too. After all, it’s good to share our differences in concept and ideas.

          Cheers.

            • Pablo,
            • August 24, 2011
            /

            @Chris, you’re right, we have the same goals to reach in web design.

            I recognize Feng Shui as one of the first approaches to a design based on mankind. It has a good point, but sorry, it’s not proved. To be proven it has to be outstanding in a test. As you may know, A/B tests for example prove or disprove techniques.

            I’m not expertise in Feng Shui, maybe the discipline has very good points to apply in web design, but these have to be tested. I don’ think it’s a East-West confrontation, but western methods include scientific, in the way to be sure they work.

            Regards

  4. / Reply

    Its awesome writeup.I agree with all the points.Keeping things simple is the best approach.
    Thanks for sharing.:)

  5. / Reply

    quite a unique post and really helpful

    • Sandra Edwards,
    • August 24, 2011
    / Reply

    So unique and very informative post. I enjoyed reading it and learned something as well. Keep writing nice article. Great job!

  6. / Reply

    Very nice blog. I love your ideas – simple and back to basics . Great ideas

  7. / Reply

    Thanks for the post, This was exactly what I needed to see.Good list, keep up the good work

  8. / Reply

    Never thought Feng Shui could be used in web design. Good idea.

  9. / Reply

    That is pretty cool, lots of these designs are great for inspiration makes me want to get back to work!

    • Ian,
    • October 14, 2011
    / Reply

    The Aussie BBQ site looks awesome! Very valid point about not writing fluff, get carried away with this sometimes, have to remember that people mostly just scan and get bored really quickly.

    • hily,
    • December 17, 2011
    / Reply

    说的太棒了,可惜我的英语不是很好啊

  10. / Reply

    Interesting Post! I really like the way you explained what Feng Shui normally is, and then translated that into a website. Thanks for this post. Very inspiring!

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals