1-Bit Icon Design

1ビットアイコン / 1982–1990s / Technique / UI Expression

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.

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

1-Bit Icon Design — Macintosh System 2 のデスクトップ画面 — Wikimedia Commons / CC0 — Macintosh System 2 のデスクトップ画面 — Wikimedia Commons / CC0 ／ Kyra Ocean《MacPaint に描かれた Bill Atkinson の肖像》2013 — Wikimedia Commons / CC BY 2.0

1-Bit Icon Design — Kyra Ocean《MacPaint に描かれた Bill Atkinson の肖像》2013 — Wikimedia Commons / CC BY 2.0 — Macintosh System 2 のデスクトップ画面 — Wikimedia Commons / CC0 ／ Kyra Ocean《MacPaint に描かれた Bill Atkinson の肖像》2013 — Wikimedia Commons / CC BY 2.0

Dictionary entry

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
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.
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.
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.
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.
Further study: MoMA と SFMOMA が共同で収蔵した Kare の原画帳の記録 / 日用品で命令を言い換えるという発想が、どこまで説明なしに通じたか / 二値の市松で中間調を作る網点の使い分けと、その限界

Related entries

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link: https://indexstyle.org/styles/one-bit-icon
Markdown: [1-Bit Icon Design — IndexStyle](https://indexstyle.org/styles/one-bit-icon)
HTML: <a href="https://indexstyle.org/styles/one-bit-icon">1-Bit Icon Design — IndexStyle</a>

Back to index position