How To Design In An Unknowable Canvas

Posted: 23 Jan 2012 05:30 AM PST

For years designers have been following the canon of page construction put forth by Jan Tschichold. The construction works well in print where the canvas is fixed and known. The situation on the web is very different and something new is required.

About year ago Mark Boulton published a richer canvas and gave us the beginning of this something new. He called for designing from the content out instead of designing from the canvas in.

Soon after Tim Brown suggested using a modular scale for more meaningful typography.

These two concepts are leading and pointing the way forward for all web designers to follow. They are the new canon for web design.

Designing From the Content Out

Binding content to the book is what all good book designers do. To do this, they use Canons of Page Construction, or other principles to design grid systems that, when populated by content, create that connection.

The above is a quote from Mark’s post. Grids aren’t arbitrary structures. For them to be most effective they need to be tied to the thing they are attempting to structure. That requires a constraint to connect them.

In print that constraint is the size of the page. The page is static. It will always be the same size throughout the work. It can be divided and subdivided into geometric systems that become a grid.

Online things are different. There is no fixed canvas within which we work. For years web designers have tried to impose a fixed canvas through the use of fixed width layouts, but with the myriad of devices and device characteristics this is no longer feasible. We can no longer design for a single optimal set of conditions and assume it will work well enough under all other conditions.

We need a new canon as we can’t rely on the canvas. What we can rely on is the content. We can reverse things and instead of starting at the page edges and working in, we can start inside with content and design out.

To begin we need a constraint from within the content. This constraint shouldn’t be arbitrary as our goal is to connect the design to the thing being designed. What you choose is up to you and the specifics of your project, but there are some obvious choices.

Type
Images
Ads

The last would depend of course on whether or not your site has ads, but it’s safe to say that most every project will have type and images or other media.

Write down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities.
—Jason Santa Maria

Choose a typeface for the body of your content and decide what font-size will work best. Ask yourself what images will be used and if they need to hold a consistent size in either direction. If you’re using banner advertising which of the standard sizes will your design need to accommodate?

With even just one of these constraints we can work our way out and build a typographic grid and in so doing connect the structure of our design with the content we’re designing for.

Making the Connection Through Modular Scale

A modular scale, like a musical scale is a prearranged set of harmonious proportions
—Robert Bringhurst

In choosing a constraint above we’ve decided what aspect of the content our design will connect to. How do we go about connecting it? How do we choose the widths and heights that will make up the modules of our grids? How do we relate the design to content?

Tim Brown suggests we use a modular scale to set the measurements we’ll use throughout the design. The video above describes the process and I can’t urge you enough to watch all 31 minutes of it.

Say you’ve set your body type to be 16px (or better yet, 1em). To connect the rest of your design to that type, the measurements you use should be multiples of that same 16px.

Measurements like the size of headings and subheadings, column widths, grid modules, should all be part of some meaningful scale based on that original 16px measurement. This meaningful or modular scale is what leads to unity and a harmonious design.

To create a modular scale you start with a number (in our case 16px), choose a ratio such as 1:1.618 (the golden section) and do the math.

16 × 1 = 16
16 × 1.618 = 25.888
16 × 1.618 × 1.618 = 41.887
16 × 1.618 × 1.618 × 1.618 = 67.773

and so on. In the opposite direction we get

16 ÷ 1.618 = 9.889
16 ÷ 1.618 ÷ 1.618 = 6.112
16 ÷ 1.618 ÷ 1.618 ÷ 1.618 = 3.778

and again so on.

Math…ughh. Don’t worry. Tim created a modular scale calculator to do the math for you. In fact he gave us the ability to add a second starting number that when used with the same ratio creates what he calls a double stranded modular scale and leads to a greater variety of measurements to choose from.

With scale in hand you use the values as measurements throughout your design. For example from the above your main headline might be 41.887px, which corresponds to 2.618em. The calculator provides the em value in addition to the px value.

What Ratio Should You Choose?

How do you choose a ratio? Does it have to be the golden section? That choice is really up to you, though ideally your design concept will indicate a ratio you might use.

You might choose a ratio from nature or mathematics. Another potential source of ratios is music.

Music is exactly where Owen Gregory suggests we look in Composing the New Canon: Music, Harmony, Proportion. Why not music? It’s based on scales we inherently find harmonious. It communicates emotion. It gets people to act and remember.

Scales of different intervals are part of the musical language. Using a major 3rd or perfect 5th as the scale upon which we base our design make sense. It might not be a bad idea to start learning a little music theory to understand something of what these scales represent and communicate.

Fortunately Tim is building these musical scales into his calculator. We won’t have to worry about the math and even more we’re being given a starting point for research into music theory.

Whether you use ratios from music or some other place, the main point is to think about what ratio you might use to compose your modular scale and to begin using values from the scale as measurements in your design.

Summary

Trying to design from the canvas in no longer makes sense for web designers. There are already far too many canvases out there that we’d need to account for and what will work well specifically for one canvas will cause problems in the next.

Responsive design shows us how to develop sites that work across multiple devices and conditions. It doesn’t tells us how to develop a grid or what hierarchy is best. It doesn’t tell us how to connect the design to the content.

Fixing something in the content and then working your way out through the use of a modular scale does show us how to make this connection. This new canon points the way toward design unity and harmony.

choose a constraint from the content
take a measurement from the constraint to use as a starting number
choose a ratio to use for the scale
do the math
choose measurements from the scale for other parts of the design

As I’ve said before it’s an exciting time to be a web designer. The industry is changing and those of us working today have an opportunity to help shape the future.

Have you changed your own process? Are you still starting with the cancans or have you made the switch to starting from the content and designing out?