Most web designers start new projects on their computer. There are hundreds of tools out there for creating wireframes, mockups, prototypes, and doing various other planning activities on your computer or online. But there are also tons of offline, paper-based tools that can speed up your development and design process. Designers who start their planning offline often just use blank or graph paper and start from scratch.
Why start completely from scratch when you can use one of these pre-made guides to save time and better direct your creative energies? Below we’ve compiled a great list of free, downloadable tools, as well as a collection of notepads and other products you can purchase for offline planning and design.
Here are more useful designers toolkits articles you might want to check out:
- 27 Must-Have Starter Kits For Web Designers
- GUI Icon Sets for Web Designers
- 50 (More) Excellent Mini Icon Sets
Downloads
The tools below are all available for free download. They include pre-drawn browsers, grids, and tools for iPad and iPhone development.
Paper Browser
A simple, printable browser window for wireframing. There’s a subtle grid inside the window for better designing (for both 960px wide and 800px wide designs). It’s proportionately scaled for a 1024×768 screen resolution.
MBTI Sketching Paper for Ideation
The MBTI Sketching Paper contains four distinct areas for coming up with ideas for the four specific buying modalities: competitive, spontaneous, methodical, and humanistic. It’s available in four sizes: A4, A3, Letter, and Legal.
Concept7 Sketching Paper
This sketching paper provides a browser window with pre-made grid lines, plus a notes area on the side. It’s available in A4 and A3 sizes.
960 Grid System Sketch Sheets
The 960 Grid System has plenty of templates available for various design programs. But a lot of people aren’t aware that there are also downloadable PDF templates for wireframing with 960.gs on paper.
Grid Design Graph Paper
Konigi has free, printable graph paper for grid design mockups. Available templates include a wireframe with notes area, landscape- and portrait-oriented wireframes, storyboards (with and without notes), two-by-two graph paper, and basic graph paper.
Wireframe Magnets DIY Kit
A set of magnet templates from Konigi. Just print these out onto magnet sheets and you’re ready to start wireframing and prototyping on your whiteboard or other magnetic surface. You can also laminate these to use with dry erase markers.
Sketchboards
These sketchboards are available in two versions: a single screen with note space, or six-up with note space. The multi-page version is great for quick prototyping of multiple pages, where the single-page version is great for more detailed wireframing of specific pages.
6 Pages Template
This is a simple template with pre-drawn browser windows for mockups of six pages on each sheet, with additional space for notes on the side. Very simple, but very useful for top-level planning.
Paper Wireframe Templates
A variety of wireframe templates, with a total of seven included in the download. There are also PSD templates available, if you want to customize them prior to printing.
Wireframe Template
A simple wireframe template with space for the page title at the top and notes along the side. It’s professional enough to use for final wireframes and mockups to show to clients.
iPhone App Wireframe Template
A very stylish iPhone app template, available in portrait and landscape orientations. There are versions with single iPhone mockups with plenty of space for notes as well as pages with three iPhones on a single page.
iPad Idea Sheet
There are three versions available: a two-up sheet with portrait-oriented iPads, a four-up sheet with landscape-oriented iPads, and a one-up sheet with a landscape-oriented iPad. They also have an iPhone Idea Sheet available for download.
Scenario, Taskflow, and Grid Sketchsheets
These sketchsheets are invaluable tools for website planning. The scenario sheet helps you plan out how to get visitors to your site to perform a desired action. The taskflow sheet helps you figure out what steps are involved in the performance of specific tasks on your site. And the grid sheet gives you space for wireframing and notes on specific pages.
Products
The products below are often similar to those available for download above, but come pre-printed. Other tools are also included, such as stencils and sticky notes.
Mighty Mouse Pad
A mouse pad that’s also a notepad. There are three different versions: 5 Days a Week (with space for five days’ worth of to-do lists), Information Central (with plenty of space for notes), and Random Dawdle. $10 each.
iPad Stencil Kit
A metal stencil from UI Stencils for designing for the Apple iPad. It has everything you need to mock-up applications for the iPad. The kit also includes a .7mm Zebra Mechanical Pencil and an interaction technique table. $24.95
iPhone Stencil Kit
Another metal stencil kit from UI Stencils, this time for the iPhone. It also comes with the Zebra Mechanical Pencil and UI Stencils stickers. $24.95
App Sketchbook
Offers spiral-bound App Sketchbooks for designing iPhone and iPad apps. There are standard, perforated, and iPad version available. The iPhone versions come with three real-size iPhone images per page, with 50 pages (double-sided) total. The iPad sketchbook (not yet available) comes with one image per page. $12 each.
Notepod and Notepod+
Life-size notepads for designing iPod and iPad apps. The iPod notebooks come in a 3-pack, with 100 pages per pad. The iPad version (Notepod+) is sold singly and also has 100 pages per pad. Notepod+ is $19.95; Notepod is $17.95/three.
Storyboard Notepad
8 1/2 x 11 inch notepads from Konigi with 50 storyboard sheets, each with space for notes. The thing that sets these apart from most regular storyboard notepads is that each storyboard section is divided up into a grid, making them much more appropriate for interaction design. $9 each, only available in the US.
Browser Sketch Pad
A notepad that includes a browser window template on each page. Each window includes a grid, which is compatible with the Website Stencil Kit ($24.95), also from UI Stencils. $8.95 each.
Wireframe Notepad
Another great Konigi notepad, this time with a pre-drawn graph paper grid specifically for wireframing. It includes an area for notes on one side of the page. The grid has 24 columns, making it compatible with most grid-based CSS frameworks. $9 each, only available in the US.
Dot Grid Book
These dot grid books from Behance are similar to traditional graph paper, but rather than lines, they have dots where lines would intersect. It provides an excellent grid for sketching without the intrusion of solid lines. $14 each.
Whenever Sticky Note Set
For those of us who use sticky notes to keep organized, these might be just the thing to take your productivity system to the next level. Separate note types for things to do today, soon, or someday, plus three additional note types. $12.99.
Further Resources
Find even more resources via the roundups below:
- 50 Free UI and Web Design Wireframing Kits, Resources, and Source Files – A fantastic roundup from Smashing Magazine that includes both online and offline resources.
- Free Printable Sketching, Wireframing, and Note-Taking PDF Templates – Another great roundup from Smashing Magazine, consisting entirely of printable resources this time.
- UI, Wireframing, and Layout Design Resources – A small roundup of printable resources compiled by Es Developed.
- A Collection of Printable Sketch Templates and Sketch Books for Wireframing – The title says it all. Compiled by Geekchix.org.