Designing Flow

How Good Website Design involves Rythm and Flow

If you have a great office space that has been professionally designed or have had the experience of walking into a home or restaurant that just feel awesome you have probably experienced Feng Shui.

Feng Shui is one of the Five Arts of Chinese Metaphysics; a system of harmonizing everyone with the surrounding environment. The term feng shui literally translates as “wind-water” and is a practice where observation of appearances is arranged through formulas and calculations. The feng shui practice discusses architecture in terms of “invisible forces” that bind the universe, earth, and humanity together, known as qi. When a workspace or environment is designed using Feng Shui it feels correct to the visitor in relation to these invisible forces.

Having something feel right is not always easy in website design and development. While we are not dealing with furniture, plants and the flow of people through a space, we are dealing with the navigation of a visitor through the information on a website. How do you design this type of information flow and rhythm. Well, training and experience are good starting points but there are a few techniques to follow and understand that help with creating a website that feels right.

A website is a visual experience so we have to design for how the eye will be drawn through a web page to the right type of information. We are dealing with a new canvas now that includes tablets and cell phones, so the classic rules of structure have changed. An example is how people scroll down a screen with their fingers to find more information. Five years ago this was not a common experience.

Well designed websites also start with understanding the personas using the website. This is a critical planning step that clearly identifies the people who will be using the website and what they are looking for. At the start of every design you must understand what the visitor wants and what will entice them and help them find the right information. At Spincaster we use personas, audits, charts and creative boards as part of our user experience development. This isolates the right information and identifies proper calls to action for each user. Then it helps plan the delivery and design of that information on the page.
Whether you are aware of it or not your eye follows a pattern down a page. From left to right and back again in a Z pattern or back and forth across a page in an F pattern. This depends partially on our habits and also on the text and design elements used in the page layout. As a rule of thumb pages that are visited first have less text and more visual prompts. As a visitor drills down to more specific information they will slow down and start to read the content more carefully. Thus they move from a browsing Z pattern of interaction to a more classic reading across the page F pattern.

As we aware of what is important (having asked the right question in our planning stage) we design for this user experience and create a compositional flow through the page and website in general. We us the textual content, imagery, negative space, and our understanding of balance and flow to create visual cues that draws the visitor along the right path. Like a good story we bring the visitor to a proper conclusion and deliver the information they are seeking. It may be a product detail, a sign up, a purchase or a phone number.

Creating a sense of harmony with a clear purpose also involves creating focal points on a website page. These design elements emphasis the right response for the visitor. If we have a head-shot on a page it is important to have them looking the right way. You will instinctively look in the direction of the face so we use this as part of the design. The use of page elements like arrows, diagonal lines, buttons, vertical lines, accents, negative space, etc… all help to influence the final outcome of the page. We can stop your visual flow, pause it, back it up and move you forward. This influences your experience and provides a sense of harmony. Or more commonly referred to by our visitors as “what a nice website”