Embed Size (px)
Citation preview
+
GUI Design: Process & ExamplesKimberly CooperGUI Designer3/22/12
+Product Specification Document
Created by engineering and product managers to define the scope and requirements of the project
Shareholder review, buy-in and approval
+Design Document
Created by GUI designer, Product Manager and Usability Expert. Includes initial wireframe layouts and screen/page descriptions
Management review, buy-in and approval
Revise Document
+Design Document
+Preliminary GUI Design
This phase will generate various design approaches. This is intended to look as close as possible to what the product could be.
+Paper Prototype
The purpose of the paper prototype is to create a visual representation of the eventual GUI. These prototypes will be used for User Testing.
User Testing
Revisions
+Hardware Preview
Meet with engineering to see a preview of the actual hardware. Several designs would be presented and loaded onto the prototype screen to choose the most successful outcome
+Physical Prototype
Painted SLA of product would be created and screen placed for visual approval.
Photography taken to create preliminary marketing materials.
+Flash and/or Coded Wireframe
This is a wireframe of the GUI, made to operate, as would the final product. There are only the barest elements of graphics used—often simple boxes with text.
User Testing
Revisions
+Final graphics
Final pixel-to-pixel versions of all screens, graphics elements and all other visual content.
Work with Engineering to implement screens on working prototype.
User Testing
Revisions
+Final Prototype, off-tool prototype or pre-production sample The final product
would arrive, I would photograph it and all marketing collateral would be created.
+Flash Demo
Normally I would create a Flash movie to be put on the company website that lets the user learn about and virtually use the product.
See a variety of demos on this page to get an idea: Demo
