Apple Desktop Interface vs Aqua
アップル・デスクトップ・インターフェース / アクア
Both sit in Apple UI, so the question is not what they belong to but how they behave. Both are read here as style. They are reached for with different intent, which is the fastest way to tell them apart.
Apple Desktop Interface
This is the design language Apple named itself, in the 1987 guidelines book whose subtitle reads The Apple Desktop Interface. Working with one bit of black and white, it wrote down a house style: halftone dot patterns standing in for gray, rounded window corners, a title bar of stacked horizontal rules, and a heavy bitmap face.
Aqua
Mac OS X's design language of buttons you want to lick. Jelly gloss, pinstripes, deep shadows and the genie effect staged digital components as objects you could touch, and set the terms for UI throughout the 2000s. What the web made of it with images is Web 2.0 Gloss.
| Apple Desktop Interface | Aqua | |
|---|---|---|
| Era | 1984–1997 | 2000–2014 |
| Family | Apple UI | Apple UI |
| Kind | Style | Style |
| Cues | Two tones only, black and white, with gray faked by a checkerboard of black dots / Window corners are rounded and the title bar carries several thin horizontal rules / A menu bar pinned to the top edge of the screen, the Apple mark sitting at its left end / Chicago, a heavy bitmap face whose letters are packed into a cell of 9 by 7 dots | Gel-gloss buttons / Pinstriped grounds / Deep drop shadows / Metaphors of water and light |
| Best used for | Redrawing early Macintosh screens for an exhibition panel or an article on a modern display · Designing for a device that can only print or light two tones, such as e paper or a receipt printer | Recreating 2000s digital culture with the texture it actually had · Making what is clickable read at once as a pressable object |
| Type | A heavy bitmap sans, letters placed only on whole pixel positions, no anti aliasing; headings differ from body text by size rather than weight. | No shadow on text, weighted to stay legible over gloss |
| Composition | A full width menu bar owns the top edge and everything below it is the work surface; rounded rectangular windows overlap freely and margins step in whole pixels. | Components evenly spaced, gaps left for shadows to fall into |
| Material | Black and white alone; middle values come from checkerboard or diagonal dot patterns, soft shadows and gradients are out, and every boundary is a one pixel black rule. | A hard white highlight above, reflection and deep shadow below |
| Caution | Scaling the bitmap face by anything other than a whole number, or letting it anti alias, blurs the letterforms and erases the placed-by-hand dot density the style lives on. | Gloss and shadow applied evenly to every component hides what is actually pressable, leaving texture where hierarchy should be. |