Does Your Design Flow?

Have you ever visited a website, but didn’t know where to look? Maybe there’s so much content on the page it was hard to decide where to start. Or once having started your eye didn’t know where to move next on the page. Before long you probably left the site in a bit of frustration or confusion. The reason is that site had a poor flow to it’s design.


photo credit: andsbands

What is Design Flow?

Flow is the way your eye moves or is led through a composition. While most of us will naturally move from one element to another in our own fashion, a designer can control to some extent where the eye moves next. By following basic design principles your design can help shape your message and through the use of visuals you can make your content more inviting to read.

Imagine a story. Every story moves from one scene to the next until it reaches it’s conclusion. Usually those scenes are told linearly in time. The first scene happens before the second scene, which happens before the third scene, etc. Taken together those scenes tell a story. Now imagine you changed the order of the scenes, maybe some scenes are told in flashbacks. The information would all still be the same, but the story would leave you with a different impression. What’s changed is the flow of the story.

In her book Basics of Design, Lisa Graham defines flow in design as having two components:

1. Verbal Flow – the path taken when reading text on the page
2. Visual Flow – the path taken when looking at images and graphics on the page

Through good flow you can lead the eye from element to element and present information in the order you want it to be seen. That will aid the reader in understanding the information presented and allow you to better influence how your message is perceived.

For a simple example consider the image of the Yahoo search below. It looks pretty standard for a search bar. You see the word Search letting you know what it is, followed by the search field where you type, and then to the right is the button (which could be better named) to click to perform the actual search. That’s the order the search should flow.

Now take a look at the same search bar with the order of the elements reversed. Everything is going against the flow. After typing your query you’d have to move back to the left to hit the search button.

How to Improve Verbal Flow

Since verbal design flow refers to reading text, you can improve flow by making your copy easier to read. In English people read from left to right and top to bottom. When thinking about verbal flow understand where your reader will naturally read next.

To make copy easier to read you can:

• Develop a consistent typographic style across your site – Be consistent with your use of font size, face, and color
• Choose a font for your copy that is easy to read – Your copy is not the place for a fancy font
• Remember the principle of proximity – Place headings close to the text they refer to, captions close to images. Organize your text elements so it’s clear what goes with what
• Watch the width of columns – Don’t make columns to wide or too narrow as each hinders reading
• Develop a vertical rhythm in your type – Use consistent line heights and vertical margins and paddings

For an example of vertical rhythm, here’s a screenshot of the content from part of a design I’m playing around with. You’ll notice that the lines of text in the main content share the same baseline as the text in the sidebar. The blockquote interrupts that a little, but once below the blockquote you can see the baselines of the text are once again aligned.

This was done through consistency in all vertical spacing. Consistent line-heights, margins, and paddings. (Ok I admit. Below the blockquote the text is off by a single px at the moment, though you probably couldn’t tell). There’s considerable effort in getting the vertical rhythm, but having put in that effort on a couple of recent designs I can say it’s worth it.

How to Improve Visual Flow

Assuming a left to right reading direction as in English, the natural visual flow for people will be a backwards “S” pattern. You can alter that natural pattern with the images you use, where you place those images, and how images, graphics, and text are mixed on the page.

Many images have a direction. An arrow, a hand pointing, a face looking in one direction. Your eye will speed up or slow down depending on the direction it was moving when it fell on the image. If the eye is moving to the right and then comes upon a face looking right it will continue to move right slightly faster. If the same eye encounters a face looking left it will slow down or even reverse direction to the left. You can use images to control or redirect the visual path the eye is taking.

Vertical or horizontal lines can stop the eye right in it’s tracks. It’s as though you were walking and encountered a fence. The effort to climb over the fence is greater than the effort you needed in walking and so you stop. If the fence is high enough or the line bold or thick enough you might reverse direction or turn to follow the fence line.

Artists have used the above technique for a long time to keep people inside a painting instead of letting the eye move outside of it. Maybe a large tree sitting on the edge of the painting. Your eye reaches the tree, which blocks your escape from the painting, forcing you back into the work.

• Use the direction of images to control the the speed and direction of flow
• Create barriers when you want to reverse the eyes direction
• Create open paths to allow easy movement through your design
• Use contrasting colors and shapes to pull the eye

Design Flow Across Your Site

So far we’ve mostly been talking about flow on the single page, but flow also exists across your site. You can strengthen flow across your site by being consistent from page to page. Human beings seek patterns. If your navigation sits in the same spot on every page, your visitors won’t need to seek it out. Design repetition will help strengthen the general flow when viewing your site.

Again a consistent typographic style and a grid-based layout help maintain the pattern and strengthen the flow of your site. Designing repetition into your pages and across your site will aid flow. Changing the layout from one page to the next will impede flow.

Summary

Keep the above ideas in mind when thinking about the flow of your design. Your readers will start with the natural left to right and top to bottom flow. You won’t be able to control how every person views your page, but you can help direct them to seeing what you want to see.

Even more importantly keep in mind why you want to control flow. Think of what elements or copy you want your visitor to see and in what order. Then create a flow that directs the reader to see those elements.

The next time you look at a design notice it’s flow. Watch how your eye moves across the page and see if the elements in the design helped in that movement.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.