This large, early step involves listening to the business needs, understanding stakeholders' requirements, collecting customer/user input, and creating personas. Artifacts produced include initial use cases, design principles, process flow diagrams, application maps, and anything else that assists in describing use cases and interactions.

Tools:Hand sketches, wikis, spreadsheets, PowerPoint, Visio, Lucidchart, Google Drawings, Photoshop, Illustrator

Without any visual design, sketch out initial ideas of placement of elements on pages.

Tools:Hand sketches, Balsamiq, Visio, Photoshop

Begin to document decisions pertaining to the UX and UI, including any flows, wireframes, maps, and open issues. Continue refining the document throughout visual design and development phases until the feature is fully specced and all teams sign off. Can serve as the full spec, or supplement a product manager/owner's functional spec.

Tools:Wikis, Google Docs

More detailed than rough wireframes but not quite a mockup, this step can facilitate quick feedback from product managers and subject matter experts to rapidly iterate through designs.

Tools:Hand sketches

Designs which are more polished and incorporate visual design, including color palette, typography, imagery, and pixel-perfect layout.

Tools:Photoshop, Illustrator

Move mockups from static images to a static website using HTML, CSS, and jQuery/JavaScript. Care is taken to structure the HTML and CSS as sensibly and efficiently as time permits so that it isn't necessarily throw-away work once it reaches developers and engineers.

Tools:HTML, CSS, Sass/COMPASS, JavaScript, jQuery, Photoshop, Illustrator

Check with stakeholders including customers, if available, to address issues of flow, content, or style as they arise.

Tools:Developer builds, in-person or online conversations

Who better to systematically test the UI with the level of detail required than the person who designed it? Following the UI spec as well as going off-script uncovers both functional and UI issues. After logging, assistance can be provided in addressing issues with HTML and CSS, missing use cases, or poor user feedback.

Tools:JIRA, Bugzilla, spreadsheets

Consistency is key, so documenting and enforcing UI patterns is essential, especially in distributed teams working on a variety of disparate projects. This step is ongoing rather than a phase of the development cycle.

Tools:Wikis, Photoshop