Visual Movement: Flow in Web Design

In fine art, visual movement is used to guide the viewer through the piece. Lines, shapes, color, depth and hierarchy can all be used to guide the viewer from one point to the next – at a glance. Visual movement is more commonly known in the graphic design world as ‘flow‘.

Creating flow in web design can be a tricky undertaking because unlike fine art subjects, web designs generally have separate pieces or elements they may not have a direct relationship with each other. Web sites also have more complex elements like navigation, text blocks and dynamic image galleries that usually break up visual movement. But, building visual elements in a harmonic pattern using design elements such as; type, line, contrast, color, and type, these items can be connected together to guide your users on a path through the site.

Basically, its like playing the board game Candyland.

Your user generally starts out with the logo in the upper left hand corner then moves their way down the path until they reach King Kandy’s Candy Castle, AKA, your call to action. Flow is important to any website because you want your user to reach the goal you set out for them quickly and easily. The faster the better. Visual movement will also help the user to make decisions and perform complex functions with little direct instruction.

The following are great examples of websites that have managed to achieve visual movement. They use or combine many different design elements from line, color or type to create a visual flow and guide the user to their ultimate goal.

allday.cc

The image of Alastaire Allday is leaning toward the right, initially guiding your eye to the right. After a brief stop there you are drawn below to the lower text and then drawn to the bottom right corner where your asked why you need a writer.

andreamann.com

Similar to allday.cc, the image of Andrea is facing left guiding the eye to the large, colorful title, then below to the audio player. The background, header and footer are dark to allow you to focus on the content in the center of the site.

chevelleinc.com

The call to action is buy the album. The square shape of the forest with the aliens walking toward the UFO allows you eye to move from left to right, from the large dark square to the open light space where the album floats in the upper corner. Great use of shape and color to create the visual path.

design977.com

Awesome use of visual hierarchy and color to guide the eye. The logo, the caption and the navigation create a triangle. The large colored blocks that frame each element, lead the eye in a slight zig zag pattern downward from the upper left corner down to the navigation.

dropr.com

Dropr has a very clever design. They have combined their domain, animation and artwork to create a downward movement, a drop if you will. Everything above the boxes is geared toward the downward motion, from the rain drops that are falling to the unique, tall text where all these elements converge on the boxes below.

m1-design.de

The bold orange arrow points downward, but the eye is attracted upward as you follow the orange and gray stripes vertically upward in the background through the nav and logo. The contrast of gray and orange stripes creates a center path for the eye to follow and all other elements surround the line supporting its importance. Plus, as you move you mouse around, all the little images flow around the line like its a center beam. Great combo of visual flow and actual movement.

mademyday.de

The large orange circle grabs your eye as soon as you load the site. Then the circle lets the type and text blocks do the rest. This site has a sharp left to right direction at the top, but then the eye follows the copy all the way down the right side with a few sharp right turns on the way. The dotted lines combined with the buttons to the right of them catch your eye as you browse each paragraph, sending you and your mouse quickly to the right so you can read the rest of the article.

moet.com

Once you enter the site after declaring your age, and after the sparkly animation ends, you’ll get a nice visual of Scarlett Johansson holding a wine bottle. Everything in the image is aiming your eye to the right; Scarlett is turned to the right, both arms are pointing to the right, the wine bottle and its spray are pointed to the right so something important must be happening over on the right side of the page.

newdealfestival.org

This one is easy, you’ve got a bright yellow stripe that moves you from the upper left to the lower right where the navigation and sponsors are located. This is a good example of simple and bold movement.

standrewsmtairy.org

No matter where your eye is when the site loads, it almost instantly shoots right to the large brown center stripe. In that stripe are a couple little hidden arrows that continue to guide your eye to the right where you’ll see the worship with us message. The call to action (come worship with us) is pretty evident even though it may not be the first thing you see. It’s not a bold statement, but the cold colors, lines and shapes guide you right where you need to go.

stephencaver.com

This site uses shape, type and cold contrast to guide you where you need to go. Your eye naturally splits this site into three areas because the top layer has very low contrast, the middle layer builds a deeper contrast with type, and the third layer uses dark boxes for an attention grabbing contrast. You eye can’t help move directly south to the navigation once this page loads.

teamexcellence.com

The charts and graphs of the main images are blatant pointers. The bright colors and bold contrast instantly grab your attention and then move your eyeballs to the upper right where the low contrast navigation, login and contact buttons are hiding.

waelsaad.com

Here, you basically have two important areas, the contact button and the portfolio images. This design makes use of line to connect these two elements visually and allows you to move your eyes back and forth from one place to the other. As soon as the page load, my eye follows the logo down to the image boxes below, then after I am interested I follow the lines back through the logo over the contact button. Brilliant use of line, color and contrast to create visual path.

webtalents.pl

This is a really great, unique web site. A little 580 pixel width image can’t do it justice so you’ll have to navigate over and take a look at it yourself. This site is a horizontal scrolling site that connects each piece of content with a wavy dotted line, the path of the spaceship. The visual movement here is pretty self explanatory, but a really clever and unique way of taking advantage of horizontal scroll.

worryfreelabs.com

WorryFreelabs combines all of its elements to create a giant triangle pointing down. Each section of the web site takes advantage of this technique as you scroll down between each separate content block, forcing your eye and you mouse to continue scrolling down. Besides the great visual use of space, this site offers some truly awesome typography.

Related Articles:

Rembrandt, Master of Eye Movement

Understanding Visual Hierarchy – NetTuts

How to Use Visual Hierarchy in Web Design

Principles of Design: Movement

The Principles of Design

Graphic Design/Principles of Design Wiki