1-Bit Icon Design vs Xerox Star Interface
1ビットアイコン / ゼロックス・スター・インターフェース
1-Bit Icon Design comes from UI Expression and Xerox Star Interface from Platform Screen Languages. One is technique and the other style. They are reached for with some of the same intent, which is where they get confused.
1-Bit Icon Design
The way of drawing icons in nothing but black and white that Susan Kare established for the Macintosh. She worked each design out on graph paper with one square standing for one pixel, and restated commands as ordinary objects, a pair of scissors for cutting and a bin for deleting, so the set could be read without a caption in any country. Her sketchbook now sits in a museum collection.
Xerox Star Interface
The screen language set by the Xerox 8010 of 1981. Labelled iconographic symbols stood for folders, in and out baskets, file drawers and other office accessories, which the brochure of that year said amounted to an electronic desk top. Objects on the screen could be moved, copied and deleted with the hand held pointer that the same brochure still had to gloss as a mouse.
| 1-Bit Icon Design | Xerox Star Interface | |
|---|---|---|
| Era | 1982–1990s | 1981–1990s |
| Family | UI Expression | Platform Screen Languages |
| Kind | Technique | Style |
| Cues | Two values only, black and white, with gray standing in as a checkerboard of alternating dots / A one pixel outline closing each shape, and an interior that is either solid or dotted, never shaded / Ordinary objects, scissors, a bin, a sheet of paper, standing in as the names of commands / Visible traces of one dot placed per grid square, so diagonals break into steps | Every symbol on screen carries a text label, so meaning never rests on the picture alone / The symbols stand for things found on an office desk: folders, in and out baskets, file drawers / Objects are grabbed with the pointer, and moving, copying and deleting form one family of gestures / The spreadsheet appears as a grid of rows and columns, with a menu of tools that act on the matrix |
| Best used for | Making small pictorial signs stand for commands with no caption, and read the same way in any language · Getting shapes to stay distinguishable inside a small frame that cannot be scaled or smoothed | Laying out a business application around objects a user already handles rather than around abstract function names · Writing a team rule that every icon must carry a label instead of standing on its own |
| Type | Keep letters out of the picture and put the label on a separate line outside it. Any type alongside sits on the same bitmap grid, with no italics and no ornament. | Put a short noun label under every symbol. The label names a thing on a desk, not a function. |
| Composition | Rule the grid first and draw with one square standing for one pixel. Close the outline before deciding the interior, and leave one square of clearance inside the frame. | Treat the screen as the surface of a desk and place objects on it. Keep commands in menus rather than embedding them in the objects. |
| Material | Two colours only, black and white. When a middle brightness is needed, build it by thinning the dots into a checkerboard rather than introducing gray. Leave diagonals as steps and do not smooth them. | Work in two tones only and draw the symbols as outlines. Fill is either solid black or left white, with no intermediate greys. |
| Caution | Adding gray or midtones to widen the range costs you the hard outline that only two values can produce, and the shape stops being legible at the size it is actually used. | Stretching the desk metaphor to cover functions that have no desk equivalent breeds symbols nobody can name or find. |