Apple Aqua: Exploring the Legacy Of MacOS X User Interface

Apple Aqua: Exploring the Legacy Of MacOS X User Interface

Apple unveiled Aqua, its next-generation user interface for MacOS X, at the Macworld Expo San Francisco in 2000. Apple described Aqua as the future of Macintosh, and it was one of the most fundamental design upgrades that Apple ever created.

MacOS X 10.0 Cheetah with Apple Aqua. Image by 512pixels

Despite that the appearance of Aqua has changed frequently over the years, the foundation principles of GUI design that Aqua defined stayed the same up to 2020 when MacOS Big Sur was released.

In this article, I want to focus on the visual language of the Apple Aqua and why this language has such a tremendous impact on other products that Apple released.

A very brief history of Apple Macintosh OS

Apple released the Macintosh OS in 1984. Macintosh OS set a foundation for graphical user interface design for the entire industry. If you look closely at Macintosh OS, you will notice that it has many attributes of a modern graphical user interface: the concept of a window, app icon, and system states.

Original Apple Macintosh OS user interface (1984)

After massive success in the 80s, Apple started to experience problems in the early 90s. The latter half of the 1990s was a dark time for Apple. Microsoft dominated in the field of personal computers, while Apple experienced substantial annual losses. Apple made several attempts to create a modern successor to the classic Mac operating system, but all of them were unsuccessful. Apple ended up purchasing NeXT in 1997.

Before the Aqua release, Apple used a UI called Platinum, a legacy of NeXT. Although Platinum placed a greater emphasis on color than prior versions, it was still an incremental integration of many of the technologies developed from 1988 to 1996.

Screenshot of Mac OS 8.1 powered by Apple Platinum 

The new era dictated a new approach, and Apple wanted to create a modern successor to the classic Mac operating system. Apple presented the next version of the graphical user interface called Aqua in 2000. Aqua was much more than just a cosmetic change. Compared to the previous OS released by Apple, the Aqua interface looks both familiar and very novice.

Key elements of Apple Aqua

Apple called this user interface ‘Aqua’ because it was originally based on the theme of water. At its introduction, Steve Jobs made a joke about that “… it’s liquid, one of the design goals was when you saw it you wanted to lick it”’

According to the Apple design team, the goal of Aqua was to:

“Incorporate color, depth, translucence, and complex textures into a visually appealing interface” in macOS applications

That’s why Aqua features liberal use of reflection effects and translucency. Another notable thing about Aqua’s visual language is that it visually complements the design of the colored iMac released in the late 90s.

Apple iMac computers in different colors. Late 90s.

Let’s dive into the visual langauge that Aqua offered:


Gray, white and blue were the key colors that defined the Aqua style. All functional and decorative elements (toolbars, backgrounds, functional elements like buttons and menus) were found in either of these colors.

If you look closer at the toolbar, you will notice that they are often grey or metal-colored. It is done intentionally. This design looks less busy for the human eye and can also visually guide the user’s eye towards functional elements (menu items).

Toolbar in early versions of MacOS X.

Design of functional controls and menus

It’s much easier to understand the visual language when you break it down into the smallest elements. And when it comes to OS, the smallest possible element is functional control.

Aqua brought flatter interface elements, such as new buttons and drop-down menus. Look at that soft focus on the buttons.

Button design in Aqua.

The visual style of Aqua buttons will later be used in the first versions of Apple iOS (of course, with some visual modifications).

System dialog in Apple iOS

Aqua brought a radical new look for all the familiar interface elements (scroll bars, windows, menus).

Drop-down menu in Apple MacOX Public Preview. Image by 512pixels
Progress bar in Apple MacOX Public Preview. Image by 512pixels
Scroll bar in Apple MacOX Public Preview. Image by 512pixels
Slider in Apple MacOX Public Preview. Image by 512pixels

Here are a few notable things about the styling of UI elements:

Shadows. You can notice that most UI elements cast shadows. Shadows are used both in functional controls and windows. Aqua windows have almost no frame or outside border; instead, drop shadows are used to separate and distinguish active from inactive windows. Subtle shadows create a sense of dimension.

Shadows convey a sense of depth and dimensions in a user interface; UI elements look like 3D objects.

Transparency. The transparency effect was used to focus user attention on a particular object. For example, when a window is no longer in focus, the window control buttons become transparent.

Graphical properties of UI element was used to convey its current status.

Highly detailed system icons

Compared to the Platinum visual style, Aqua system icons were larger and more detailed. The visual style of icons was more visually appealing UI. A similar skeuomorphic kind of icon is later used in the first version of the Apple iOS system.

Skeuomorphism is the design concept of styling digital objects in a way that they can resemble their real-world counterparts.
In MacOS X, Apple took icons to the next level of fidelity. Icons in MacOS X 10.0 Cheetah. Image by 512pixels


Early 2000 was an era of multitasking. Users constantly switched between different apps when they worked on a computer, and Apple wanted to make the process of switching as comfortable as possible. To make it happen, Apple introduced Dock, where all popular and recent apps are located.

Apple Dock in MacOS X. Image by 512pixels

Along with Dock, Apple added a title bar with three buttons on the left side — red to close the window, yellow to minimize, and green to maximize. In the early versions of Aqua visually, these buttons used to be placed on top:

Early versions of Apple Aqua (Apple Mac OS 10.1)

but later appeared ‘sunken’ into the window:

Apple MacOS 10.7 Lion

Using a principle of proximity in GUI design

The principle of proximity states that objects located close together are likely to be perceived as part of the same group.

Apple used the principle of proximity in MacOS X design. Understanding the relationships between parent and child windows was one of the most annoying problems of many operating systems with GUI in early 2000. The user has to remember which dialog belongs to which window.

In Windows 98, a modal dialog is not visually connected to the window that casts it

Apple used distance as a property of relation. For example, the “Save” panel was visually connected to the parent window so the user could easily understand which window the save panel belonged to.

The “Save” dialog is visually connected to the parent window. Image by OSXDaily

Strong motion language

Aqua not only looked nice, but it was also generally impressive in action. Apple paid a lot of attention to dynamics — not only how UI objects look in static, but also how they work when the user interacts with them. The goal was to help people who just recently started using a computer so they can understand how things work much faster.

One notable thing is the visual transition of a window minimizing that gives the user a hint where the window goes to in the Dock. When minimized, windows are “sucked” into the Dock using the “Genie effect.” It guided the user’s eyes to where the object went and made the state changes more obvious.

MacOS X Genie effect. This visual transition shows exactly where the window goes in the Dock. Image by Reddit.

Dock itself can change in size depending on how many objects it has. For example, the icons in Dock can shrink if you put a lot of objects in it. It also has a magnification that allows you to increase the size of an object in Dock on mouse hover.

Dock icons can increase in size when approached by the cursor.

On a micro level, Apple introduced subtle micro animations to functional controls. For example, OS dims a key call to action button to give the user a hint that this button will be pressed if the user presses Return.

Dim effect for the “OK” button in a MacOS X system dialog 


Aqua wasn’t a perfect visual style. MacOS X powered by Aqua was very hardware demanding (it was a huge resource hog, especially RAM), and it was unbearably slow in some contexts. Despite that, Aqua was a huge step forward for both Apple and the computer industry. Even today, the legacy of Aqua can be found in the latest versions of MacOS. Two decades later, the Dock still functions the exact same way. Of course, it looks much nicer than its predecessor, but functionally it’s the same

Subscribe to Nick Babich

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.