HyperCard vs Web 1.0
ハイパーカード / ウェブ1.0
Both sit in Digital Retro, so the question is not what they belong to but how they behave. One is layout and the other style. They are reached for with some of the same intent, which is where they get confused.
HyperCard
A screen form that came out of a tool. HyperCard was written by Bill Atkinson and shipped with the System 6 Macintosh in August 1987, and Apple described it as a hypermedia program or construction kit. Its unit is not a page but a card, the metaphor being a card index in which each card holds pictures or text, and a reader jumps from card to card or from one stack to another.
Web 1.0
Reuses the naivety of the constrained early web as directness and charm.
| HyperCard | Web 1.0 | |
|---|---|---|
| Era | 1987–2004 | 1990s |
| Family | Digital Retro | Digital Retro |
| Kind | Layout | Style |
| Cues | One card filling the screen, with navigation that jumps between cards rather than turning pages / One bit black on white drawing, where grays and photographs both arrive as dither patterns / A row of small square icon buttons packed along the bottom edge of the card / Picture and text sharing one surface, with an input field marked by a single rule | Blue links / Low-res GIFs / System fonts / Plain buttons |
| Best used for | Building an exhibition screen that presents holdings one card at a time instead of as a run of pages · Rebuilding the feel of late 1980s and 1990s homemade software in one bit black and white | Showing affection for internet culture · An unpolished, approachable feel |
| Type | Use a bitmap screen face. Do not enlarge headings, and let text carry the same weight as the drawing on the card. | System sans and monospace |
| Composition | One card is one screen. Put the shared frame on the background layer and lay the individual picture and text over it. Pack the navigation buttons along the bottom. | Left-aligned, borders, table-like division |
| Material | Black on white at one bit. Make midtones from dither patterns and halftone any photograph before placing it. Draw outlines as single pixel rules. | White background, blue links, dithered images |
| Caution | Hiding the links inside the artwork erases the way back, and nobody can tell which stack they are in or how far along it. | Don't regress actual accessibility. Separate the look from interaction quality. |