Content arrangement

List layout

Compare the same six resources.

Compare the same six resources
COLLECTED / 06

Visual fragments

Browse the same six resources; compare how the layout changes the reading flow.

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.

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

Repeated rows keep title, summary, and metadata in predictable positions.

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. Images and text repeat in aligned rows.

When to choose it

Choose it for scanning and comparing text-heavy items. Long summaries can hide the pattern; keep row content concise.

W3C

Comparison summary
Comparison within this category
ConceptFeaturesAdvantagesLimitationsSuitable situationsCombination conditions
List layoutRepeated rows keep title, summary, and metadata in predictable positions.Stable metadata positions support quick comparison.Long summaries can hide the pattern; keep row content concise.Choose it for scanning and comparing text-heavy items.A list can fill the main region of a two-column page.
Keep exploringSource & edits ↗

Discuss this idea

Comments are shared across languages. GitHub login required to post.