How Feng Shui Taught Me To Be A Better Developer

7 months ago

Design and Harmony

Apple is not worth 680 billion USD (as of Feb 2016) because they are efficient. It's not because they serve great team lunches. It's because they get it. They know how to design, and they know how to execute. They know how to put a product together that makes you feel something.

It's music in your hand. It's sand between your toes at the beach. You feel it.

Good design invokes emotion, and yet, carries something more with it: a message. The message is subtle, honest, and derived from the overall experience.

This is a balanced and valued design approach that almost any company and brand can leverage to get themselves into position in front of a customer in the right place and time and something I have strived for with Smoke.io.

When dropbox launched, there were already 14 competitors doing the same thing.

Dropbox, however, knew how to make something work intuitively and naturally. They also had a great viral marketing strategy, and just the right incentives (250mb of space) to get the 'share' button to actually be used.

But still, their balance of usability and seamless engagement was a musical treat. People were getting setup on dropbox like it was a public utility and they seemed to demand it on any new PC or Mac they purchased!

Balance in design. Balance in function. Product positioning. This stuff matters.

It makes or breaks.

But it's not just simple design work. It's not a matter of knowing photoshop or illustrator better than the next designer. It's more 3-dimensional than that. It requires texture and thought, inner and outer exchanges of information and feelings.

This is a soft-science. It's why you pay the branding guy all that money. He has some bits of information and knows how to connect dots that other designers don't even see.

Enter Mobility.

Mobile apps. They are not going away. The world is changing. Our design is behind the times.

Mobile apps require specific thought and specific movement. They have a flow-expectation and they require special attention to detail. Every pixel counts. Thumb-arrangements, movements, etc. Slide up or slide right. Positioning of interactions.

All of the details that keep you up at night. They are exacerbated in mobile apps.

Feng Shui is simply the arrangement of things so that your environment is comfortable, balanced and harmonious.

Many of you probably think of it as an Asian gimmick to sell interior design services, or as a New Age fad, but it is in fact a great way to improve the way we interact with the environment. Just like great UI (User Interfaces) created for web applications, good feng shui can create a more pleasant experience in a home or space making you feel more comfortable, happier and productive.

While normally Feng Shui applies to building and interior design, it can be applied to many aspects of our lives from our workspace to web design.

Like most Front-End ninjas starting out...

...I would design a site for desktop first. Most of you will recognize something like this in their CSS files:

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

Designing top down will work but the website will load slower on a mobile device as the media query will be initiated on screens smaller than 768px.

Now you may be saying to yourself:

"Well yeah ok page speed, that makes sense but how does the ancient science and art form of Feng Shui come in?"

Well. . . If you design top down with CSS such as above, you will find that all your columns stack nicely on mobile and everything is neat and tidy. Job done. No need to learn the art of mobile design.

Not quite.

What you will miss by doing this is the vast amount of styling that can be done on mobile to draw your customers in and make your website as unique as it is on desktop displays. You will get lazy and just be satisfied with simple stacked divs and an acceptable mobile design.

I recommend getting to know a framework such as Bootstrap and CSS techniques such as FlexBox and Grid. Bootstrap is becoming a standard in responsive design and can help minimize the time needed to create a fully responsive website and Grid and FlexBox has become standards in any front-end developers arsenal.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Ok, now back to Feng Shui.

The first lesson I learnt was that Feng Shui was not just about moving some stuff around so you feel good, but a way to use color psychology, symbols and other effects to essentially master your life and learn how to be happy...

...The more I studied these aspects the more I realized how these techniques can be applied to web design to make the person viewing the website feel happier, more engaged and more likely to convert into a paying customer or daily active user.

Is it ethical? Heck yeah..

So lets go through a few of these techniques and how you can apply them to your responsive designs and UI's.

Color


Feng Shui Color Chart

Color is not only seen with the eyes but interpreted by the brain as a vibration at a specific frequency. These frequencies can directly effect your intentions and well being. So understanding these colors and what effects they have can directly increase conversions and lead to a better user experience.

For Smoke, you see light colors and predominant Greens. Green gives a sense of knowledge while white brings out creativity. This however can be extended to mobile design, for a dating website that has a predominantly red theme, red representing love, passion and stimulation, I may consider replacing red with pink for desktop devices.

Why?

Well, Pink, while less arousing then red, would allow for a more intimate experience focusing more on love and romance. This would psychologically affect the user experience on desktops, where users are more likely to spend more time on the site as opposed to mobile users looking for a faster connection to a potential partner.

Symbols


Font Awesome Fonts

We all know how effective symbols are in web design and while designing for mobile.

Firstly, symbols can be extremely effective at portraying content in an easy way that can greatly clean up your mobile design. From the infamous hamburger icon on the top right of Smoke.io's Nav that completely replaces the entire nav bar with a simple drop down for mobile, to the icons used that display additional information only when the viewer needs it.

These devices can greatly increase user engagement and lead to a better user experience on mobile.

Designing these elements up front for mobile may also lead to you being able to use some of these techniques for larger viewports and keep the site clean and tidy on all devices. You may miss some of these techniques if you simply scaling down from a site designed for desktop.

Every symbol must have a meaning so choose wisely otherwise you may throw your visitors off.

Font Awesome fonts or custom SVG's have become a web standard as scalable vector icons are responsive and you can apply other css effects to them just as you would any other element.

You can also use symbols to reinforce an idea or psychological trait you are trying to get out of your visitor. Going back to the dating website example, pairing objects such as two gold birds or two pieces of matching jewelry in a photo on the landing page can reflect companionship and a "lasts the test of time" mentality in your visitor. So don't think symbols are only icons. They can be embedded into pictures, headers or even hidden within your logo. The Smoke Logo uses symbolism to easily identify as a cannabis brand while also using a speech bubble to emphasize exactly what type it is. (Social Media)

Yin and Yan


John "Jammie" Reynolds performing balancing act circa 1917

Yan is masculine, bold, minimal like a clean bootstrap theme with very little done in regards to custom css or java elements while Yin is feminine, relaxing and dense similar to old school sites that have way too many ads.

Creating a balance between these two can be essential to creating a user experience that translates well to all your visitors as apposed to only some visitors that may have the same imbalanced chi as your site.

Keeping a mobile site balanced can be extremely difficult, especially for mobile when you will most likely have the viewer swipe scrolling down the page. The general rule of thumb would be to have a different color background section for every 'body' of content.

This is more of an art than a science. Symmetry and parallax effects can be a great tool for this, especially on desktop, to keep the user engaged. But be careful when scaling up as you will have to carefully arrange these sections (using order: or color changes) otherwise you may find your color sections being all over the place, overlapping other content and clashing with the overall design of the site.

An easy way to do this is to keep a responsive.css file linked into your HTML and keeping changes specifically regarding style changes between mobile and large screens in this file.

Movement


Nissan eye tracking report

The art of Feng Shui in regards to movement is all about directing your visitor towards a goal such as signing up to your mailing list or buying your product.

So keep in mind the elements on a page that do not either reinforce your authority on the subject or invoke the emotional connection that you are trying to connect to.

Are they essential?

...If not perhaps they are better off on another page or in a model.

During your mobile design you may even want some elements to rather not be displayed (by using display:none; in your main css and applying display:block; or display; flex during a media query when upsizing so a larger screen in your responsive.css file)

For instance, you may have a table displaying baseball results and on mobile display only the end score, teams that played and dates and once the screen is larger display the home runs per inning and other stats.

On the dating site perhaps having a simplified search for mobile while on desktop allowing users to define their searches with much more information.

The Isreali start-up Feng-GUI will even go as far as analyzing your site and doing a eye tracking comparison, giving you a heat map of the most attractive parts of your page, and various reports telling you where the visitor looks and is most likely to engage in your site.

Remember on mobile things need to be simple and effective as the user is not used to having to type or select many options.

The site should be designed with a goal in mind and way for the user to get to that goal without having to scroll through a bunch of fluff.

Lets take a look at Dropbox.


Dropbox website - August 2010

Dropbox, the successful file storage and file sharing platform, first started out as a minimum viable product. Their website just had a logo, sign up form and an animated video explaining the product.

These 3 items where all they needed to become one of the larger boys on the block...

Why?

Because it was too the point and engaging. The color and minimal style, while perhaps a little too Yan was comforting and gave the visitor a sense of trust.


Dropbox mobile website - 2015

If you take a look at their website now it is remarkably zen. On mobile the main graphic and top buttons are not displayed at all and there is simply a short description and a signup link.

As you scroll down the logo removes the "Dropbox" wording and is simply the Dropbox symbol. This keeps the clutter to a minimum and allows the visitor to stay focused on the various sections.

Each section is in the same format (Heading, Image, Discription, Symbol) all using a sparing amount of pastel colors creating a sense that the software is easy to use (Pastel colors in Feng Shui are associated with child like playfulness).

At the bottom of the page is a bolder sign up button. The flow of the site has led the visitor to this button while reinforcing the psychological responses

Dropbox wants downloads from its visitors while explaining the benefits of their software.


Dropbox website on desktop - 2015

When scaling to desktop you can see that there is now a full sign up form asking for your name, email address etc while a graphic image is displayed to take up most of the space. The image is minimal and keeps the landing page uncluttered and balanced. The rest of the site is similar to mobile, allowing the eyes to clearly distinguish the content blocks while leading the user to sign up.

Often websites want too much and don't realize visitors are most likely only willing to be drawn to one place on the site. So next time you think you need to list all your pages in the top nav bar (like the "about us" or "terms and conditions") consider moving those links to the bottom of the page for only those users that are really interested and seeking that content. Chances are those pages only get read by visitors that have already engaged in your primary goal.

The Workflow of Yesterday

Below shows where we have been. Its the process that most creative agencies would take a business through, in order to meet their clients' expectations. Logical, thorough, and holistic, yes. But it's predictable and doesn't necessarily hit the mobile target.

The flow of information for outside parties must be captured. So this is necessary, but at times, perhaps not.

There are many challenges with accepting or adopting this as the flow at all times.

The curse of knowledge (Malcomb Gladwell's "The Tipping Point") invokes insider information about the product or service that is truly impossible for the outside world to understand.

This process is commonly used a template-minded approach for companies to work together with agencies. In this, you typically have the visual design done 'by committee' is the worst possible way (in my opinion) to design a product or service.

All of these steps and planning and strategic thinking minds can muddy the waters and turn a brilliant and 'simple' concept into something of a corporate missions statement, which says nothing.

The old adage of marketing states, "If you have said 3 things, you have said nothing".

Visual design after the known facts from the insiders can be poisoned.

So what is the alternative flow?

Let's start by the notion that customers experience your product and service in a flow of experiences, rather than a logical informative process. It's not going to happen the way you want it to always happen. They nibble around the edges. They don't go into the right funnel or door first. They make mistakes and have preconceived ideas about you.

Consider the core flow of information to the customer's mind, illustrated below.

The notion of information flow being the primary and central theme is short-sided. What about the harmony of the Feng Shui mantra, in it's impact on the psychological?

It's more important to impact the customer than it is to profit from the customer.

After all, the greatest weapon in the history of the world is not a nuclear bomb, it's an idea. A single, powerful, world-changing idea can overthrow world leaders, change countries, start or stop wars, and improve or destroy the lives of a billion people!

Ok so back to balance... harmony... all of that stuff.

Try this instead. It's my own recipe for the core of the app experience, based on some known tactics, and some of my personal experiences.

  • Personas | Use Personas to Experience the user personally. Personas are used often to imagine your user experience. They are completely fictional characters created from the "expected" behaviors of your target users. They give you a centerpiece of conversation to make designs and decisions.

  • Priority list | This is something you can't live without. It's really important to understand from the customer's perspective, (not your client), what is their most important use case? What do they want for themselves? How does that priority shape the experience?

  • Scenarios | Scenarios provide a flow of steps and lead to exploring deeper into how a persona will be experienced. This flow allows you to design a UX that suits your defined personas and the goals they want to accomplish. In this step, you have to input the Feng Shui you've learned and make it noticeably evident to your constituents. They may need hand-holding. They will try to insert their priorities and dismiss the customers' priorities. You are an advocate for the customer, the user. The one who ultimately decides who lives and who dies in the marketplace. Do not let go of that ultimate responsibility.

  • Feelings | Invoking peace, harmony, balance, and sustain that throughout the user experience. Consistently remind the user who you are, in 'how' you make them feel. “I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.”

  • Experiential Maps | Imagine and document all the possible outcomes or decision trees for a single interaction. Experience maps will chart each step that a persona is most likely to take using your app. These will help communicate all the emotions surrounding your UX. They reveal balance and feel.

  • Blue waters | This blue-water-test is derived from the 2005 book, "Blue Ocean Strategy: How to Create Uncontested Market Space and Make Competition Irrelevant". This piece of amazing business literature was focused on the notion of moving your customer/user experience into blue waters, escaping the bloody red (blood from competition fighting over eachother) waters. They stab and kill, and blood fills the water around them. Swimming away from that, finding a clear, blue ocean area to swim in, this is the goal of a differentiated business model. I know this digresses from the Feng Shui thought process, but it ties in nicely here, since your customers will never experience you if you blend into the noise. You must design with the differentiation in mind. What is the core and dominating voice that the customer hears? It should be central to the design and flow of the app. DO NOT BLEND IN.

Last Words

Thinking mobile-first and having the concepts of Feng Shui in mind will help you focus on what is important for your website and keep your website clear from any content that distracts from your goal.

Keeping your own balance can also help. Reviewing sites that you are working on after a good nights sleep and decent breakfast is always a good thing. As a fellow code monkey that loves coffee and coding late into the night, I find my balance can really be off sometimes and reviewing projects this way can help you see these imbalances.


This post was originally a guest blog I wrote a few years ago for ZipTask which is now closed down, and the blog is no longer alive... It is still just as relevant as ever and so I have adapted it and posted it here so it can live on forever...



Get 4.2 Free Smoke Power On Sign Up To Start Your Journey On Smoke! The First Cannabis Community That Pays You To Post And Curate Content You Love..
Sort Order:  Trending

Well, I have to say that after complaining about the quality of posts here recently, I am really happy you came out and reset the bar for the platform.

... great post ;)

What I like about the blend of form and function is how it essentially forces a mind to consider not only purpose but the user experience. The design is much like dating, getting into a relationship and then developing a compelling story together to hold the attraction past the honeymoon. An idea of future life is not enough, there has to be the follow through of practical application, a life together.

Very enjoyable read, thanks.

Awesome post!

I still remember installing Dropbox (I was user 1028, how’s that for geek cred) and how it just worked, across different computers, was a true “Holy shit moment!”. Made Box look like something from a decade before.

And that note, I’m totally “Lean methodology” a type and when not sure A/B test. MVP, ship fast, fail hard, iterate.

Feng Shui was something I explored for a brief period in life and while I still apply some aspects of it, I’m stoic. Although I have ambitions to explore several (Asian) practices, maybe Feng Shui will cross my path again.

I don't necessarily follow Feng Shui in my life, but I am a very organized OCD-prominent person. I need order, structure and a to-do list in my life to stay on track, to keep the flow going and, just in general, to be efficient.

I have pretty strict schedule I keep (from being online, planning the food menu in the home, to chores around here and everything in life) and if something, or someone, demands my attention off schedule I tend to get a little frazzled. I'm in no means a controller of others' lives, but when it comes to me, my life and home.. I need permanent structure and work ethics.

Man, you posted this at a weirdly relevant time for me.

I'm currently learning web dev through Udemy - just finished HTML, CSS and an older version of Bootstrap, now moving on to a session of Bootstrap 4, JavaScript, and then eventually back-end development.

Your Feng-Shui take on this is quite inspiring for an aspiring web developer like me.

Thank you for sharing this with us, @stoner!

Balance and purpose. is really essential in any thing we do in life but we need attention too to support that.. Thank GOD your a DEV we dont have to suffer like other platform....keep smoking sir.

Great post @stoner. I find that in anything we do in this great adventure called life, balance is needed and the quicker that balance is found, the better the life can be.

Never been into Feng Shui, but I believe that life is all about balance and purpose.

this is off topic but it is important. I am wondering if there is a workaround for when we try and upload images and it does not work? Everytime i drag and drop or select an image to use. it loads to 100% but the maekdown never appears for inserting the image. i know its kind of a small thing but it has been a recurring issue since i joined smoke. currently i have to do images manually by first uploading to another website then posting that link in markdown.

I have written a post on it before and saw that several others are having the same issue.

sorry for the off topic comment but since there is no messenger this is th only way i know to report bugs.

·

you can use an external image host service like imgur then link it here using markdown

·

I use Imgur as a work around.

Nice and informative post.
I have recently joined this platform.
Will you please send me the discard link of this platform.

·

Welcome to the platform @mubarik, here is the discord link (https://discord.gg/nhaCAxJ) you ask for. Looking forward to see some awesome posts from you. 🌿

just too much to learn and prior to the color chats you are right, it can really be applied to our daily lives.
i have made up my minds to learn how to code and dev, i noticed I'm in love with blockchain with out the necessary skills needed, so i will be going through full chain and i think i will have to read and learn more about the famous Feng Shui to make me in fact a better more Renaissance person ☺

A very enthralling theme, I appreciate your in-depth study, complete with a dissection of every aspect of the topic, one at a time. I also appreciated the level of vulgarization used and the care put into presenting the information in laymen's terms. I am not surprised you are found to be in possession of such ancient wisdom. ;) Thank you for sharing it with the community, it's always rewarding for scholars to exchange notes...

Best post of Smoke.io so far! Hands down for @stoner.

Simplicity is one of the most underated feature blockchain innovators forget. Most stuff we are able to do now are quite cool, but the UI sucks most of the time. The most successful designs all have an element of simplicity in them like what Apple did.

I can see this fengsui in the Smoke design. The colors are well balanced, great job on this smoke team.

Heil @Stoner again for this post!

“I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.”

Exactly! I work with elderly people, those with Dementia.......this is exactly it - the memory of words/actions are not retained, but there is continuity in the relationship through TLC :)

Excellent writeup! I had wondered about the dates on the dropbox screenshots, but your last para explains.

I'm gona borrow the 'color chart' 🔆 .

I would just pass by this post and would not comment, but this post is really amazing and very interesting. and I advise everyone to read the post to the end.

This post just tells me that we have a bad ass creater, that knows HOW and WHY he are doing the things he does. Awesome, and really interesting blog post. Now it lives forever.

·

I could not have said this any better. Exciting :)

As a non nerd I never take much thought into how a website is designed.. I just look at Does it work? ...is it easy to use? I knew about using certain colors to evoke emotion.. but you're taking it to a whole new level.. Kudos 👍👍

wow amazing long post really nice and learning post.
resmoked

amazing post really nice..

I've always found meditation to be a useful tool in tough times. Thanks for sharing with us.

l like your post because your post learing and powerfull.resmoked

I just bootstrap the scaling part of my websites.

Wow, this is an article to read and save in the favorites bar to read again in the future. You're at the top of your game.
I must say i like feng shui and i think the more simple and functional is a site/app the more chances of sucess they have
In that aspect i would make a little suggestion regarding the design of smoke.io to be "cleaner" that would be to pass the tabs rewards, wallet and settings to the the side menu. I know probably there isn't much space left there but maybe there could be some collapse button there.
My suggestion:

Sem Título.jpg

Probably you could put "wallet" there too, but i would also like to have it in the side bar because sometimes i'm reading a post and i would like an easy acess to the wallet through the side bar without clicking the icon of my account and then clicking the wallet button.
Its just an idea and i have a couple of more, need to sit down and write a post about it ;)

I LOVE your posts! Initially I was going to tell you below your last one, however didn't want to destroy the wonderful number of 66 comments. :)

Now that I finally realized that you're the founder of this blockchain: I found myself the best network ever! I am so happy.

My spirit bows down to your spirit.

helpfull post tnx for share resmoked