Flow
Flow at Sage is defined as a state of perpetual forward motion.
Flow in design is the way your eyes move or are led around a composition. Good flow leads the user through the content, moving from one element to another with ease and simplicity, creating a powerful story-telling experience. Flow is strongly related to hierarchy; it’s the order in which the user understands your design and moves through the information. A good design flow is smooth, fluid, and intuitive.
Sage Flow is the rhythm of our brand and embodies every aspect of our design system. It’s the heartbeat of our graphics and motion. Flow is also a state of mind, which can be summed up as follows.
- Point of view: Determine how to control the flow. Think of a specific angle to start your story, then create a flow that directs the reader organically to your main message. For example, columns are good for side-by-side comparisons while rows are helpful to highlight individual facts.
- Atmosphere: Think of the flow as a positive lead through your design, an anchor point for the desired emotional state which fully immerses the user. It needs to employ their senses and feelings: think visual, auditory and kinesthetics. The atmospheric style is shaped by a good UI, a harmonious color palette, and functional visual elements.
- Continuity: Make sure the user perceives a connected series of elements as a single, continuous unit. Connections between elements create a sense of flow.
- Rhythm: Use visual cues to control the speed and direction of the flow; digits, arrows, or textual elements are narrative hints to guide the user.
- Proximity: Place visual elements close to each other if you want the user to understand them as a group.
- Similarity: Use similar visual elements if you want the user to understand they have the same function. For example, visual legend.
- White space: Think of open paths that allow easy eye movement through your design. Get rid of obstacles and complications to relieve the cognitive load.
To help structure your infographic, use one of the following patterns (based on Gestalt principles). Learn more about visual information flows in infographics.
Frame 74