About four years ago I wrote a post promoting the idea of starting a new Axure project using the 960 grid system. The idea was to use a grid to keep the prototype nice and neat, and also to use a 960 pixel wide work space to ensure the prototype would fit on a typical laptop screen without left and right scrolling. Well, four years is a long time in technology land and so I’m offering an updated point of view here, along with a free Axure starter file.
Now with the ubiquity of higher resolution monitors, and the necessity for websites or apps to work on all types of devices from desktop to laptop computers, tablets to phones, I recommend starting your Axure project with an adaptive template using a Bootstrap grid.
Help yourself to this free Axure Bootstrap template download.
The purposes are the same as what proposed four years ago. First, working with a grid keeps your Axure file neatly organized. Second, through the use of Axure’s adaptive views, you ensure that your prototype will fit on any screen. Of course there’s much more to adaptive views than fitting the prototype to various screens for ease of viewing the prototype. The main purpose of that Axure feature is to allow you to explore how the design is modified as it applies to various screen sizes and devices. In that respect it’s often critical to start designing mobile first and working back up to the larger tablet and desktop screen sizes.
The template has guides set for one, two and three equal columns as well as a set of guides for three unequal columns. The guides adjust as the screen sizes on the adaptive views change from Large Display (1140 pixels+), Landscape Tablet (1024 & smaller), Portrait Tablet (768 & smaller) and Portrait Phone (375 and smaller).
When using the template (screenshot of the Axure file below) you can delete some of the Bootstrap grid guides to clean up your workspace if you don’t need them all. The Master pages include a file named “Bootstrap grid 1,2,3 equal & 1 unequal col.” After deciding which grid guides you need for a given project, just delete the others from this master.
The downloadable Axure bootstrap template also includes a free “bonus.” There are a couple starter pages that may be helpful to begin any basic website project – complete with mobile navigation. You’ll need to install the Google Roboto font and adjust your Axure publish settings to use that web font if you post it online. Here’s a demo.