Owen Gregory: Antiphonal Geometry

Orde Saunders' avatarPublished: by Orde Saunders

Owen Gregory was speaking about layout design at Responsive Conf, these are my notes from his talk.

The basic challenge of web design is laying out content in a formless space.

Antiphonal geometry describes aesthetics. Grid systems are used as basis for layout, need the values to scale well for fluid layouts and multiple breakpoints.

  1. Content out
  2. Connectivness between elentns.
  3. Bind the elements to the device.

Content and presentation combine to create meaning.

Creating layouts on the web because there are no edges. There are edges but we don't know where they will be. We call them breakpoints and we focus on width.

In print the design starts with the size of the page. The relationship between the shape of the text block and the shape of the page must be related. Vadergraff's cannon of page construction is the classic version used in books. This can still be used in relation to a non-fixed page as it's just geometry of ratios and angles.

Frames are fundamental to graphic design: cropping, margins etc. The frame melts away as it deploy's it's greatest energy - we see not the frame itself but it's effect. The screen is the frame for web design. There are a lot of sizes but a number of common ratios.

  • 2:3
  • 3:4
  • 3:5
  • 5:8
  • 9:16

(None of these are the golden ratio 1:1.68. The golden ratio is for the week.)

These ratios are also found in the mathematics of musical intervals. We should look at the ratios of musical intervals as ratios in responsive design - font size:line height, image sizes, heading level font sizes, etc.

We can use device-aspect-ratio media queries and viewport percentage lengths vh and vw as CSS units. Can be used to maintain or change layout ratios across different viewport sizes.