Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Part Six Design Principles: Compositional Flow And Rhythm

When someone lands on a page of your site what do you want that person to do? Where do you want them to look? What information do you want your visitors to notice and in what order?

Ideally, you want people to see your most important information first and your next most important information second. You want potential customers to see the copy that will convince them to buy before they see the “Buy Now” button. 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 composition1.

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.

Note: This is the sixth post in a series on design principles. You can find the first five posts in the series here:

Design Patterns: Flow In The Absence Of Design

A couple of articles back in this series I talked about visual direction7 and I mentioned Rudolph Arnheim’s structural net. You should read that post for details, but the general idea is that in a rectangular canvas the center and the four corners of the canvas act as magnets to pull the eye. Along with these natural focal points, there are axes running between them and your eye moves along them from focal point to focal point.

Arnheim’s structural net is not the only pattern that suggests where and how the eye naturally moves through a composition. The Gutenberg diagram, the F-pattern layout, and Z-pattern layout all suggest how a viewer’s eye will move and they assume a natural flow to a design.

Note: These patterns are described for languages that are read left to right. Adjust for other reading directions.

The Gutenberg diagram8
The Gutenberg diagram. (View large version9)
  • Gutenberg diagram: In this pattern the eye generally sweeps from the top-left to the bottom-right, passing through Arnheim’s optical center. Less attention is paid to the other corners which are called fallow areas. Since the eye movesto the right as it moves down, the top-right corner is a strong fallow area, while the bottom-left corner is mostly ignored.
  • F-pattern layout: In this pattern the eye starts in the top-left and moves across the page to the right before moving down a little and repeating the movement across the page. The general pattern follows the shape of the letter F.
  • Z-pattern layout: The eye starts in the top-left and moves right. At the top-right corner it moves down and to the left in a diagonal before moving once again to the right. Overall it follows the shape of the letter Z and repeats the pattern down the page until it reaches the bottom-right.

I’m sure you’ve seen eye tracking studies and discussions of the above patterns before. What rarely gets mentioned is how these patterns describe text-heavy pages10. They describe how our eye moves through columns of text.

The F-pattern is often mentioned in combination with search results pages. Why is that? It’s because search results pages are text-heavy pages presented as lists of bite-sized information to scan. An F-pattern is a natural way to scan these pages.

Reading patterns on text-heavy and design-light pages often follow an F or Z path11
Reading patterns on text-heavy and design-light pages often follow an F or Z path. (View large version12)

Add hierarchy, direction, movement and rhythm, and the flow through your design won’t follow the patterns above. The patterns fall away in the presence of design.

They’re still useful because you can take advantage of the patterns and place important information where the eye would naturally fall to increase the visual prominence of the information. You can take advantage of these natural patterns, but do understand they describe text-heavy pages only.

A viewer’s eye will move through a composition in some way regardless of whether or not you control the movement. You might as well control the movement.

Compositional Flow

You might have seen the word “storytelling” appear more and more often in discussions about design and conversion optimization. Compositional flow can help you tell your story by presenting information in the right order.

Flow is about movement and direction, and leading the eye from one part of a composition to another in the direction you want it to move. You create flow through a combination of visual weight and visual direction.

Elements of greater visual weight (focal points) pull the eye and become resting places. Other elements impart direction and move your eye from one point to another through visual cues such as arrows and lines.

Flow starts with your dominant element, which should be the entry point into your composition. From there you provide directional cues for the eye to follow through your design.

The most obvious directional cue is an arrow pointing at something. An image of a face looking in one direction is another strong and easy directional cue. Others include.

  • Repetition of elements
  • Rhythm
  • Implied action
  • Diagonal lines
  • Gestural lines
  • Directional lines
  • Perspective
  • Subject matter of elements
  • Gradation

You’ll notice lines feature in the list above. Showing direction is one of the primary characteristics of lines. Lines can also be used to cut off motion in one direction by being perpendicular to that motion. When this happens they act as barriers, stopping or possibly reversing the path the eye was following.

Create direction and movement through the items mentioned above. Add elements that serve as barriers to change the direction the eye is moving. Create open paths in empty space to allow easy movement through and between your positive design elements.

Flow And Harmony

On a micro level you want the path the eye follows to align well with whatever action you want someone to take. For example, it makes sense to place the button to search after the form field, because the natural process is to fill in the field and then click the button. Placing the button first would move your visitor in one direction until the end, when they have to move all the way back to the start.

Two search forms illustrating inconsistent and consistent compositional flow.13
Compositional flow in search forms. (View large version14)

It makes more sense to have arrows point to the thing you want someone to look at instead of away from that thing. You’re creating flow even when the arrows point away, but not a flow that makes any sense to achieve the goals of the site.

An arrow pointing away from text, creating inconsistent flow; and an arrowing pointing toward text, creating consistent flow.15
Arrows should point where you want the eye to look. (View large version16)

Movement

Movement is closely related to direction. Motion implies a direction and direction implies movement. If you want someone to look to the right, one way is to have something on the page move to the right. The eye will follow it.

There are several types of movement.

  • Literal (physical) movement: occurs when some physical activity is present.
  • Static movement: occurs when the eye jumps around from point to point in the hierarchy.
  • Compositional movement: occurs when design elements lead the viewer’s eye from one point to another through a composition.

Animation can be used to create literal movement on the page. Dominance, focal points and hierarchy create static movement. When elements that impart direction and movement are added between focal points you create compositional flow.

The same list of directional cues I presented earlier are used to show movement through a composition.

Rhythm

Rhythm can help control the pace of flow in a composition; it’s patterned movement. Rhythmic patterns are built from elements and the intervals between them, and just as your ear will follow along with the rhythm of a song, your eye will follow rhythm created visually.

A pattern and a rhythm will exist as soon as you add multiple elements to the page. Two of anything implies a structure. It’s going to be there no matter what you do so, again, you should learn to control it.

Repetition creates flow and rhythm through the repeated elements. When the eye sees a red circle it notices other red circles in the composition and seeks to establish a pattern. In addition to repetition you can use alternation and gradation to create rhythm.

  • Repetition: creates patterns through predictability.
  • Alternation: creates patterns through contrasting pairs.
  • Gradation: creates patterns through a progression of regular steps.

Rhythm is created both through the elements the eye follows and the intervals between them. Changes to either alter the pattern. Variations in the pattern add interest. Emphasis of something in the pattern can break the rhythm and pause the flow momentarily.

There are three primary types of rhythm:

  • Regular rhythm: occurs when the intervals between elements are predictable, or the elements themselves are similar in size and length. Placing repeating elements at regular intervals would be an example.
  • Flowing rhythm: occurs when the elements or intervals are organic. This creates natural patterns that evoke a feeling of organic movement. Stripes on a tiger or zebra are good examples.
  • Progressive rhythm: occurs when the sequence of forms or shapes is shown through progressive steps. Some characteristics of elements might have stepped changes, or the interval might have stepped changes. This gradual increase or decrease in sequence creates movement. A color gradient is a good example.
A field of flowers exhibits a flowing rhythm17
A field of flowers exhibits a flowing rhythm. (View large version18)

Any of the above types of rhythm can be used to create movement and compositional flow. Which you would choose depends on the specifics of your design: if the design is trying to communicate consistency, a regular rhythm is probably best; if the design is trying to communicate something more natural and organic, a flowing rhythm would likely be preferred.

Flow And Gestalt

The further along we get in this series, the more gestalt principles contribute to the design principles we’re looking at.

Dominance and focal points create areas in your design that pull the eye. Similarity and contrast are used to create pattern and rhythm.

All the gestalt principles that connect or show commonality among elements will help lead the eye from one element in the group to the others.

Uniform connectedness leads the eye through the thing that connects the elements. Elements with a common fate appear to move in the same direction carrying the eye along with them. The principle of continuation is specifically about continuing to move in one direction.

Examples

Let’s take a look at screenshots from a few sites and think about how their designs flow and move, and what kind of rhythm they might have.

As I’ve mentioned previously in the series, this is my opinion. You might look at these same screenshots and see a different flow and rhythm than I do. That’s fine. It’s more important for both of us to think critically about the designs we see than it is for us to agree about what we think.

Dorigati

When I look at the Dorigati home page19 my eye is quickly drawn to the hero image of wine barrels at the top of the page. It doesn’t take long to be pulled from here to focal points like the site logo and the image of the wine bottle to the right.

Screenshot of the Dorigati.it home page20
Screenshot of the Dorigati.it home page. (View large version21)

There’s a strong implied diagonal flow between the logo and bottle, and your eye likely flows back and forth between them. Think how quickly that connects the company name with the products the site offers.

The curve at the bottom of the logo appears to point downward leading your eye to the name of the wine being presented. Notice that the heading to the left and the name of the wine are the same blue and similar to the blue in the logo. The repetition of color creates a rhythm and flow through all three items.

The rhythm of color is used again with the gold headings down the page and the decorative flourishes to the left. A similar color is used for the dates. While the interval can vary depending on the length of the text in each entry, it’s fairly predictable and a regular rhythm.

The wine bottle also serves to connect the header with the main content, creating a vertical flow through the hero image and serving as a bridge across it. Without the image of the wine bottle it requires more effort for your eye to cross the horizontal lines that create barriers to movement.

Dress Responsively

There’s a strong horizontal flow at the top of the Dress Responsively home page22. The navigation and text both lead your eye horizontally and make it very easy to scan left and right across the header.

Screenshot from the home page of the Dress Responsively website23
Screenshot from the home page of the Dress Responsively website. (View large version24)

My eye tends to start with the “YOU DECIDE” text and easily moves right and left where it can take in the logo, navigation, and the remaining text in the header.

Notice at the end of “YOU DECIDE” your eye is also pulled down. There’s a repetition of rectangular and orange shapes that creates a vertical rhythm. The shape of the “WTH?” button is echoed in the mostly rectangular “548 votes” shape and the “SEE DETAILS” button below the text. This vertical flow is strengthened by a strong vertical line that’s created by aligning the left edge of these shapes with the text between them.

The orange color repeats itself as text in both the header and also further down the page (not shown in the screenshot). Having encountered the color repetition at the top of the page, your eye follows it down the page increasing the vertical flow.

Incredible Types

The header of the Incredible Types home page25 also has a horizontal flow due to the shape of the lines and block of text. The light grid lines create a subtle pull down and also create a regular rhythm horizontally across the page.

Screenshot from the home page of the Incredible Types website26
Screenshot from the home page of the Incredible Types website. (View large version27)

Below the header is a grid of images. Notice how the gutters (both horizontal and vertical) between images provide a channel for your eye to move through. They help your eye flow from image to image in either direction. They also create a regular rhythm in both directions.

Screenshot of the footer from the home page of the Incredible Types website28
Screenshot of the footer from the home page of the Incredible Types website. (View large version29)

In the footer, text is grouped into two rows and four columns once again creating both horizontal and vertical flow and rhythm. I think the horizontal flow stronger than the vertical and so my eye tends to move left and right more than up and down, but the flow exists in both directions.

Love & Luxe

The Events page on the Love &Luxe site30 is another design that shows both horizontal and vertical flow.

Screenshot from an interior page of the Love & Luxe website31
Screenshot from an interior page of the Love & Luxe website. (View large version32)

The pink in the left column draws my eye and creates vertical flow through its shape. Note how the site name is rotated so it too creates a vertical flow. The contrast in color with the menu next to it creates a strong vertical line where the two meet.

The text at the bottom of this column repeats, creating a vertical rhythm as you read one block then the one below it. However, the horizontal nature of the lines changes the flow to horizontal and moves your eye to the right.

The dark background behind the current menu items creates an even stronger horizontal flow because your eye is drawn to the contrast. The triangle it displays at its top-right corner points to the right.

On the right, in the main content, the color and size of the dates creates a regular vertical rhythm through repetition. The screenshot only shows two of these, but they continue further down the page. The pink headlines work to reinforce the rhythm created by the repeating blue dates.

The horizontal lines between each entry stop the vertical flow momentarily, keeping you in each entry a little longer. The rhythm of the repeating colors in the dates and headlines pulls you further down the page once you’re ready to cross the horizontal line and move to another entry.

The images naturally change with each entry, but the one in this screenshot directs your eye down and to the left diagonally.

Summary

You have a lot of control over where people look when they’re viewing a webpage you’ve designed. On a text-heavy and graphic-light page, a visitor’s eye likely follows something like a Z-pattern or F-pattern across and down the page.

However, as soon as you design page elements and add graphics, those patterns no longer apply. Your visitor’s eye will follow the flow, movement and rhythm you create.

Think about the priority of the information you’re communicating. Think if it would be more useful when seen in a specific order. Think about where on the page you want someone to look first, second, and third.

Then create visual cues to lead them through the page in the order you think best. Add a line for someone to follow, or create one by aligning various elements. Repeat a color or text size to create a rhythm for the eye to follow. Present images of moving objects to direct the eye.

Don’t leave it to a default pattern to lead your visitor’s eye. Create compositional flow through the page and lead them yourself.

There’s one last topic I want to share with you in this series on design principles, and that’s balance. I’ll talk about compositional balance in general and then walk you through the four different types of balance (symmetrical, asymmetrical, radial and mosaic) you can create.

Additional Resources

(og, ml)

Footnotes Link

  1. 1 http://www.vanseodesign.com/web-design/direct-the-eye/
  2. 2 https://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
  3. 3 https://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/
  4. 4 https://www.smashingmagazine.com/2014/09/22/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/
  5. 5 https://www.smashingmagazine.com/2014/12/12/design-principles-visual-weight-direction/
  6. 6 https://www.smashingmagazine.com/2015/02/27/design-principles-dominance-focal-points-hierarchy/
  7. 7 https://www.smashingmagazine.com/2014/12/12/design-principles-visual-weight-direction/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2015/03/gutenberg-diagram-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2015/03/gutenberg-diagram-opt.png
  10. 10 http://www.vanseodesign.com/web-design/3-design-layouts/
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2015/03/f-pattern-z-pattern-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/03/f-pattern-z-pattern-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/03/01-search-forms-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2015/03/01-search-forms-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/03/02-arrows-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/03/02-arrows-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/03/flowers-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/03/flowers-opt.jpg
  19. 19 http://dorigati.it
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/03/dorigati-opt.jpg
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2015/03/dorigati-opt.jpg
  22. 22 http://dressresponsively.com
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/03/dressresponsively.com-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/03/dressresponsively.com-opt.jpg
  25. 25 http://incredibletypes.com/
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2015/03/incredibletypes-footer-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/03/incredibletypes-footer-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/03/incredibletypes-footer-opt.png
  29. 29
  30. 30 http://loveandluxesf.com/events/
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2015/03/loveandluxe-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/03/loveandluxe-opt.jpg
  33. 33 http://speckyboy.com/2010/06/18/how-to-control-flow-within-your-web-designs/%0A
  34. 34 http://www.vanseodesign.com/web-design/does-your-design-flow/
  35. 35 http://moz.com/blog/eye-tracking-in-2014-how-users-view-and-interact-with-todays-google-serps
  36. 36 http://www.leancrew.com/all-this/2014/04/the-wrong-sided-arrow-in-1password/
  37. 37 http://3.7designs.co/blog/2009/01/the-gutenburg-diagram-in-design/
  38. 38 http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
  39. 39 http://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design--webdesign-687
  40. 40 http://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design--webdesign-28
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Steven Bradley is the author of Design Fundamentals: Elements, Attributes, & Principles and CSS Animations and Transitions for the Modern Web. When not writing books he can be found writing for his blog at Vanseo Design or on his small business forum.

  1. 1

    Captain semantics

    April 29, 2015 2:56 pm

    I strongly disagree with the search form example. The button here is also the label. In english we put the verb first then the subject because it establishes the context “Search for the cheese”, we do X with the Y.

    As an English speaker I read the label, “search” as “search for …” And this establishes the context, meaning. Label-first means I can decide whether ro abandon parsing this row (as non-important) , or I can immediately see it as my destination.

    As for moving the mouse, or action point retrograde from this point, surely on a form submission we anticipate a new result set to appear post-click. After pressing “search” I expect the user to be rescanning the new results in a big F shaped page scan shortly after. So in fact we are doing the right thing by sending them back toward the top left corner.

    -45
    • 2

      In my opinion, the word “search” isn’t describing what to do in the text box, it describes what is done when the action is made, in this case, clicking the button.

      20
    • 3

      Steven Bradley

      April 29, 2015 9:37 pm

      The reason for saying the button should come after is a usability concern. Granted this would be for languages that read left to right. As you’re typing in the search field, you’re moving to the right. It makes sense to have the button be where you’re heading as opposed to behind you, in this case on the right of the search field..

      16
    • 4

      Are you actually implying Search buttons should be on the left of input fields?

      2
    • 5

      Chris Howard

      May 10, 2015 12:18 pm

      @Captain semantics, personally, when it’s on the left, it looks like a label. I wouldn’t expect to click it – i’d expect pressing Enter to trigger the search. When it’s on the right, it looks like a button.

      Your point, and my opinion and all of this serves to reinforce Steven’s gist about the power of flow.

      On a side point… damn I wish the WordPress admin designers could learn this!

      0
  2. 6

    Captain Semantics’s point has been argued before.

    In 2014 we extensively tested the search for (on the left) VS search (on the right). With minor cultural exceptions, the right leaning search button was used far more at a 8:1 ratio.

    2
    • 7

      Steven Bradley

      April 29, 2015 9:40 pm

      8:1? Wow. That’s a huge increase. It makes sense. I’m sure having to reverse direction from your typing and reach back for the search button wouldn’t take a lot of time, but it takes some time and during that time some people will have also reversed the decision to search.

      1
      • 8

        This series is fast becoming one of my favourites. The search question could be dependant on context. We found if it was directly above a list an edit box on its own seemed enough to indicate a search, I.e no search button was required. I guess this still fits with principle of composition and flow?

        8:1 would seem conclusive enough a result in ddesjardins tests in to argue right for their context!

        0
        • 9

          Steven Bradley

          May 12, 2015 11:46 pm

          Interesting about when it’s directly above a lit. It’s funny because my main thought was really about typing and then getting to the button at the end. It’s not an original idea of mine. I want to say it came from Don’t Make Me Think, but I just scanned through the book and didn’t see it there.

          I’ll have to search through some of my other design books and see if I can find where I first came across the idea.

          0
  3. 10

    Thanks for sharing this new knowledge about design principles here. I learn a lot after read all of your series in design principles. When I just start to learn about designing my sites, and then I read your articles here, it made me more understand with this kind of topic.
    Thanks for sharing this valuable lesson here.

    2
  4. 12

    I agree. I just wish the submit button on this comment form was on the right hand site too!

    0
    • 13

      Steven Bradley

      May 1, 2015 12:03 am

      With the comment form on this site you are moving toward the submit button when you fill out the form, since you’re working your way top to bottom. I think the flow still makes sense,

      0
  5. 14

    Lots of old design wisdom gets re-peddled as web-specific ‘new’ practice. In this case, our old friend prime optical area resurfaces. This was brought into currency (I think) by Mario Garcia and the print-based Poynter Institute back in the 80s and settled on the right-hand side of the page. As the rule of thirds tends also to do.
    The examples quoted by Steven Bradley surely reinforce the rightness of that argument and undermine the leftness camp.
    Dorigati: Image placement – the bottle, right – does a great job of steering you left into the content.
    Dress Responsively: You’re straight into the right-side text with the key t-shirt image strictly secondary glance-bait. Even with more ‘pop’ it would be difficult to argue that the left-placed it corresponds with the precept of directional flow. Nice example nevertheless of what to do if the image were on the right – it brings a load of other considerations into play.
    Love & Luxe: Sorry, but you’re still straight to the product (a good thing), which is … on the right. This despite the sturdy tug of the sidebar logo heading back into harbour rather than flowing out to sea.

    0
    • 15

      I agree that in the Love & Luxe site the eye goes to right to the product but I think it is led down to the repetition of more product via the bright red logo bar.

      0
    • 16

      Steven Bradley

      May 12, 2015 11:51 pm

      Like I said at the start of the example section some of where your eye goes is subjective. With Love & Luxe my eye is drawn to the color contrast, but I can easily see how your eye would go straight to the product first.

      I could have been doing a lot of color work the same day I wrote up that example and was naturally pulled by color for awhile. Hopefully the general concept about flow comes through. If all I did was get a few more people to think about it when designing, it’ll be worthwhile.

      Thanks.

      1
  6. 17

    Excellent article, nice to see some well known design theories applied to Web design examples

    0
  7. 19

    Link to Part One of the series seems to be broken.

    0
  8. 22

    Stella Bryan

    May 8, 2015 7:52 am

    Hi there!
    Thanks for sharing this article it helped me a lot in one of my assignment on website designing principles. You explained the design pattern of website with very best examples. The main thing in any website is that where the user look at. It is basically related to HCI of the website which is very important for any business website.

    1
    • 23

      Steven Bradley

      May 12, 2015 11:53 pm

      Thanks Stella. I’m glad I was able to help with your assignment.

      0
  9. 24

    matt lambert

    June 2, 2015 9:13 am

    I find this article fascinating. Whilst I can’t possibly disagree with any of the design principles, I do find it at cross purposes with what I think about every day. I’m engaged with Search Marketing, a commercial endeavour, which is probably only a subset of your intended audience here. This comment is therefrom from my focused (biased) point of view…..

    What is the objective of a commercial website.

    Is it to serve the interests of the owner of the website, or to serve the interests of the visitor? I would argue that it works when the interests are combined.

    When we understand what the visitor wants, we can build a better experience. Search tells us what they’re interested in, it can also tell us what they might be interested in

    The fact is that a vast majority of visitors with commercial intent will be delivered by Search Engines. We design better when we understand, in aggregate. where people are in their Search, which changes over time. It is a three dimensional environment, not two dimensional.

    Then there is the fact that a website is a user interface. The most ‘intuitive’ experience is when a website works like every other website, because then people know how to use it. At a simple level, wouldn’t that means a common navigation lexicon, and positioning.

    If we could but combine our thinking, we might achieve something special.

    0

↑ Back to top