Ideally, you want people to see your most important information first and your next most important information second. 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.

Below are visual descriptions of the way the eye moves on a page

Untitled

Untitled

Reading patterns on text-heavy and design-light pages often follow an F or Z path.

<aside> 💡 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.

</aside>

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.

Flow

Flow is the way your eye moves or is led through a composition. While most of us will naturally move from one element to another in our own fashion, a designer can control to some extent where the eye moves next. By following *basic design principles* your design can help shape your message and through the use of visuals you can make your content *more inviting to read.*

Does your design flow? Check here

Read example break-down from a Smashing Magazine article

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.

DORIGATI

DRESS RESPONSIVELY