susan kare and meaning within a pixel grid
meaning assembled one square at a time
a small grid leaves little room for decoration. a recognisable object must be reduced, a state distinguished and a tone established through a limited number of pixels. susan kare's early interface work makes those constraints visible without making the result feel merely constrained.
moma's record of kare's apple macintosh os icon sketchbook dates it to 1982 and describes the use of graph paper, with a square representing a pixel. the case demonstrates how drawing, metaphor and careful selection can translate a complex system into forms a user can begin to recognise.
the metaphor provides a starting point
an icon can borrow familiarity from another object. that familiarity is useful when it connects a new operation to something the user already understands. it can also mislead. a picture of a container does not explain whether the action stores, archives or deletes something. meaning depends on the interface and its conventions.
the icon should be evaluated with its label, placement and resulting state. recognising a familiar object is different from predicting what will happen after selecting it. a successful illustration may still be an ambiguous control.
personality within constraint
a small image can communicate friendliness without adding visual complexity. expressive choices should support comprehension rather than compete with it. the lesson is not that every interface needs a smiling face. it is that technical limits leave room for deliberate tone and human recognition.
constraint also encourages attention to relationships. compare a symbol at its actual size and among its neighbours. a shape that looks distinct when enlarged can collapse into another at normal scale. the family needs to work together, including states such as disabled, selected or interrupted.
conventions require maintenance
an icon's meaning can survive after its referent becomes unfamiliar. the floppy disk used to signify saving is an obvious discussion example. this persistence does not prove the symbol should always be replaced, or that nobody needs an explanation. test recognition among the intended users and consider the cost of changing a convention.
accessibility adds another requirement: essential information cannot depend on decorative recognition alone. labels and alternative descriptions should describe the operation accurately. the image and the language need to make the same promise.
a worked design example
a file manager uses a familiar container icon for both archiving and deletion. the images look related because both operations remove an item from the immediate view. their consequences are different.
the team can preserve the family resemblance while distinguishing the action through labels, placement and state feedback. test whether people predict what happens to the file, not only whether they recognise the pictured container. a striking new icon is not necessarily an improvement if it discards useful familiarity without explaining the distinction.
evaluate the icons at actual size and in the complete interface. neighbouring controls can alter the perceived relationship. the pixel grid becomes a working constraint within a broader information system, just as kare's sketches translated small visual decisions into meaningful operations.
a practical exercise
design three icons for related operations within a fixed grid. state the operation in plain language before drawing. test what people predict from the icons alone, then with labels and context. record confusion between recognising the picture and understanding the action. revise the smallest feature that changes the interpretation, and examine the whole family at actual size.
the grid is a constraint on drawing, not an excuse to leave meaning unexamined.
a visual study
further reading and crosslinks
continue with the design of information, hierarchy and understandable communication.
f/p brand design and corporate identity
connect recognisable form to an identity system that can be implemented across touchpoints.
practical guide: choosing a graphic and communication design agency
connect this topic to communication-design scope, deliverables and partner selection.
planning a project in this area? discuss it with f/p design.
references
Museum of Modern Art collection and exhibition record
image credits
1. SusanKare2019photo.jpg
creator or credited source: Cooper Hewitt · CC BY 3.0
image source and attribution record
scaled and JPEG encoded for Word; no creative alteration. the image retains the licence listed above.
2. Steve Jobs and Macintosh computer, January 1984, by Bernard Gotfryd – edited.jpg
creator or credited source: Photo: Bernard Gotfryd – Edited from tif by Cart · Public domain
image source and attribution record
scaled and JPEG encoded for Word; no creative alteration. the image retains the licence listed above.
3. PC ICON – Blue Screen.png
creator or credited source: Asterisk.CommonsAccount · CC0
image source and attribution record
scaled and JPEG encoded for Word; no creative alteration. the image retains the licence listed above.
