I write about web design, CSS, and other not-so-wild topics. To match, this site should employ a grid system that’s quietly varied; balanced, but with the ability to give the content of posts uniquely expressive typography. I’ve found laying out content using ratios, rather than columns, better suits a fluid design process, and helps take advantage of available space in meaningful ways.

In Gridset, I chose the “Penton” ratio for my proportions, as 1:1.2721 creates small but noticeable increments in size. From this ratio I derived a scale that was then applied to both my layout grid – which divides the viewport space – and the macrotypographic spaces (margins, padding, etc.).

The form of the layout grid has no real analog, though I started by mimicking the page margins of a book. My goal was to give the content ample space, especially at the start of posts. The left margin is equal to the top margin, while the right margin is bisected into whitespace and a vertical footer. My process to arrive at this grid was messy and completely unscientific, feeling out the proportions while jumping between the browser and Gridset.

For the content itself, I wanted to take full advantage of the available space at all times, and use variation of size to express hierarchy. I also wanted to avoid stagnating the composition with even columns of text. I worked iteratively on a simple prototype, bringing in my type from Typecast, grids from Gridset, and resizing to find at which viewport sizes the composition would break down. At problem sizes, I would apply a new grid for layout or content, and eventually found fluid system that worked. Again: messy, unscientific.

The resulting layout is unique, useful, and completely fluid. It has created a challenging landscape in which to lay out each post I write, but its just enough to continually spur me towards a more expressive use of content.

The navigation had been decided months before I began, as I felt a flat layer of posts with an ever-present index made since for my content. Sidebars, categories, or related links felt superfluous and distracting. Eliminating these allowed for a wider exploration of form.

With this and the other broad strokes decided, the details fell into place quickly:

• I worked in black, white, and red for most of this process to indicate how I would use color, postponing the actual hue choices to later in the process when I would have time to be finicky.
• To decide the actual hues, I wound up just stealing a palette from Vasilis van Gemert’s excellent studies in proportion, color, and type.
• Also inspired by Vasilis’ efforts, I pulled the footer up on the right, rotating the text and providing a vertical band of color that became characteristic of the aesthetic.
• At first I designed my grid system with no gutters, using padding on columns to separate content. This didn’t resize well, and I eventually found that gutters, defined in percentages, worked better for this layout. I matched the content grid’s gutter size to the space between the content and the side-footer, strengthening the connection between content and layout.
• The most difficult decision was where to put the logo. I tried just about everywhere, and settled on its current location by finding where it got out of the way, but still helped anchor the composition at the top of the content.

Build walls around the problem

Designers find two things most terrifying: a blank canvas, and designing for oneself. The combination of the two explains why web designers are perennially working on their next site. The walls I built around my choices in the early stages were wholly responsible for this success. I was able to focus on my goals, rather than chasing down infinite possibilities. The results, by my own criteria, make me happy.

But then again, you’re not me. Following this process might be a baffling nightmare for you. You must find what works for you and your content, but hopefully a note here, or an aside there, will help inspire your path next time you find yourself designing for yourself.