Think of your favorite song. In all likelihood the sound rises and falls throughout, the pace quickens and slows, and the rhythm and melody lead you to hear chords and notes that are about to be played. Music has a flow that guides you from one moment to the next. This flow can impart different emotions and have you feeling different things at different parts of the song.
In fact, without that flow, there is no music.
Visual design has a flow as well. You have something to communicate and you want your audience to take in different parts of your page. Some elements of the design are more important and you want to make sure they’re seen right away, and some elements of the design are best seen after having first seen a different part of the design.
You also want to do what you can to keep people inside your design and not let their eyes fall of the page or screen. Just like a river carries what’s in it along it’s path, you want your design to carry your audience through it and guide them where you want them to go.
What is Design Flow?
Design flow (also referred to as movement or direction) is the way the eye moves or is led through a composition. It’s a way for you to control where someone viewing your design looks first and a way to guide their eye where to look second and third. It gives you a mechanism for making sure key information is seen.
Typically in a design you’ll create what’s known as an entry point. Something that stands out from everything else so that most people looks at it first. From there you’ll create lesser focal points that stand out, though not as much as the entry point. These points will be the most important information in your design and through different techniques you lead people from entry point to focal point to the next focal point.
Done well your audience will flow from point to point with a momentary rest to absorb your key information.
How to Control Flow in Design
Our design elements offer visual cues about the direction the eye should follow. Some of these cues are obvious. It’s hard to see an arrow and not look in the direction it’s pointing. Some of these cues are not so obvious. Repetition in color, shape, and size create a path that can pull you to move in a certain direction.
Some obvious directional cues include:
- Arrows – again it’s difficult not to visually follow the direction an arrow points
- People/Faces looking in one direction – similar to arrows when we see a person facing or looking in a given direction, we tend to also look to see what they’re looking at.
- Perspective – creates strong visual cues to follow. By it’s nature perspective creates a direction that begs to be followed. If all roads lead to Rome, you’re going to end up in Rome at some point.
Obvious directional cues don’t need much explaining. You want someone to look to the right you draw an arrowhead pointing to the right. You want someone to look at a certain spot you create a vanishing point in that spot.
Less obvious cues are more interesting and you’ll need to use them. You can only use so many arrows or have so many images of faces on a page.
Let’s start with the idea of creating a hierarchy of focal points with an entry point sitting at the top of the hierarchy. Consider Kandinsky’s Composition VIII seen below. The large black circle in the upper left is the entry point into the painting. It’s the first thing you notice. It’s larger and darker than anything else on the page. It holds more visual weight than any other element in the painting.
Your eye possibly moved on to the circle in the lower left and from there started following some of the other circles along the bottom. These smaller circles carry less weight than the dark one we started at, but they still carry more weight than many of the individual elements in the painting. They pull you toward them and once there your eye rests momentarily before moving on to the next.
Lines and curves are another way to lead the eye. Look at the green circle in the lower right of the painting. There are a number of lines near it that pull your eye up through the painting. The long line to the right of the circle meets with other linear shapes that are parallel in direction. There’s a good chance they pull your eye to the top. Maybe to the point of the triangle.
To the left of the triangle near the top are two curved lines with some perspective. They lead your eye to the light blue mass between the triangle and our entry point circle. In fact the more you move around the painting you can find lines and curves that guide your eye from one element to the next.
I mentioned that repetition can create flow. We see repetition in the circular shapes and in blue, yellow, and green color. The repetition creates implied lines and curves between elements for your eye to follow.
One last point before we leave the painting. Another thing I mentioned above is the idea of keeping people inside your composition. Look anywhere along the edges of the painting and you’ll find something that leads your eye back into the painting. Kandinsky does a wonderful job of keeping us inside and moving from one area of the painting to the next. It’s a great example of compositional flow.
Using Space to Control Flow
Space can imply flow in a variety of ways. The space between elements creates paths of emptiness much like footpaths through a forest of garden. An element with visual weight calls for you to rest your eyes on it. Space gives you room to move around elements.
Active (asymmetrical) space is dynamic and creates motion and flow. The space emphasizes a direction. Your eye initially takes in the whole design and then is drawn toward the positive elements and away from the empty space. A single element in a sea of empty space sits in the foreground implying that the space recedes into the background creating a direction toward the back of the design.
Varying the space between a series of elements can be used to create a rhythm and a motion in those objects. Consider the image below. The space between the lines implies a movement to the right where the lines begin to get closer to each other and come to rest.
Creating Harmony in Design Flow
It’s important that the flow of your design elements work together. You want the flow of individual elements to be in harmony to create a compositional flow throughout your design. If you want someone to see a block of text on the right you don’t want the elements around it flowing to the left.
Let’s look at a series of images, each with an obvious flow in direction and see how well the flow is in harmony across elements.
In the image above the flow of the elements is in disagreement. The arrows are pointing to the left, while the text is pulling us toward the right and the strongly aligned right edge.
We’ve improved things in this second image. The text is read from left to right and the arrows also point to the right. The elements clearly all flow to the right, however the strong flow in the arrows leads viewers off the page. They may or may not see the text at the bottom.
In this third image we’ve reversed the sides of the arrows and text blocks. The stronger flow from the arrows leads people into the text blocks and everything flows to the right. However, there’s still nothing to prevent viewers from leaving the page.
In this last image a simple vertical line has been added along the right. This line should keep people inside the page and more than likely the eye will flow down the page to the text at the bottom.
Examples of Flow in Web Design
We’ve looked mainly at a work of art in our discussion of flow, but since this is a post on design flow perhaps it would be a good idea to look at the design flow of some websites. Each of the sites below uses flow in some way to direct you toward the important information that needs to be communicated.
Zoran Perin
The first thing you notice in Zoran Perin’s design is the large red shape. It’s perfect for an entry point as it serves as the background for the designer’s name and what he does. The triangle on the right side of the shape works as an arrowhead directing your eye to the right where it will come to rest on the photo of Zoran.
I might have reversed the photo to have Zoran looking to the left since after momentarily resting on the image your eye would follow Zoran’s eye back into the content. The design attempts to pull you back to the left with the red background behind the word trivia passing through the content.
34 Twenty
Drew Templemeyer’s home page does an excellent job of controlling flow through typographic hierarchy, so the viewer can’t help, but absorb the key information on the page. The entry point is Drew’s name, no doubt the most important piece of information the page wants to communicate. The type around his name flows nicely to the right where it ends on the word portfolio in red.
After a brief rest your eye moves down to the line about being web designer and developer. Even if you never read another word on the page you’ve gotten all the essential information about who Drew is and what the site is about, though odds are you’ll be drawn to the links to either view the portfolio or contact Drew.
Old Guard
If you can look at Tom Johnson’s site and not land on the large green circle I don’t know what to say or what else you’d possibly land on. Your next stop should be the welcome text to the right. It’s the largest text on the page and the company name is the same green as the circle. From there you move down through all the ways to contact Tom on your way to the circles in the lower right.
Notice the words "Say Hi," which make sense after having moved through the contact info. From the lower right your eye should be pulled back up and to the left toward green circle allowing your eye to find and read the content.
Skinny Wrists
Josh Smith’s site has an interesting entry point. You might say the large red image in the center is the entry point, but I find my eye quickly rests on the dark rectangle with Josh’s logo. In part it’s due to the contrast with several red elements, in part it’s because it’s the darkest mass on the page, and in part it’s because we naturally start in the top left.
The vertical shape draws the eye down to the navigation where we encounter a horizontal white rectangle, which then leads the eye to the right and the central image on the page. Your eye could move up to the Skinny Wrists name or down to the download link. The nearness of the Skinny Wrists text probably pulls you up first and then back down.
At this point you’ve passed through all the content on the page.
The Gentleman’s Deck
The entry point for the Gentleman’s Deck is the company name. You quickly move down to the deck itself and the green circle containing the price. Notice how the cards fan out and the tops of the cards seem to point to the circle. The color repetition pulls you to the upper right and the call to action.
Taylor & Ives
The large ampersand is the obvious entry point. Notice how the stem curves up into the tagline, the company name and to the "new" link in the navigation that’s also colored red. The horizontal line of the navigation leads you to the red ampersand in the company name in the upper right before you’re again pulled to the large partial ampersand and to the block of text on the left with links to the company’s work
Analog
There are a few interesting things in the Analog design. Again the entry point is the logo and your eye then moves to the illustration of the workers and then down to the photos of the people behind the site.
Focus on the illustration for a moment. The workers are pulling to the right moving your eye to the right. The ropes or cables also lead to the left and you want to know what these guys are pulling. If you do you’ll come to a stop at the vertical line pulling your eye down. Had you instead continued on to the right the black mass of clothing punctuated by the white highlights also pull your eye down toward the photos and the content.
It’s possible your eye will bounce around a bit on the illustration being pulled to the right and curious as to what’s to the left. At some point either side will lead you down the page.
Summary
Our goal as web designers is to communicate. While we want our viewers to read and notice everything on the page, it’s most important to make sure they see and absorb our main message. Flow can help ensure your visitor passes through the elements that impart this key information.
Ideally we’ll create an entry point leading people to the most important information on the page and then create a flow and motion through our design that leads them to rest on the next most important information and then the next most important information after that.
Even if no one ever reads the prose on the page you can still communicate the message that needs to be communicated. Those that are interested will read your main content. Those that aren’t will leave, but not before they know what your page and site is about.
Think about what your page needs to communicate before designing and use focal points and flow to communicate your message to your audience.
Article by : Steven Bradley (Speckyboy Design Magazine, 2010)
Maxwave Design & Marketing 