01
Color atlas
A palette collected on a city walk.
Study notes
Compare shape, spacing, and contrast. Keep this resource beside the next draft and revisit the details.
Multiple columns
Compare the same six resources.
Visual fragments
Browse the same six resources; compare how the layout changes the reading flow.
02
Paper forms
Folded paper explores volume and shadow. Compare the edges in morning and evening light.
Study notes
Compare shape, spacing, and contrast. Keep this resource beside the next draft and revisit the details.
03
City rhythm
Windows repeat across a street.
Study notes
Compare shape, spacing, and contrast. Keep this resource beside the next draft and revisit the details.
04
Quiet geometry
Simple shapes leave room for space. A circle, a triangle, and a line share one page.
Study notes
Compare shape, spacing, and contrast. Keep this resource beside the next draft and revisit the details.
05
Letter studies
Compare letters, counters, and spacing.
Study notes
Compare shape, spacing, and contrast. Keep this resource beside the next draft and revisit the details.
06
Light archive
Warm and cool light change the same surface. Keep notes beside each observation for the next study.
Study notes
Compare shape, spacing, and contrast. Keep this resource beside the next draft and revisit the details.
A fictional demo within this article. Reset or reload restores its initial state.
Concept
Three or more page regions keep navigation, active work, and context nearby.
Example
All six layouts use the same six resources, labels, and colors. Filter a topic, reverse collection order, open study notes, or narrow the preview. Compare the reading flow while the content stays the same. Reset or reload restores the full collection and original order. Filters, resources, and guidance occupy three adjacent regions.
When to choose it
Choose it when context must remain visible beside work. More regions divide attention and need an explicit small-screen order.
Comparison summary
| Concept | Features | Advantages | Limitations | Suitable situations | Combination conditions |
|---|---|---|---|---|---|
| Multiple columns | Three or more page regions keep navigation, active work, and context nearby. | References remain visible beside active work. | More regions divide attention and need an explicit small-screen order. | Choose it when context must remain visible beside work. | Use flat controls within regions and a single column on mobile. |
Discuss this idea
Comments are shared across languages. GitHub login required to post.