Tutorial for Circular Flow – With Backing
These circular flows have segments with two fields: a larger backing field and a smaller front segment. They are good to use in two specific instances:
- A first message can be placed on the backing field of the segment and then the front segment can be brought in through animation to convey a second message. Examples for this might be a old version of something being replaced by a new version, a question and then an answer, a wrong assumption replaced by a true assumption, etc.
- Since the space between the segments is so small (to provide the most space for text message), sometimes adding a border line around a segment closes the space completely. Also sometimes the border line will have "spikes" when the angle is too sharp that look unnatural. The backing field can act as an outline instead of a border line, which maintains the space between segments so each segment is distinct.
Another reason to use them is their design appeal. Below shows the segment pieces.
Customizing the vertically sliced circles
Group the circular flow and resize/rescale. Then ungroup and continue formatting.
Choose colors from your template's palette. Ideas for coloring the segments are:
- Color the two parts of the segment the same color and use animation to bring in the top piece that has a different text message
- Color the two parts of the segment differently and use animation to bring in the top piece of the segment
- Use color for the back piece(s) to add another layer of information, perhaps explained with a legend.
Don't use 3D with these frameworks
Shadows work best when used on the back piece of the segment.
Gradients, patterns, and pictures
Gradients can be nice on both pieces of the segment. Subdued patterns can also be nice.
Simple animations are best.