Touchscreen Stencils

Dan Saffer of Kicker Studio provides free touch screen gesture stencils for OmniGraffle, Visio, Illustrator, and Fireworks. The icons are designed by Rachel Glaves for Saffer’s book, Designing Gestural Interfaces, and depict hands performing common touchscreen gestures like tap, slide, point, drag, pinch, and spread.

Accessibility Checklist

Ben Cano has created an accessibility checklist with priority categorized accesibility checkpoints or criteria that map to 14 accessibility principles. Going through the prioritized checklist, the designer/developer takes a gradual approach from minimal acecessibility towards optimal or most accessible.

(This entry posted on behalf of Ben Cano)


Usabilla is a remote usability testing service that allows you to quickly create short tests that solicit feedback from your users. The service allows you to direct a few questions using screenshots of pages, e.g. you might ask users what do you like/not like about this page, where would you look to find X? Users then click on screenshot to add markers with their notes or answers.

Loop11: Online, Unmoderated User Testing

Loop11 is a web-based user-experience testing tool, allowing companies to conduct online, unmoderated user testing.

Loop11 provides the ability to gain detailed insights and understandings of user behaviour. These insights are obtained via a live interactive environment where users are asked to complete a series of tasks and questions on your website or interface. All interactions are captured, processed and made available in real-time reports.

Loop11 is not a survey or web analytics tool, but a user experience tool helping you to understand user behaviour.

Schedule and Cost Summary Calculator

About this template

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 who need to prepare proposals for potential clients. 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.

How it works

This spreadsheet works by breaking your phases into individual tasks. You estimate time to complete tasks and start dates. Estimates are rolled up to show the sum of hours and estimated completion date for all tasks in a phase. Those numbers are then rolled up to show the sum of hours, cost, and completion date for all of the phases. This makes up your cost summary for your proposal.

Calculating time

The spreadsheet calculates time to complete each task based on an estimated low and high number of hours for each task in each phase of work, and calculating the mean or average of those values. This is done so you can enter a range rather than a hard number for safety. The range should be based on your own knowledge of how long it takes to complete each task. Only you will know how long you take to complete these tasks. To better know that number, you may want to work outside the spreadsheet to break each task into sub-tasks that can be estimated in hours.

When a starting date is entered for a task, an estimation of finishing date is calculated based on your value for the number of hours per day you can devote to the project which you enter at the bottom of the spreadsheet, and subtracting any holidays you specify (also at the bottom).

Calculating cost

Cost is calculated by taking the mean hours for a task and multiplying by the rate of pay you select. For this example, I use 3 different rates of pay. You will need to calculate your formulas to the appropriate rate of pay in the Cost column.

Estimating Hours

Coming up with these numbers will depend on the information that you gather in your request for information/statement of work produced with the client. You will llikely do a more broken down estimate of hours based on scope of work. The screen inventory is an example of a document that can be used to break down a task.

Modifying Calculations

Because you may only want to use part of this spreadsheet, e.g. give hard estimates without computing means and using only 1 pay rate, you may wish to edit the formulas included here. The sheet and its formulas are not protected, so you may want to configure your phases and tasks, rates and rate assignments, as well as holidays. You may then protect the document so it can be used for information entry only. Some knowledge of Excel is mandatory for modifying formulas.


Michael Angeles and Konigi provide no warranty for the use of this spreadsheet. By electing to use this spreadsheet, the user acknowledges that any errors are the sole responsibility of the user, due to data entry, formula creation, calculation, or any use of this spreadsheet on the user's part. Use this spreadsheet at your own risk.


Download the Excel Template
This template is free to use, but may not be distributed without permission. If you like it, a donation is appreciated.

Lovely Charts Online Diagramming Application

This is a review of Lovely Charts, a free online diagramming tool that provides wire frame, flow chart, and site map stencils. I like the unique, simple method they provide for quickly creating flow charts and site maps. In this screencast I show how to do a few simple flow diagrams and a wireframe, as well as discussing the features that I’d like to see for creating prototypes from this tool. I think what they’re providing in this first release is very promising and will be one to watch if you’re interested in this kind of thing. The video below gives you a preview of some of the app’s capabilities.

As with all of the Flash-based tools, there’s not nearly as much control in the output, but it’s useful for light needs. Light, quick, and dirty is a good thing.


Anthony Short produced a video demonstration of CSScaffold, a CSS framework takes the structural principles and architecture of current grid systems like Blueprint and the generation engine of Shaun Inman’s CSS Cacheer, and creates a CSS Grid System Builder that lets you define the rules for your layouts using meaningfully named CSS ids and classes, and automatically generates the grid system to those rules.

It’s a framework that lets you focus on fitting the CSS to your design, rather than the reverse, and gives you the ability to focus on meaningful abstractions and naming rather than structural ones, so you can easily make changes in the future. This is something I find appealing, so I can name divs and not worry about affecting changes in number of columns throughout my templates, since the change can be made to affect semantically named divs at a higher level through the framework. Nice. Watch the video below for a demonstration.

I’ve become a regular user of both Blueprint and YUI for core column layout because it speeds development and makes maintenance and testing effortless. This seems like the right direction to move into if you work with CSS at any level, whether IXD doing prototypes or front end developer.