Kimberly Cooper Design ProcessPresentation Transcript
+ GUI Design: Process & Examples Kimberly Cooper GUI Designer 3/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