Page layout is subtle but important


Scale—noticeable size differences between elements—is one of the easiest ways to make a design more visually exciting. Big headings are more visually interesting than small headings, relative to the body text size. If you want to make your design feel more energetic, playing with scale is always a good idea.

Vertical grids

Vertical grids are less well known than horizontal grids. If you want to read about my own approach to them I’ve written a blog post on the topic.

A vertical grid is very important if you want your design to have good vertical rhythm, which you do. A design with good vertical rhythm, where content appears at predictable intervals, looks better than one without.

Optical alignment

Sometimes when you align things with the tools offered by design software, things can still look as if they’re not aligned. This is where optical alignment comes in.

I was a little shocked when I found out that professional designers sometimes have to “eyeball” alignment to make sure it looks correct. If two shapes are mathematically aligned but don’t feel right, you might need to nudge one or the other manually.

Read this very good article, with plenty of examples, for more information.

Spacing scales

The space a designer uses is no different from the rest of the design: it should follow internal rules.

In the typography chapter I talked about typographic scales, and the same can apply to spacing. You can use spacing scales to make sure that your design feels ordered and consistent. You choose a set of spacing sizes to use in your design, and then you only use those sizes when choosing the space between and around elements.

For extra internal consistency in your design, you can make sure that your spacing scale is related in some way to your typographic scale. For example, your spacing scale could use all of the same sizes used in your typographic scale. If your body text is 20px, your default spacing size could also be 20px.

Next chapter → ← Previous chapter Back to the table of contents