For each family of titles created with this system, user interface has a part that varies per title and a part that is the same across all titles in the family.
The layout of the controls, the backgrounds and frames around screen areas, and the pictures that appear on application buttons stays the same across tiles in a family. To create and hone the graphics for a family, we started with sketches that the design team discussed and modified. Next, we produced a prototype of the front-end with just enough content to show the intended design. The prototype was again reviewed by the design team and also by the client. At the Beta stage of the first title in a series, the design was subjected to formal usability testing at the Microsoft Usability Lab. At each stage the graphic design (and of course, the functionality) of the front-end was modified and refined.
Our front-end requires that the opening screen of the application have a large illustration and that each major section of the title (its parts and chapters) have an icon and in some families, a hot graphic that allows navigation to subsections. Most of the opening screen graphics were created on paper by an illustrator and then scanned and converted to bitmap files.
Our front-end expected content graphics to be stored in 16- or 256-color Windows Bitmap (BMP) format files. Files arrived in PostScript (EPS), Tagged Image Format (TIF), and Corel Draw (CDR) formats. A majority of the graphics could be automatically converted using a product called the Debabelizer. This product allowed us to create scripts that would convert and color correct the graphics in bulk. The graphics that were exceptional had to be converted and color corrected by hand. Some of the graphics had to be reconstructed because they could not be successfully converted and color corrected. Because most of our illustrations were pictures of a computer application, we were able to recreate graphics using screen capture applications such as Hijack and Collage.
To keep track of the graphics files in a title and to specify how each graphic was to be processed, we produced a graphics spreadsheet with columns for filename, original figure number, processing instructions, hyperlinking instructions, and status. This spreadsheet was used as a guide to the graphics of a title. Throughout production, the spreadsheet, or "Art List" as we called it, was used to verify and track the progress of the graphics files.