About
This 8.5 x 11 inch graph paper is made for visual designers, interaction designers, and information architects. You'll find styles for wireframing user interfaces, story boarding interaction, and plotting values on a two by two grid. Plus you'll get a basic grid for drafting sitemaps or anything else that might come up.
Scanning
These pages are great for sketching, but also work well when producing high fidelity drawings. The title bar and grid lines are non-photo blue, so you can easily remove them when scanned. The thick black lines for boxes will show in scans and are 2px wide to match the weight of Pentel Sign Pens.
Download
Download all of the PDF files.
You can also buy notepads from the store!
This template is free to use, but may not be distributed without permission. If you like it, a donation is appreciated.
Wireframe with Notes
This is a wireframe grid divided into 24 columns with gutters between each column. The grid is especially useful to designers who are working within a CSS framework such as Blueprint, which also divides its grid into 24 units, so setting up common divisions is easy (1/4 + 3/4, 1/3 x 3, 1/3 + 2/3, 1/2 x 2, etc.). The column units are numbered along the top of the grid. To the right of the grid is a ruled column for adding labels and annotations.
Wireframe (Landscape)
The grid in this graph paper is identical to the wireframe with notes, but the notes section is removed to make room for a wider page schematic.
Wireframe (Portrait)
The grid in this graph paper is identical to the wireframe with notes, but the notes section is removed to make room for a wider page schematic.
Storyboard
This is a storyboard with 4 cells. Each cell provides a simple grid.
Storyboard with Notes
This is a storyboard with 4 cells. Each cell provides a simple grid. The area beneath each cell is ruled for notes.
Basic
This is a basic grid box. Use it for concept diagrams, sitemaps, spectrums, tables, and whatever else you might sketch.
More Grid Tools
To make the most of this system, a designer can complete their process by using other templates and tools that utilize the same grid system, such as grid notepads, an OmniGraffle wireframe template, Adobe Photoshop template, and Adobe Illustrator template.
