julianna kunstler logo
flow

in graphic design

by JuliannaKunstler.com

When someone lands on a page what do you want that person to do?

Where do you want them to look?

What information do you want your viewers to notice and in what order?

Ideally, you want people to see your most important information first and your next most important information second - hierarchy.

Compositional flow determines how the eye is led through a design: where it looks first, where it looks next, where the eye pauses, and how long it stays.

visual patterns

Eye tracking involves measuring either where the eye is focused or the motion of the eye as an individual views a page. 

As a field of study, it came into its own in the 1980s, but observations were being made about how the eye moves across a page as early as the 1800s.

Here are the popular layout scanning paterns that reflect how people look at a page.

The Gutenberg Diagram

The Gutenberg Diagram suggests that people are subject to a ‘reading gravity’ that goes directly from the top left of a page to the bottom right.

The Gutenberg diagram describes a general pattern the eyes move through when looking at evenly distributed, homogenous information. 

The pattern applies to text-heavy content. Think pages in a novel or a newspaper.

The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation.

Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area and this path is referred to as reading gravity.

Important elements should be placed along the reading gravity path. For example placing logo or headline in the top/left, an image or some important content in the middle, and a call-to-action or contact information in the bottom right.

Designs that follow Gutenberg are said to be in harmony with natural reading gravity.

As soon as you create a visual hierarchy the diagram no longer applies. Keep this in mind with the other patterns described below.

The Z-pattern

The main difference with the Gutenberg diagram is that the z-pattern suggests viewers will pass through the two fallow areas. Otherwise they still start and end in the same places and still pass through the middle.

As with Gutenberg a designer would place the most important information along the pattern’s path.

The z-pattern is good for simple designs with a few key elements that need to be seen. 

The F-pattern

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with a big amount of content. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials, etc.

As with the other patterns the eye starts in the top/left, moves horizontally to the top/right and then comes back to the left edge before making another horizontal sweep to the right. This second sweep won’t extend as far as the first sweep.

Additional sweeps move less and less to the right and for the most part after the second major sweep the eye sticks close to the left edge as it moves downs.

The f-pattern suggests that:

  • Important information should be placed across the top of the design where it will generally be read.
  • Lesser information should be placed along the left edge of the design often in bullet points where little horizontal eye movement is required to take everything in.
  • People don’t read online. They scan.

These patterns describe where the eye naturally goes when there’s a lack of hierarchy in the design.

Visual hierarchy will override any of these 3 patterns. The eye will follow where the hierarchy leads it.

creating a flow

Compositional flow determines how the eye is led through a design: where it looks first, where it looks next, where the eye pauses, and how long it stays.

You want people to be presented with the right information at the right time, and one way to do that is to control the flow of your composition.

A design with good flow will lead the viewer's’ eye throughout the layout, moving from element to element with ease. You can inflience this by using a combination of type, line, contrast, color, and photography

HOW TO CREATE A SUCCESSFUL DESIGN FLOW:

1. Gather all your content 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 the most important. 10 being the least important.

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

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.

 

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.

 

ASSIGNMENT DETAILS

Open your "Hierarchy" file from the previous assignment.

This is a text-heavy layout. 


1. Where do the viewer start on the first page?
2. What are the key-points (key-elements) that you want to use as anchors for the flow? Highlight them. These should be the headers and sub headers, lists, important points, images, other supporting graphics.
3. What is your goal as a designer? To keep the viewer engaged.
4. How you do that? By creating your own flow. By emphasizing the key elements, adding images / photos, supporting graphics (lines, shapes, color, etc), and enough white space (negative space) to keep it simple and elegant.
5. Use paper and pen to sketch a new layout for each page.
6. Both pages should work together.
7. Draw arrows on you sketches to show your intended flow. Show it to me before you finalizing.
8. PLEASE!!! Use grid structure!!!!!!! (Align!!!!)))
9. Look for appropriate graphics to add. 
10. You need to be able to defend the use of each additional graphic element! 
11. Fonts: use up to 2 fonts that work together.
12. You should end up with a layout of an article that look engaging and easy to follow.
13. Don't overdo things!!!!
14. no more than 2 extra colors
Content for class "step" Goes Here
Content for class "step" Goes Here
Content for class "step" Goes Here
...