Ordering Disorder: Grid Principles for Web Design: Process
This chapter is from the book
This chapter is from the book
This chapter is from the book
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:
- Research and requirements
- Wireframes
- Preparatory design
- Pencil sketches
- Units, columns, baseline development and calculations
- Page sketches
- Comps
- 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 discuss two critical steps in this process. The first is research, and the second is sketching.