Graph Paper

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, and story boarding interaction. I've been told that it's also used by animators and filmmakers. Enjoy.

Scanning

These cyan and gray grid pages are great for sketching, but also work well when producing high fidelity drawings. The boxes and grid lines of the cyan versions are non-photo blue, so you can easily remove them when scanned. The gray works better if you like more prominent grid lines.

Download

Download all of the PDF files.

These templates are free to use and distribute, but may not be sold without permission. If you like it, buy me a coffee or make a donation to keep my server running. ;)


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.). 1/4 column divisions are marked along the top of the grid, and 1/3 columns are marked on the bottom. There's also a 1/2 division on the side, which makes it easy to split the grid into 4 quadrants for plotting values on a 2x2 graph. To the right is a ruled column for adding labels and annotations.

Preview in Cyan or Gray

Download wireframe and notes paper in Cyan or Gray


Wireframe (Portrait)

The grid in this graph paper is identical to the wireframe paper above, but the notes section is removed to make room for a larger (taller) page schematic. Like the landscape wireframe grid, this one provides 1/4 and 1/3 divisions, but they're all marked at the top of the grid. Title/project and date areas are provided at the bottom.

Preview in Cyan or Gray

Download wireframe paper in Cyan or Gray


8-Up

This is a sheet with 8 grid boxes for doing fast thumbnail sketches or 6-8-5 sketch sheets following Tod Zaki Warfel's method of doing 6-8 sketches in 5 minutes. Each cell provides a simple grid and a rule below for a title or caption.

Preview in Cyan or Gray

Download the 8-Up paper Cyan or Gray


Storyboard with Notes

This is a storyboard with 6 cells. Each cell provides a simple grid. The area beneath each cell is ruled for notes.

Preview in Cyan or Gray

Download storyboard paper in Cyan or Gray


Dot Grid

This is a simple dot grid sheet. For best results when printing, set up your printer to print with 0" margins and do not scale to fit.

Preview in Cyan or Gray

Download Dot Grid paper in Cyan or Gray


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 an OmniGraffle wireframe template.

Sketch paper for the mobile designer

Erlend posted on the Artueel blog about a great idea they had for mobile designers—a sketchpaper document you can print out (PDF and PSD formats available) so you can get your ideas on paper. They’ve created sketchpaper for the iPhone and the Nokia N95.

Since we‘re all big fans of the iPhone and the mobile future in general, we want to help the mobile designer achieving his goals. For those who like to sketch the design/flow of their mobile app or website we present you: sketch paper for the iPhone and Nokia N95.

Each document includes an image of the mobile device, space for a title, and a lined area for notes. Looks a lot like shells for wireframes and storyboards. There are pages to show the iPhone, for instance, in both landscape or portrait mode, with browser chrome, or stripped down for application designs. Several formats are included to show 1, 2, or 3 devices per page. Brilliant.

http://blog.artueel.be/sketch-paper-for-the-mobile-designer/

Yahoo! Design Pattern Library Stencils

The Yahoo! Design Pattern Library have released stencils for design patterns in OmniGraffle, Visio, PDF, PNG, and SVG format. I had planned to do the same for OmniGraffle users, but they beat me to the punch. :) This has easily become the best resource out there for design pattern examples. Congrats to Christian Crumlish and his team.

http://developer.yahoo.com/ypatterns/wireframes/

Color Deficit Simulators

There are several applications and web services that help you determine if the colors used in your designs will be accessible to users that cannot view all colors. My personal favorite is the Sim Daltonism app for the Mac (pictured above).

  • Sim Daltonism is a color blindness simulator for Mac OS X. It filters in real-time the area around the mouse pointer and displays the result — as seen by a color blind person — in a floating palette.
  • Vischeck's color deficit simulator plugins for Photoshop allow you to simulate how color blind users see your screens.
  • etre's color blindness simulator is a web-based service that allows you to upload a screenshot and view the screen with color blind simulation.
  • Wickline Colorblind Web Page Filter is a web-based service that allows you to specify an URL to test, and provides an interactive control to toggle between color blindness simulations.

http://michelf.com/projects/sim-daltonism/

CSS with Vertical Rhythm

drewish.com provides a nice script that takes a base font and line height and generates a scale of font classes with font sizes, line height, and margins calculated as ems. It's an odd selection of scale however with fonts sized at 12, 14, 16, 18, 20, 22, and 24 px. You can easily set this to a more familiar 12, 14, 16, 18, 21, 24, 36px. Or following Mark Boulton's lead, you can set to 11, 13, 16, 18, 24px.

One very nice thing about using the classes this generates is not only that they are scalable via the browser because they are set as ems, but that you can do tricks like line up text on a ruled background with predictability, as in the example below.

This is text set at 36px.

This is text set at 12px (the base font size). Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam hendrerit, augue ac egestas bibendum, nunc nulla aliquam ipsum, ultricies luctus nibh nunc interdum magna. Vivamus aliquet tincidunt dui. Donec iaculis ornare ipsum. Sed dapibus erat nec purus. Donec elementum rutrum est. Mauris iaculis.

This is text set at 14px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam hendrerit, augue ac egestas bibendum, nunc nulla aliquam ipsum, ultricies luctus nibh nunc interdum magna. Vivamus aliquet tincidunt dui. Donec iaculis ornare ipsum. Sed dapibus erat nec purus. Donec elementum rutrum est. Mauris iaculis.

This is text set at 18px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam hendrerit, augue ac egestas bibendum, nunc nulla aliquam ipsum, ultricies luctus nibh nunc interdum magna. Vivamus aliquet tincidunt dui. Donec iaculis ornare ipsum. Sed dapibus erat nec purus. Donec elementum rutrum est. Mauris iaculis.

http://drewish.com/tools/vertical-rhythm

Install multiple versions of IE on your PC

The Multiple IE Installer is a must have resource for front end developers. I had to configure a new computer for myself because of a recent job change, so that meant installing all of my design/development tools again. On my new MacBook Pro, I run VMWare and just ran Tredosoft’s Multiple IE Installer for Windows XP. On an XP machine with IE7 (you must upgrade to IE7 before running this), the application will allow you to select versions of IE 3, 4, 5, and 6 to install. I’ve had it working on my last 3 Macs running Windows on both Parallels and VMWare without any problems.

http://tredosoft.com/Multiple_IE

Textism Word HTML Cleaner

In my old days working on a corporate portal, I occasionally had to take someone’s HTML, which was generated by Microsoft Word, and drop it into an entry on a CMS. But before I could just cut and paste, I had to run a series of regular expression replacements in vi or Allaire HomeSite to strip out any of the god awful HTML that Word generated. To pay homage to the past, fate recently dropped a Word HTML file in my lap. I was surprised to see how much cleaner the HTML was, but it was still pretty awful and full of excessive markup cruft.

Doing a search today for Word HTML cleanup turns up Textism’s excellent Word Cleaner service, which allows you to upload a Word HTML file, and then spits out cleaned HTML ready for you to use in your blog or CMS. It worked out perfectly for me. I only wish this were around 10 years ago!

http://textism.com/wordcleaner/