Blog

Design Principle No. 3 – What Is Design Flow & How Can I Use It?

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!

Design Principle Blog Headers-03

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 together 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 complex. There are separate pieces of a website that need to be clearly understood by the user, such as navigation, text blocks, image galleries, and links.

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

  • 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.
  • Use bullet points.
  • 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.

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 your 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 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 where you want it to go.
  • Check out some great examples of visual flow here:

 

Peak Financial Homepage

Homepage Flow: Most people will immediately look at the yellow sunflower first. Next, the eye moves down the page to the green box holding the recent update links. Afterwards, the eye moves left where the tagline reads, ‘We see the difference.’ Finally, you’re guided back up to the logo in the upper left corner.

 

 

Peak Financial Interior

Interior Page Flow: Your eye begins at the logo in the upper left hand corner of the page. Then, it moves to the right where you see the red cherry. Next, your eye moves down the page to the recent updates and green box with a call to action. In this case, to make a referral. Afterwards, your eye moves back to the center column where the body text lies. Finally, you’re guided back up to the logo in the upper left corner.

 

Next Steps to Create a Successful Design Flow:

1. Gather all the content you can ahead of time

  • Make sure you have all the text (Draft text is better than no text.)
  • Pair imagery with your text. (Make sure they work harmoniously together.)

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

  • Navigation, photos, text, bullet points, call-to-actions, links etc.

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

  • 1 being most important.
  • 10 being least important.

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

  • Verbal flow: The order in which the viewer reads the text on a webpage.
  • Visual flow: The order in which the viewer looks at images and graphics on the webpage.

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

 

Related Articles:

Design Principle Blog Headers-01

Design Principle Blog Headers-02