How to Feng Shui Your Website
If you’ve seen any coffee table books on the showroom floors of places like West Elm (love), you may have encountered the term Feng Shui before.
The Japanese practice of Feng Shui (pronounced “f-ung sh-way”) encompasses the art of improving the energy of a home or space by ways such as decorating, moving furniture, or even assembling colors that correspond to the 5 Chinese elements.
There are many ways to Feng Shui your home (can one use it as a verb?) but does this have to do with your website?
When taken into account that a website is just a digital space, and ultimately we want people to enjoy their time spent there, it makes total sense to pump up the energetic magnetism by way of basic Feng Shui principles.
I’m going to share a bunch of tips in this post, and as I go through them, be honest, how well does your site stack up in these categories?
Also, keep in mind - I’m not a Feng Shui expert, just a humble web designer with a love for the energy behind design. So these adaptations on the Japanese practice are my own interpretations!
Take an Honest Inventory of Your Current Setup
Step one, assess the current situation.
Feng Shui includes many rules and guidelines. Some of which are: to never sleep with your head near a window, to take care of the front door space, and to coordinate rooms with specific hues that match the correct Chinese element in line with the room’s purpose.
These may seem kinda quirky, but the underlying energetic reasons make sense. Windows promote distraction, an open front door can let in all kinds of unwanted critters, and colors are known to affect our emotions.
So while there are no bricks and mortar for a digital space, I think there are a few ground rules that also apply here.
But first of all, take a look at your site as it is now. How do you feel when you see it? What is the experience like to navigate through it, read a blog post, or encounter the services pages?
Does everything feel inviting?
Recognizable as your brand?
Now check in for a technical inventory. (Your cue to whip out those analytics.)
Is the homepage banner getting any clicks? Are the ads on the sidebar carrying their weight? Are the pop-ups too much? Is the navigation clearly laid out? Is traffic going where it should?
All of these things are clues as to where the direction of your website flows, or how the energy map (known in Feng Shui as the bagua) of your site is working.
There are 5 main areas of your website that are prime subjects for a Feng Shui style tune-up.
Let’s dive into what these are so you can take note of how your website stacks up in these areas.
1.) The Homepage
Think of the homepage as the front door of the home. The front door is important in Feng Shui, and so it is with websites. A spacious, clean, and well-maintained homepage is like walking into a home. Right away there’s a clear picture of the overall tone, style, and message.
Take a look at any classic homes or manors of the past. Foyers were (and still are!) typically designed to guide your gaze toward something that the architect or designers wanted to show off, such as a stunning chandelier or a grand staircase. Homepages work in the same way.
So take note:
Where do you want your visitor’s gaze to go? (What’s the “grand staircase” of your site?)
Is there unneeded clutter taking up valuable real estate on your homepage?
Is your core message clearly shared?
Are their “doors” to get into other rooms from your homepage? (A clearly seen navigation menu or buttons leading out.)
And lastly, does your homepage stylistically represent your brand?
Homepage Tips: Utilize negative space and a “Z” pattern for points of visual contact. As we typically read from left to right and down the page, understanding this pattern is a great rule of thumb for designing your page and guiding your visitor’s gaze. For instance, maybe place that opt-in button on the far right nav, another piece of content at the left base of the “Z,” and so forth.
2.) The Header & Footer
I like to think of a header and footer like the front and back wall of a house or like two bookends that enclose the digital space.
Basically, a header and footer begins and ends the energy of the website. It’s like the bread on a PB&J. So utilizing these areas in a way that makes sense adds hugely to the stylistic design and flow of your site.
Optimizing the use of your header and footer for continued motion but also as a boundary is the way to go. This is like reaching the fence of an amusement park (a boundary) and finding a map erected nearby that promotes continued excursions through the park or even next steps away from the park (maybe it’s time to find the car and bounce.)
Either way, you can optimize your header and footer space by a.) keeping it clean, b.) putting useful information there, and c.) promoting next steps.
While the header usually includes the top navigation deck, logo, and announcement bar - all movements leading deeper into the website itself, the footer can include directions back into the site or also to points of interest away from it such as with social media links, Instagram feeds, or subscribe buttons.
That PB&J just wouldn’t be the same without the bread. (And now I also really want a PB&J…)
Header & Footer Tips: Have enough header and footer padding to ensure that your options aren’t crowded and feel spacious. Keep in mind also that headers and footers tend to show up on every page, so make good use of them!
3.) Balance Text and Images
Since a website is basically flat objects on a screen, the same rules apply with spacing and balance as they would if you were decorating a wall in your home.
Just like picking flavors in cooking, text and images should work together and not compete against each other.
As an example, something I see quite often are very large ads or blog graphics that require a bit of a scroll to get to the content. Or images within a content page that are way too small or massively out of proportion.
How would you display these objects if they were wall decor?
For written content, think about a magazine spread. Magazine stories often pair photos in line with text so that the text is readable without interruption. In this way, the reader isn’t disturbed by having to flip pages or scroll, but can enjoy the photo alongside the featured story.
If your site features banner or block ads with flashy graphics, create more space between them and any articles or text.
Or better yet (my fave option) create custom graphics that are stylistically in line with your brand, and use the same affiliate link underneath if this is something you’re allowed to do.
Text & Image Tips: Create layouts with text and images on your pages as if you’re decorating a wall or a magazine spread and creating balance between them. Get a clear view of the whole. Need inspiration? Thumb through a current magazine and eye their featured story layouts. (Yet another great excuse to pick up the latest issue of Magnolia Journal… )
4.) Clear Navigation
Navigation is so important, because it encompasses the entire topic of how easy is it to get around your site! Think of it like this, is your website closed off and confusing like the Winchester Mystery House? Or is it breezy and open like a classic beach bungalow?
A clear navigation should be simple, easy to follow, and make sense. Otherwise, how will your visitors know where all the fun stuff is happening?
You may know your way around your site like the back of your hand, but your visitor’s won’t. So make sure your navigation menus are easily discernible (as in, they definitely look like a navigation menu) and point to the top destinations on your site (keep it to 3-6 items, tops).
These options can be laid out horizontally, in drop-down columns, or even in a clickable hamburger menu. All in all, just find the style that works best for you (and that doesn’t feel eerily similar to entering a funhouse!)
Navigation Tips: Want to really put your navigation to the test? Invite a relative or friend to test it out and ask for their honest feedback. (Yikes!) With any navigation, simple is best. Less options in your navigation area makes it easier to get around and also easier for your visitors to make a choice on where to click.
5.) Colors and Coordination
Just like coordinating outfits, coordinating the colors and fonts on your site is a way to establish your site’s overall tone, mood, and mission.
This category is pretty self-explanatory, but in terms of website flow, consistency is key. Pick two to three of each and stick with them.
Pair fonts that will contrast against each other, like a sans serif and serif font. (Check out these Google Fonts). Let this text be easily readable and just like your colors, match the feel and consistency of your brand.
In terms of colors, pick those that flow together and that really vibe with you! To take it a step further (you Feng Shui master, you) there are actual colors that correspond with the 5 Chinese elements. For instance, if you have a health and wellness website, a hue of green would be a great color choice to incorporate as one of your main colors.
Color & Font Tips: Don’t have any clue on where to start with colors? A really fun exercise is to take a stroll through the paint color section at a hardware store and take note of how you feel around certain colors. Do any of these color cards match the way you want your site to feel to your visitors? (And then take home any sample cards you like!)
What’s Your Feng Shui Website Score?
With all of the options above, be honest, where does your website stand? If you can take each of the five categories above and rate your website 1-10 for each topic, then add them all up, where does your site stand out of 50? Double that number, and that’s your current website Feng Shui score percentage.
Knowing this score can help you improve your site more and more so that it’s attractive, clear, energetically magnetic, and enticing to visitors in a way that truly represents your brand exactly how you want it to.
I’d Love to Hear From You
Are you happy with the flow and feel of your current website? What is its Feng Shui score percentage? Are you a design master at home, but still struggle to incorporate design elements with your website? Share your biggest takeaways below!