GANTRY / FIELDNOTESAn independent journal of web structure

Volume 01 / The structure issue

Good bones.
Better
pages.

A field journal for the quiet work beneath a useful website: proportion, hierarchy, rhythm, and room to read.

Start with the structure
An exploded architectural model of a webpage Three offset planes represent content, layout, and a supporting grid. Orange blocks show the reading hierarchy. 01 / CONTENT 02 / COMPOSITION 03 / SUPPORT
FIG. 01 — A page, pulled apartNot to scale. Built to explain.

Subject / Web layout & reading

Method / Observe, sketch, revise

Position / Independent by design

01 / Three working principles

A page is a sequence of decisions.

[ 01 ]

Start with the reading.

Write the question a visitor brings. Put the answer where their eye arrives first. A grid becomes useful when it carries something worth understanding.

Before choosing columns, arrange the words in the order someone needs them.

[ 02 ]

Give space a job.

A narrow gap can connect a caption to an image. A generous gap can mark a new idea. Spacing is punctuation, and every pause should change the reading.

Repeat a small set of intervals so the exceptions can mean something.

[ 03 ]

Let the edges move.

A composition needs to survive a long title, a small screen, and a reader who enlarges the text. Choose relationships that can bend without losing their order.

Test the awkward content before polishing the comfortable example.

FIG. 02 / An illustrative reading surface

FIELD
STUDY
004

Context
before
detail.

A little room to think.

A short introduction establishes the subject before a deeper explanation begins.

02 / Read the relationships

The grid is a support, not the subject.

This small editorial sketch gives the main thought the widest span. A quieter rail holds context. A shared top edge ties the two together without forcing equal emphasis.

  • A
    A clear entry point creates a useful first glance.
  • B
    A consistent left edge makes the next line easy to find.
  • C
    Metadata stays close enough to explain, quiet enough to recede.

03 / Notes from the workbench

Small adjustments.
Structural consequences.

Reading measure / Note 001

The line that goes on too long.

When a paragraph occupies the full width of a large display, returning to the next line becomes work. Constrain the text column independently of the surrounding composition.

Then read it aloud. Look for the places where the eye loses its place, not just the places where the box looks balanced.

Work through a reading pass

Hierarchy / Note 002

Everything cannot be a headline.

If every section arrives at full volume, the page has no rhythm. Reserve the strongest scale for the idea that actually changes the reader's understanding.

Responsive thinking / Note 003

One column is a composition.

Stacking is the beginning of a mobile layout. Reconsider the gaps, the order of notes, and the distance between an explanation and the thing it explains.

04 / A useful review

Three questions before you add another section.

  1. 01

    What new understanding arrives here?

    A section should advance the argument.

  2. 02

    Does the example make the idea concrete?

    Show the relationship you are describing.

  3. 03

    Is the next step clear and proportionate?

    Match the action to the reader's context.

From observation to arrangement

Build the argument.
Then build the page.

Our practical guide walks through a content inventory, a rough layout, a reading pass, and a small-screen review. Bring a page that feels almost right.

Open the layout field guide