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 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:
Next Steps to Create a Successful Design Flow:
1. Gather all the content you can 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.