NeXTSTEP Interface

ネクストステップ・インターフェース / 1988–1997 / Style / Platform Screen Languages

The screen language NeXT laid down in its 1993 interface guidelines. The document states the goal outright: a color scheme based on black, white, and gray, and a simple appearance that uses shading for a three dimensional effect. The main menu stands as a vertical column at the upper left, and docked application icons run down the right edge.

A menu standing as a vertical column at the upper left, submenus attaching to its right / Square application icons docked in a vertical strip along the right edge of the screen / Thick bevels carved entirely from gray values, with no hue anywhere in them / A black title bar on the window taking keystrokes, dark gray on a window that is merely frontmost

NeXTSTEP Interface — NeXTSTEP 上の WorldWideWeb ブラウザ — Wikimedia Commons / Public domain — Thomas Schanz《HP9000 715 上の NeXTSTEP 3.3》2018 — Wikimedia Commons / CC BY-SA 4.0 ／ NeXTSTEP 上の Electronic AppWrapper と 3D Reality — Wikimedia Commons / CC BY-SA 4.0

NeXTSTEP Interface — Thomas Schanz《HP9000 715 上の NeXTSTEP 3.3》2018 — Wikimedia Commons / CC BY-SA 4.0 — Thomas Schanz《HP9000 715 上の NeXTSTEP 3.3》2018 — Wikimedia Commons / CC BY-SA 4.0 ／ NeXTSTEP 上の Electronic AppWrapper と 3D Reality — Wikimedia Commons / CC BY-SA 4.0

Dictionary entry

Best used for: Building a developer tool whose entire hierarchy is carried by gray values and shading, with no accent hue · Showing where the visual language of today's Apple desktop came from, in a talk or an exhibit
Type: Run one Helvetica style face throughout and build hierarchy from weight and size alone. Leave unavailable commands in place in dark gray instead of removing them.
Composition: Fix a vertical menu column at the upper left and a vertical icon strip at the right edge, and give the space between them to the work. Windows are meant to overlap, so a black title bar is the only marker of the one in hand.
Material: Work in four steps from white to black and admit no hue. Assume one light source above, and keep every bevel consistent with it.
Caution: Reproduce the grays and then add one saturated accent, and the premise that value carries hierarchy fails, taking the reading order of the whole screen with it.
Further study: NeXTSTEP User Interface Guidelines Release 3 の図版と用語集 / 起動していないアプリのアイコンの左下に打たれる3つの点の意味 / 同じ部品体系がのちの Apple の画面にどう引き継がれたか

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/nextstep-ui
Markdown: [NeXTSTEP Interface — IndexStyle](https://indexstyle.org/styles/nextstep-ui)
HTML: <a href="https://indexstyle.org/styles/nextstep-ui">NeXTSTEP Interface — IndexStyle</a>

Back to index position