UI Specifications Using a Website

A screenshot of a web page used as a UI specifications document.

Bookmark.

A UI specifications document done as a web page, listing and linking to all the prototyped pages, and including notes on behavioral elements on each pages.

As this team’s first and primary interaction designer by training, the team did not have any standards in place for UI specifications documentation and deliverables for developer guidance. I created this specifications format to serve the need for keeping track of my work and providing guidance to which an off-shore development team could refer.

This is a table listing each page of a web application, with a link to each page and any related components or any variations of those pages (depending on rights and permissions of users). Also included for each page are notes about how any components and data manipulation should behave and work whose behavior I could not code myself (i.e., JavaScript dependent).

The upshot is that my HTML/CSS or Photoshop prototypes and components were essentially key frames in the interaction behavior in my designs, with the annotations being the filler in showing how I wanted the application to go from one key frame to the next.

This was a very long page, and what’s included here in this screenshot cuts out a lot of it for brevity.

Comments are closed