Layout

The Grid

1 Column Grid

To keep things simple, we're only going to be using a 1 or 2 column grid. The use of these grids will be determined by the content, so use your best judgement when laying out the flow of the text. This text is currently using a 1 column grid. The text below uses a 2 column grid.

 

2 Column Grid [First Child]

I am the first child of a two column grid. I get all the attention.

2 Column Grid [Last Child]

I am the last child of a 2 column grid. I get lots of secondhand shoes.

 

 

Whitespace

The Importance of Whitespace

Whitespace is a staple of clean, usable layouts and our designs utilize it out the wazoo. It helps with all kinds of things; most importantly, readability and cleanliness. It takes a little bit of a designer's eye to use whitespace properly, but a mantra you should follow to is to "let the design breathe". If it feels too cramped, it is. 

 

Some Tips on Using Whitespace Properly

There actually isn't much to it, but here are a couple pointers:

  • Space blocks and Horizontal Rule blocks are your friends. Use Space blocks pretty liberally, as they're just whitespace. Be a little more conservative with Horizontal Rule blocks. They can muddy up a design if used too frequently. For example, we use them to separate the main sections of reading guides.
  • When using H2's, put them in their own Text block. Add a new Text block below them to begin your supporting copy (ie. don't just hit Enter after the H2 to put the cursor on a new line). This ensures that the spacing across all our posts and reading guides will be consistent.
  • When using H3's and Callouts (faux H4's), you can put the header and copy in the same Text block, so you just hit Enter after the header to send the cursor to a new line.