The Feng Shui of Visual Design

As with all other forms of design, visual design begins with function:

• Why are you here? Where did you come from? What assumptions are you bringing with you? (ie. If most people arrive because they accidentally clicked on a flashing, moving link, they're going to assume you're a SPAM site, perhaps rightfully so.)
• Now that you're here, what am I trying to communicate to you? Do I need to fight your assumptions? Or do I want to play into your assumptions?
• Where do I want to lead you? What do I want you to have accomplished by the time you leave me?
• What information are you looking for? What are you looking to accomplish by the you leave me?
• What information do you already have? What information do you still need? What are the different possibles ways you're going to want that information?
• Where are you in your decision making process?

Functional issues in turn guide technique:

• What to emphasize, what to marginalize; which in turn dictate
• Relative positioning (top to bottom, left to right)
• Relative proportion
• Functional groupings and associations

And for each of these decisions, there is a process of maneuvering, negotiation, massaging, and refinement because decisions are never binary and are always nuanced. For every question that sounds like this: What needs to be separated out and easily ignorable? There are dozens of follow-up questions that caveat and refine the answer: To what degree should it be cut out and easily ignorable? In what situations does it need to be cut out and easily ignorable? In what edge cases does it need to be accessible and easily located? This in turn guides discussions about possible visual affordances for addressing these issues. For example, what about line weight? Thin and grey, thick and grey, thick and black, continuous versus broken, borders defined by negative space and text alignment, or the most extreme option, creating a block of dark color to cordon and contain content into a separate area.

Maintaining a state of Flow, moving Chi through visual layouts

All of the above deal with visual designs as largely static phenomena. However, there is nothing static about your experience of visual design. Your eyes roam freely and in interactive media, mice, keyboard, touch screens, joysticks, laser pointers, pedals provide additional affordances for you to roam the landscape of the design. In that sense, even a completely 'static', print newspaper spread is highly interactive if only in your mind...which means, visual design has serious issues of flow and movement to contend with before anyone can declare victory.

• Flow of negative space
• Flow of positive space

Are there any blockages where your eye gets stuck? If you were to pour water through the UI, would the water collect in pools where there is trapped negative space?

• What about weight and support? Does anything feel like it's going to topple over? Is that desirable? Does it push your eye in the right direction? Or is it merely distracting? Are there areas that feel over-engineered? Clots of heavy visual elements impeding exploration?

This is not dissimilar from how architects and interior designers go about laying our floorplans, fixtures, appliances and furniture. A couch stretched from wall to wall, straight across the middle of a room doesn't create a sense of space, it suffocates the space it creates and blocks traffic (moth mental and physical) through the room. A room lined around the edges with furniture like bleachers around a stadium doesn't create a sense of openness and airy space in the room, it creates a vacuum of negative space that oppresses the room with its inviolability. Of course, built into this are certain assumptions about what you want to accomplish with the space. Suffocation and barriers may be exactly what you want (prison wall). Inviolability may be exactly what you want ( a stage, an altar).

However, if you're designing a home where you will feel comfortable, where you can have friends over and they will feel comfortable, the design becomes, in some sense, far more complex.* Creating clusters, arranging elements around concrete functions: Group conversation area, private tete-a-tete chat area, personal reading area, office nook, dining area, etc...Creating groupings that carve out smaller spaces within a large empty space, without blocking the flow of traffic from one space to the next...the list goes on. At the same time, private spaces have far few demands to be impressive, cutting edge. Private spaces don't need to scale to deal with thousands of people, lighting systems, life or death medical procedures, etc . Each kind of design has its own challenges.

For a very readable illustration of function flow in interior design: Looks Great But Doesn't Feel That Way

*Aside: Perhaps this is why designing for the home remains one of the most interesting areas in architecture and interior design, although on the surface, it pales in comparison to the challenge of creating large, impressive, public spaces. Public spaces are used for a few, simple things. Homes are used for everyone, everything, all the time and so the combinations and possibilities are endless. The same goes for software design. Corporate websites are like public spaces. PIMs are like homes.

• For a specific example, see: AnApproachToTheLandingPage
• For a practical application of all this theory, see: CosmoStyleGuide, specifically: CosmoStyleGuide#PreviewButtons

-- MimiYin - 05 Mar 2007