This site is designed to work with IE7 or greater. Please consider upgrading your browser.

Tools

Graph Paper

7 different graph paper files to print and use for UX work. 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.

These pages are great for sketching, but also work well when producing high fidelity drawings. The title bar and grid lines are photo-safe, so they won't show up when you scan them into your computer. The thick black lines for boxes will show in scans and are 2px wide to match the weight of Pentel Sign Pens.

More info...

Illustrator Template for Blueprint CSS Comps

An Adobe Illustrator template for creating visual design comps using a 24 column grid like the Blueprint CSS Framework. Consists of guides that comply with Blueprint's grid of 24 columns of 30px, 10px wide gutters, and a horizontal width of 950px. Horizontal guides are provided at 18px or 1.5 em line-height for 12 px base font.

More info...

OmniGraffle UX Template

An OmniGraffle Pro (version 5) template for User Experience Designers with the formats you'll need most for interface and interaction design. Sized so you can work at 100%, and print at 8.5" x 11" or 11" x 17".

In this template you'll find shared layers (masters) for a title page, wireframe, wireframe/storyboard hybrid, simple storyboard, and storyboard with notes.

More info...

OmniGraffle Wireframe Stencils

This is a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x (Mac OS X). It consists of most of the basic elements you'll need to create user interface specifications. The stencils on Konigi update the wireframe stencils that I previously maintained at urlgreyhot.

More info...

Photoshop Template for Blueprint CSS Comps

An Adobe Photoshop Template for creating visual design comps using a 24 column grid like the Blueprint CSS Framework. Consists of guides that comply with Blueprint's grid of 24 columns of 30px, 10px wide gutters, and a horizontal width of 950px. Horizontal guides are provided at 18px or 1.5 em line-height for 12 px base font.

More info...

Schedule and Cost Summary Calculator

This Cost Estimate and Scheduling spreadsheet provides a lightweight method for learning to estimate time to complete a web design project, and calculating cost for completion. The intended audience is individual freelancers or contractors. This may not be an ideal format for the calculation of project team estimates.

The purpose of the document is to teach you to get acquainted with spreadsheets as tools for cost estimation, with the hopes that you will learn to use and modify it to suit your needs. Please note that this is only meant to be learning a tool and must be customized to be useful to you. This is NOT meant to be an out of the box solution.

More info...

Wireframe Magnets (DIY Kit)

This DIY magnet template is based on the Konigi wireframe stencils and includes 3 sheets of elements that might be useful in whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, optionally laminate them so they're usable with dry-erase markers, and cut.

More info...