Start your Axure project using the 960 Grid System

When starting a new project in Axure you should start with a grid so that your layouts stay consistent from page to page. (An updated version of this post is available here.) I recommend using the 960 Grid System as the basis of your Master page layouts. This will ensure that you are designing your wireframes at a size that is optimized for 1024×768 browsers and that your page templates will be compatible with good responsive design practices.

In Axure, if you select Wireframe > Grid and Guides > Create Guides in the main menu (or right click on the wireframe grid and pick from the context menu), it opens the Create Guides dialog. In that dialog you can select the 960 Grid 12 Column or 16 Column guides. However, this gives you the guides for all 12 or 16 columns, which in my opinion clutters up the screen. Of course one way to deal with that is just remove the guides you don’t want.

Another way is to only set the guides you want in the first place. I find it easier to visualize a page layout by placing guides on top of a 960 Grid image. To do this, open a new Axure project and place either the 12 Column Grid image (download the 12 Column image here) or the 16 Column Grid image (download the 16 Column image here) on a Master page. To create global guides for all the pages, hold Cmd (Mac) or Ctrl (PC) and drag a guide from the ruler until it is positioned where you want it on top the grid image. You can then just delete the image, or duplicate the Master page, delete the image on the duplicate, and start building your Masters.

You can download an Axure file with the 960 Grids already placed on Master pages (shown below — click for larger view). Enjoy!

Axure 960 Grid System 12 ColumnAxure 960 Grid System 16 Column

4 thoughts on “Start your Axure project using the 960 Grid System”

  1. Thans John! I’ve been using Axure for a couple of years, but haven’t used a grid system so far. Now it’s time to make my prototypes formal and more structured. Thank you for the post!

    • You’re welcome, Yingying. If you haven’t downloaded Axure 7.0 I highly recommend it – it’s greatly improved! And it’s a free upgrade for current license holders.

    • 960 pixels of width ensures that there will be no horizontal scrolling on a 1024 pixel screen size. The browser’s live area is actually smaller than the 1024 screen size. You can get away with more than 960 pixels in width but this is a safe size that works across all operating systems and browser types.

Leave a Comment

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.