This is the third post in a series focusing on the basic building blocks of design. With each new post we’ll feature a different principle that will help you understand how designers do what they do. If you’re ever tasked with creating something yourself, these principles can help you make good design decisions too!

Have you ever visited a website and immediately felt overwhelmed, confused, and frustrated? More likely than not there was probably too much content crammed onto the page, so much so that your eyes didn’t know where to begin. Before long you probably left the site to look elsewhere for the information you had come to find. The real problem isn’t with the content of the site, but the flow of the website. Let’s discover what design flow is and how to achieve it in our own designs.

What is Design Flow?

Design flow is the way that your eye moves or is led around a composition. A design with good flow will lead the viewers’ eye throughout the layout, moving from element to element with ease. As a designer (or a marketing person forced to wear the hat of a designer) you’ll be able to influence the way the viewer will digest your content. You can do this by using a combination of type, line, contrast, color, and photography.

Verbal & Visual Flow:

The best designs integrate the verbal (text elements) and visual (graphic elements) together to create a harmonious and easily understood message to the viewer. Unlike fine art, creating good web design flow can be more complicated because design is a form of communication. If your audience doesn’t understand the message then the design has failed its purpose. There are separate pieces of a website that need to be clearly understood by the user, such as navigation, text blocks, imagery, and links.

How to Achieve a Successful Verbal Flow:

Verbal Flow: The order in which the viewer reads the text on a webpage.

• First, pick an easy-to-read font for your main content. Make sure the vertical space between the lines of text isn’t too cramped or too wide.
• Avoid extra wide or narrow column widths for your content, it impedes readability.
• Make sure headlines and links are consistently styled.
• Make sure you have a clear visual hierarchy where the headlines are the largest type, followed by subheads, then body copy. You can also add in some quotation styles and bullet points to break up the text blocks.
• Keep layouts consistent from one page to the next (use the same fonts, type sizes, column widths, etc.)
• Understand and organize your content so that related items are closer together.
• Make sure to have plenty of white space or padding around elements. This gives the viewer a place for the eyes to rest.

How to Create a Clear Visual Flow: 

Visual Flow: The order in which the viewer looks at images and graphics on the webpage.

• Generally, visitors will gravitate towards the most prominent visual on the screen, often a photo but sometimes a headline or call-to-action.
• Imagery should be selected carefully so that it enhances the message you are trying to convey, not distract from it.
• Remember your goal is to get visitors to your call-to-action. Ask yourself, “what do I want my users to find first”? Then make it easy and quick to act on it.
• Use the direction of images to control the speed and direction of flow.
• Create barriers when you want to reverse the eyes’ direction. (For example, you can use color blocks or whitespace to guide the viewer around.)
• Create open paths to allow easy movement through your design.
• Use contrasting colors and shapes to pull the eye where you want it to go.

How to Create a Successful Design Flow:

1. Gather all your content ahead of time

2. List all the key information points that need to be displayed.

3. Assign values (1-10) to each point

4. Now, use the principles of verbal and visual flow outlined above to layout your page.

If you have any questions about design principles or the projects mentioned above, shoot us an email and we’ll be happy to help.

Additional resources:

Basics of Design: Layout and Typography for Beginners by Lisa Graham 

Visual Movement: Flow in Web Design by Patrick Cox

Does Your Design Flow? by Steven Bradley

Understanding Visual Hierarchy in Web Design by Brandon Jones

How to Use Visual Hierarchy in Web Design by Joshua Johnson