Balloons icon
We're celebrating our birthday!
Get 6 courses for $20 →
Advertisement

Ordering Disorder: Grid Principles for Web Design (Free Excerpt + Discount Code!)

by

Today I've got a special treat for all of you grid lovers out there! Khoi Vinh (one of the leading authorities on typographic grid systems in web design) and Peachpit have agreed to let us publish an excerpt of Khoi's new book on grid design: Ordering Disorder: Grid Principles for Web Design. In this excerpt, he'll outline the principles that every designer should keep in mind when designing a website on a grid.


About the Book

The grid has long been an invaluable tool for creating order out of chaos for designers of all kinds—from city planners to architects to typesetters and graphic artists. In recent years, web designers, too, have come to discover the remarkable power that grid-based design can afford in creating intuitive, immersive, and beautiful user experiences.

Ordering Disorder delivers a definitive take on grids and the Web. It provides both the big ideas and the brass-tacks techniques of grid-based design. Readers are sure to come away with a keen understanding of the power of grids, as well as the design tools needed to implement them for the World Wide Web.

The following is an excerpt, but as you'll read, the entire book is written so that it can be picked up at any chapter and still make sense... so this should be a perfect place for you to jump in.

We also have a special 35% off promo code for our readers who want to pick up the entire book (at the end of the post)!


Chapter 3: Process

The balance of this book focuses on how to build a grid, including an overview of the steps to a working solution. Before we begin, though, it’s useful to outline principles that every designer should keep in mind.

A grid should focus on problem solving first and aesthetics second. A grid can provide such a seductive aesthetic enhancement to any design that it’s tempting to focus on its beauty rather than its utility. Many designers become preoccupied with the beauty of the grid and contort content or functionality to squeeze it in, regardless of how uncomfortable or ill-suited it may be. But the most successful grids are built in service of well-defined problems. Whether they’re communication problems, organizational problems, or transactional problems, a grid derives its beauty from how well its resolves those challenges.

A grid is a component of the user experience. A grid is not a tool to impose complete control over a user’s experience of a website. Rather, a grid is a framework within which the user can control his own experiences. Designers should not force every element and interaction to occur within the grid, nor should they allow the user experience to be unformed and unpredictable. It’s the designer’s job to make certain decisions for the user—not every decision, but enough so the user can accomplish his goals unhindered. The grid is a tool for that job.

The simpler the grid, the more effective it is. The principles described in this book can be used to create grids made up of sixteen, twenty, or even more units, in any combination of columns of uniform or irregular width. However, the fact of the matter is that the designer should always strive to create the simplest grid possible. As we’ll see, mathematic precision is a key element of good grid design, but mathematical usefulness is just as important. The formulas you use to calculate combined units and columns should be fairly straightforward, even simple enough to do in your head or to explain quickly to a colleague. The simpler a grid system is to use and to explain to others, the more users will benefit from that grid system.


Steps

Here, then, are the major steps in designing a grid solution:

  1. Research and requirements
  2. Wireframes
  3. Preparatory design
    1. Pencil sketches
    2. Units, columns, baseline development and calculations
    3. Page sketches
  4. Comps
  5. Production (code)

Keep in mind that though our thinking should be rigorous, our process need not be. Though the order in which I’ve presented these steps has been useful to me, it may not necessarily work for every
designer. Not every step must be followed in exactly the same order, for a specific amount of time, in a specific way, or even at all. For example, step 3, preparatory design, is a set of three different activities
that are often done concurrently, with the designer switching between pencil and paper, software, and back-of-the-envelope math as necessary. What matters is not the rote repetition of these steps, but following
the principles of good grid design throughout.

All the same, it’s worth spending some time up front to discusstwo critical steps in this process. The first is research, and the second is sketching.


Research and Constraints

We first judge truly good design not by its beauty or its innovativeness or its efficiency, but rather by how well it responds to its original problem. Successful solutions demand that the designer grasp the problem presented to her and the constraints within which she’s working. The designer has to ask and understand the answer to questions such as: who is the audience, what is the context, when will the solution be encountered, how will the solution be used—and even why is the solution necessary?

These questions can be difficult to answer, and the answers themselves are often unclear or difficult to parse. A designer must be persistent in asking them, in pressing for good and accurate answers, and in thoroughly examining and comprehending those answers.

Because a grid can give us such a head start in creating solutions, it can be tempting to forgo this stage of the process. Once a designer masters the rudiments of grids, it becomes much easier to start the mechanical process of constructing units and columns than to do the hard work of asking and answering these questions.

But nearly every design problem demands a period of thoughtful study before the search for a solution begins. Without a clear sense of the challenge at hand, any design work—including the development of the grid—is done in vain. It’s a much more productive use of time to do research at the beginning of a project than to jump straight to the design.

Grid-based designs are no different. The more completely the problem is investigated, the better the grid will be. Well-researched grids maximize the creative options available to the designer. They also anticipate and avoid the traps of prematurely constructed grids: inappropriately structured units and columns, grids that are good for some aspects of the problem but inadequate for others, grids that fail to account for constraints that may not be obvious at the outset, grids that prove so unworkable that they need to be rebuilt at inappropriate times, and grids that prove unusable for collaborators.

What kind of constraints should the designer look for? They fall into three main categories:

  • Technical constraints determine the delivery of the design solution. They include the target screen resolution and the generation or “modernity” of the target Web browser, two critical factors for any design. Often, technical constraints regarding a site’s publishing system are important elements as well; the designer needs to consider limitations that such systems might impose on how the content is output. A publishing system frequently affects how content creators produce content for publishing, the workflow, which in turn influences the kind of design solution that can be put into place.
  • Business constraints determine the very purpose of the solution. Whether it’s to increase visitor traffic, time spent on a site, clickthrough performance to advertisements, or conversions of site visitors to customers, these goals are the most important imperatives for any design solution. The designer should consider branding, positioning, and marketing considerations as well. Finally, she should fully assess the business’s ability to maintain the solution she creates: who will need to work with the grid after it’s completed, and what are their skills.
  • Content and editorial constraints determine the production of the content. They account for the different forms content might take, such as the types of articles, their length and the length of their headlines and summaries, pull-quotes, images and embedded content such as video and interactive elements, data tables and charts, and so forth.

Of course, designers will bemoan the inconvenience of constraints, or perhaps the thorniness of some of the particular constraints they must contend with. If only those constraints were lifted, if only the problem were slightly different, then the solution would be much easier to arrive at or more elegant in nature.

However, these constraints have a silver lining: in some ways they might make a problem more difficult, but they can also make it easier to arrive at a design. Comprehensive solutions like grids can often benefit from being built around one or two nonnegotiable constraints, immovable requirements that can’t be easily altered during the design process. To begin with, they can directly influence the proportions of a grid, the very sizes of the units, columns, and regions that the designer constructs. These kinds of constraints might appear to limit the options available to a designer, they very often also have the effect of increasing a designer’s inventiveness. The more wide open a design problem and the less restrictive the constraints, the less a designer is likely to make those insightful leaps of logic that are the hallmark of great design. Nonnegotiable constraints can help spur a designer to do this. Whether it’s locking in a particular dimension, a technological imperative, an advertising unit, or some other factor that a designer must work around rather than conveniently modify to her own needs—having one immovable requirement can be enormously useful.


Sketching

Having spent so many paragraphs belaboring the importance of thoroughly researching a problem, I can make this next point more succinctly: sketching on paper is an essential tool for thorough design problem solving, and it’s particularly helpful in developing grids. The simple act of quickly and loosely drawing out speculative combinations of columns and potential layouts can save vast amounts of time and often leads to much more creatively fertile grid solutions than simply jumping ahead to designing or even coding a grid.

I can’t emphasize enough the power and usefulness of using old-fashioned pencil and paper to work out problems, to brainstorm potential solutions, and to explore promising or even not-so-promising ideas that may be too costly or time consuming to test otherwise. In fact, the most important aspect of sketching is not so much making marks on paper, but rather being able to run through many ideas quickly, with little cost. Remember, you have no expectation that the sketches will amount to anything more than just sketches. Sketches don’t need to be pretty.

As mentioned earlier, it’s also important to keep in mind that sketching need not be a discrete phase of constructing a grid that begins and ends at specific points. Sketching can happen at any phase throughout the project, at multiple levels of completion—though of course it’s most useful to sketch earlier, so that more ideas and possibilities can be run through very quickly. Keeping a pencil and a pad of paper handy at all times is sure to prove invaluable.


Terminology

The vocabulary that describes the various components of a grid might seem simple, but it can also be surprisingly unspecific. For example: the notion of a column seems straightforward enough, but on a page based on an eight-column grid, a designer might create a layout with only two columns of text, rendering the meaning of that term imprecise. Even books about the craft of grid-based design don’t always agree on terminology, with some using terms (e.g., regions, fields) that are missing from others. For the purposes of this book, then, it’s important to establish some common ground terminology as we proceed further into more practical discussions of grids.

Units

The building block of any grid, a unit is the smallest vertical division of the page (i.e., units are measured in width), upon which columns are built. Units are typically too narrow to house most textual content.

Columns

Columns are groups of units, combined together to create workable areas for the presentation of content. Most text columns, for example, require two or more units to be workable. A grid system of, say, sixteen units can be combined into two columns of eight units each, or four columns of four units each, and so on.

Regions

Regions are groupings of similar columns that form parts of the page. For example, in a four-column grid, the first three columns from the left might make up a single region for the display of one kind of content, and the remaining column might form another region.

Fields

Fields are horizontal divisions of the page (i.e., fields are measured in height) that help a designer to visually pace the placement of elements on the Y-axis. Fields can be calculated in many ways, but using the golden ratio is one of the most effective methods.

Baseline Grid

In traditional typography, the baseline is the invisible line on which letterforms rest, e.g., the bottom edge of a capital E rests on the baseline, while the descender of a lowercase p will fall below the baseline. The baseline grid is formed by a uniform, top-to-bottom repetition of baselines spaced apart according to the leading or line-spacing of the text.

Horizontal vs. Vertical Orientations

These concepts are notoriously easy to confuse (a unit can be thought of as either a horizontal or vertical division of a page, depending on one’s point of vew), so this book refers instead to the columnar grid (divisions of the page measured in width) and the baseline grid and regions (divisions of the page measured in height).

Gutters

Gutters are the empty spaces between units and columns. When units are combined into columns, they incorporate the gutters between them, but not the space to the left of the leftmost unit nor the space to the right of the rightmost unit.

Margins and Padding

Margins are the space outside a unit or column. Padding is the space within a unit or column. Margins are generally used to create gutters, while padding is generally used to create a small, visible inset within a block of text inside a column.

Elements

An element is any single component of a layout. Examples include a headline, a block of text, a photo, or a button.

Modules

Modules are groups of elements, combined to form discrete blocks of content or functionality. A registration form, for example, is a module composed of several constituent elements such as a label, a form field, a button, and so forth.


Grab the Entire Book (Special Promo Code!)

This has been a single chapter from the book... if you guys want to read the rest of the book you can buy it over at peachpit.com. The good news is that we have a special promotional code for our readers. Get 35% off the price by entering the code "KHOI" during the checkout process at peachpit.com. Oh, and U.S Domestic shipping is free!