This chapter is from the book
This chapter is from the book
This chapter is from the book
Grids Made Easy
Over the last several years much discussion has taken place about using traditional grids in web design. Articles and books by designers like Mark Boulton and Khoi Vinh have helped us learn and understand how to use grids effectively to create beautiful designs for the screen. Constraints in design can be a pain and a blessing at the same time. Creating a grid is an essential task that will enable a foundation on which to build a consistent design scheme.
How do we create grids today? I’m sure designers everywhere use a lot of different methods, including not using a grid at all. Typically, though, we painstakingly create a grid by dragging guides from rulers and trying to place them consistently on the page.
My old process for creating a grid was ridiculous. I used to draw a couple of rectangles, one for the column width and one for the gutter, and then copy and paste them end to end across the page. I’d use those as markers so that I would know where to snap my guides. Every new page I would create would need to use the grid; worse, I would often have multiple files or grid layers on sites that called for the use of more than one grid. If those grids ended up changing, frustration would ensue.
Fuss no more, as Illustrator can help make you more productive by not only letting you create a single grid easily, but also allowing you to maintain multiple grids in a single document.
Creating a Grid
You’ll start the mockup for Wheelr by creating a standard 950 pixel-wide grid with 24 columns and 10-pixel gutters. This grid will sit in the center of the 1024 x 768 document you created earlier, defining the “safe” area in a browser or tablet device. In the past, I would have done all kinds of math (which I’m no good at) to figure out how wide the columns and gutters needed to be so that the measurements were in whole numbers. Thankfully, there is a feature in Illustrator that will do these tricky calculations automatically.
- Start by choosing View > Guides > Clear Guides to remove all the guides. This will give you a clean slate from which to begin.
- Draw a 950 (W) x 768 (H) rectangle, give it a color of your choosing, and align it to the center of the artboard (4.13) using the Align to Artboard feature.
4.13. Center the rectangle on the artboard before you create the grid.
- Choose Object > Path > Split Into Grid.
The resulting dialog box allows you to choose settings for this particular grid.
- Under the Columns section, enter 24 in the Number field and 10 px in the Gutter field (4.14).
4.14. Create a 24-column grid with 10 pixel-wide gutters.
- Select the Preview option to see what’s being created, and select the Add Guides option so you don’t have to add your guides manually afterwards. Click OK.
The rectangle you started with is now divided into 24 rectangles (4.15). The grid and the rectangles should all be selected at this point.
4.15. A standard 24-column grid.
- Press and hold the Shift key and click the guides to deselect them.
- The extra rectangles are unnecessary at this point, so press Delete to get rid of them.
)
)
)
Making the Gridlines Fit
Now you have a nice 24-column grid. The last thing to do at this point is resize the gridlines so they fit nicely on the artboard. It’s an optional step, but it helps when you have multiple artboards so you don’t have grids overlap other artboards. To make them fit, follow these steps:
- With the Direct Selection tool
(A), drag to select all the anchor points on the top of the grid (4.16).
4.16. Select the top anchor points of the grid with the Direct Selection tool.
- Use the arrow keys to nudge the anchor points until they sit at the top of the artboard (4.17).
4.17. Move the anchor points to the edge of the artboard.
- Repeat for the bottom side so that all the vertical grid lines fit within the bounds of the artboard.
- With the Direct Selection tool (A), select the two horizontal gridlines by clicking on their respective line segments. Press Delete twice to remove these two horizontal lines, as you do not really need them.
- Press
S/Ctrl+S to save your work.
)
)
Applying the Grid to Multiple Artboards
You started with one artboard; as you begin to design more of the application, you may need to create multiple artboards in this single document. This 24-column grid is versatile enough to be useful on every page of the app. The question remains: How can you get this grid on every artboard in the document without having to copy and paste to each, or worse, recreate the previous steps on each artboard? The answer is stunningly simple.
- Click the New Artboard button
at the bottom of the Artboard panel three times to add three more artboards to the document. - Select the grid with the Selection tool
(V). - Choose Edit > Cut (X/Ctrl+X) to cut the grid to the clipboard.
- Choose Edit > Paste on All Artboards (
V/Ctrl+Alt+Shift+V).
This brilliant shortcut pastes the grid to every artboard in exactly the same spot as where it was cut.
To add some variety to the layout, create a different grid for the landing page than you would on the rest of the application. All you would need to do is delete a grid from one of the artboards and follow the steps to create a new grid with different properties. When it comes to grids, Illustrator allows precision, speed, and flexibility. By using these tools, you’ll find it easier to create and maintain grids than ever before.