Designing with Grids

Documentation Freeway
1
Ever wondered what it is about some sites that makes them look clean, coherent and professional? One of the main reasons is so simple it almost seems unlikely, a grid. Simply making sure elements in your site line up with each other can transform your site from amateur to professional.

Grids and guides aren’t anything new, they can be used in most good design applications including Freeway. Freeway Express users can drag guides on their pages to make sure things are all in the right place. Freeway Pro users have it easy though, with the ability to create full grids with gutters and margins in just a few easy steps.

Freeway Express

To create guides in Express first make sure rulers are visible. Go to the View menu and choose Show Rulers (if the menu option says Hide Rulers then you’re already set).

If you want a vertical guide, place the cursor somewhere inside the vertical ruler to the left of your page, click and then drag the guide to the position you want it. Don’t worry if it’s not exactly right first time, you can double click it and set the specific pixel position manually.

To create a horizontal guide do the same as before but this time dragging from the horizontal ruler above the page.

You can place as many guides on a page as you like.

Freeway Pro

The Margins and Grids and Create Guides dialogs can be used in Freeway to create full grids and guides that use margins and gutters. We’ll take you through the process of creating popular 12 and 16 column grids with gutters using these features.

Firstly, start with either the default 960px wide page, or the larger 1200px wide page.

Open the Margins and Grids dialog from the Page menu and set the Top, Bottom, Left and Right Margins to 5px. Close the dialog.

Open the Create Guides... dialog from the Page menu. In the Columns section enter 12 or 16, check the From Margins option and enter 10px in the Gutter field.

If you would like rows of guides then enter the same values in the Rows section and close the dialog.

To add guides manually follow the steps for Freeway Express above.

To make sure that items snap to your guides open the View menu and choose Snap to Guides if it isn’t already selected. The snapping magnetic range can be set in the preferences found in the Freeway menu.

Tip: place the guides on Master pages so they are the same on all your pages.