Hosta

Aqua is the GUI and primary visual theme of Apple's OS X operating system. It is based around the theme of water, as its name suggests,^[2] with droplet-like elements and liberal use of translucency and reflection effects. Steve Jobs noted Aqua's glossy aesthetic: "One of the design goals was when you saw it you wanted to lick it."^[3]

The Aqua theme and user interface was first introduced at the January 2000 Macworld Conference & Expo in San Francisco. Aqua's first appearance in a commercial product was in the July 2000 release of iMovie 2.^[4]

Aqua design elements make up the appearance of most OS X applications. Its goal is to "incorporate color, depth, translucence, and complex textures into a visually appealing interface" in OS X applications.^[5] Although Aqua is the entire user interface, two notable features of Aqua are gel-like buttons (such as the ones colored red, yellow, and green that control the windows), and a Dock, which facilitates the launching of and navigation between applications.

Aqua is the successor to Platinum, which was used in Mac OS 8, Mac OS 9 and Mac OS X Server 1.2.

Starting with Mac OS X Lion, Apple introduced design elements to OS X borrowed from iOS. By OS X Yosemite, Aqua had been completely updated to match the CSS-inspired flat design found in iOS 7 and 8.

Evolution

The first version of the Aqua GUI, from Mac OS X Public Beta. It differs vastly from the GUI of Mac OS 9 with glass-like elements and a Dock, among other things, although the Apple Menu reverted to its traditional position on the left-hand side of the menu bar for the final release of OS X 10.0.

Much of Aqua's original design resembles the translucent two-tone look of Apple's contemporary hardware.^[6] In 2003 and 2004, Apple moved to the use of brushed aluminum in their industrial design (such as with the aluminum Apple Cinema Displays); in Mac OS X Panther, Aqua changed accordingly, incorporating the additional brushed metal look while deemphasizing the pinstripe backgrounds and transparency effects. This somewhat inconsistent mix of interface styles has been controversial among the Mac OS X user community.^{[7][8][9][10][11][12][13]} Apple replaced these inconsistent window themes with the introduction of Mac OS X Leopard. Starting with Leopard, the brushed metal look has been phased out, in favor of white inactive windows and gradient grey active windows.

Mac OS X 10.2 (Jaguar)

Jaguar brought flatter interface elements, such as new buttons and drop-down menus, as well as reducing the transparency to tone down the pinstripes in windows and menus. These trends continued in subsequent Mac OS X releases.

The Panther version of the Aqua GUI shows several changes, most notably brushed metal.

Mac OS X 10.3 (Panther)

In Panther, brushed metal was brought to the Finder. New buttons were made to appear sunken into their surroundings, following a general trend of more flattened interface elements in the operating system. The traditional pinstripes were replaced with a much subtler theme, most notably in the menu bar, and the use of transparency was again reduced (for example in the title bars of inactive windows). Tabs also changed; they were made flatter and the whole tab area was sunken rather than raised. Tab buttons were centered on the top border of the tab area. New icons appeared across the system, including a new flatter, glossier Finder icon and a new System Preferences icon.

Mac OS X 10.4 (Tiger)

Tiger brought more subtle changes, including the Unified titlebar scheme.^[14] Pinstripes were removed from the menu bar entirely, replaced by new glossy look. Tabs were altered to appear as normal segmented buttons. The Apple menu icon was toned down to a more matte appearance and the new Spotlight search utility was permanently bound to the very right of the menu bar in the same color and gradient of the Apple menu.

The Aqua GUI in Mac OS X Leopard. Among the changes were a gradient window style and a new Dock and menu bar.

Mac OS X 10.5 (Leopard) and Mac OS X 10.6 (Snow Leopard)

In Leopard, several changes were made to the user interface. The Dock's look became more three-dimensional, with a reflective "floor" for icons to sit on and icon labels with a semi-transparent background. Active applications were no longer indicated by a black triangle, but by a glowing blue dot. The dividing line between applications and other Dock items was changed to resemble a pedestrian crossing instead of a simple line. The dock became reflective of all elements on the screen except for the mouse cursor. In the first public implementation of a feature that had been demoed as part of Copland, the "stacks" concept was introduced: groups of files which could be stored in the Dock, and fan out when clicked.

The Dock was changed to be black translucent with a white border and rounded corners when placed on the sides, but it retained a 2D form of its modified dividing line. The 2D form could also be applied to the default bottom Dock position with third-party utilities or by running a Terminal command to update a system configuration file.^[15]

On Macs with a Core Image–capable graphics card installed, the menu bar at the top of the screen could optionally be semi-transparent. This included all Intel Macs and PowerPC G5s, as well as some later PowerPC G4s. Graphic card upgrades were also supported. Contextual menus were slightly rounded, like the corners of windows.

The drop shadow of the active window was greatly enlarged for emphasis. Inactive windows were less prominent for greater contrast between active and inactive windows. Title bars were a darker shade of grey, and all toolbars used a darker "Unified" scheme. The Brushed metal design was dropped, replaced by a white "plastic" gradient scheme. Many windows changed to have minimal borders or none at all. Pinstripes in window backgrounds were completely removed. Sheets became semi-transparent as well as blurring the area behind them for greater legibility.

Numerous icons were changed, including a set of new folder icons, a new System Preferences icon and an updated Terminal icon, and all main icons were redrawn in a high-resolution 512-by-512 size for sharper viewing in Quick Look and Cover Flow.

The default background image was changed to a purple aurora superimposed over a star field instead of the fluid abstract blue designs in prior versions of OS X. A similar but different image was used for Snow Leopard.

Snow Leopard made small changes to the user interface- most notably, the context menu for Dock items changed from solid white to translucent black.

Mac OS X 10.7 (Lion)

With Mac OS X Lion, many changes were introduced. The aqua scroll bars were traded for thin gray bars that disappeared when not used, matching iOS. Push Buttons became rounded rectangles, similar to Mac OS 8 and 9, but still kept their Aqua look. Traffic light windows controls shrank. Many elements with a previously brighter blue, such as highlighted buttons, tabs, loading bars, and switches became less pronounced and less saturated, giving them a flatter, more consistent look. The window background became slightly brighter, round textured buttons transparent, and window corners rounded. Windows in Lion could be displayed in a "Full Screen" mode by clicking a button in the top-right corner of supporting applications.

The default background image was changed to a blue galaxy, and many of the wallpapers available in previous versions of OS X were removed, including the abstract blue designs.

OS X 10.8 (Mountain Lion)

The user interface in OS X Mountain Lion, as far as buttons and windows are concerned, was essentially unchanged from that of Lion, except for a change in the Dock's appearance. The Dock changed to a frosted glass style, with rounded corners, rectangular indicator lights, a new diagonal separator, and a new Trash icon. All icons were also redrawn to two times their original sizes in order to display optimally on the new Macbook Pro with Retina Display.

OS X 10.9 (Mavericks)

In OS X Mavericks, many skeuomorphisms are removed in favor of a simpler design, closer resembling iOS 7. The Calendar application no longer has a leather appearance, the Contacts application no longer resembles a book, the Notes application no longer resembles a legal pad, and all of the operating system's linen background textures were removed (e.g. in Mission Control, Launchpad folders, and the login screen) and replaced with either subtler textures, translucency or simple grey backgrounds. System Preferences also has a slightly changed look. The category labels (e.g. "Hardware" and "Personal") have been removed, and the icons are slightly larger.

As the first version of OS X to use a California location as its name, rather than a big cat, the default wallpaper was changed to a picture of a wave.

OS X 10.10 (Yosemite)

In OS X Yosemite, many of the Aqua elements and icons are more simplified, similar to iOS 7 interface and design. The Dock lost its 3D shelf, to become similar to Tiger's but with a blur effect over background elements and black indicators for opened applications. Like iOS 7, some of the interface elements like the title bar and notification area have a translucent blur effect over background elements. Blur is automatically added to most sidebars and the default system font was changed to Helvetica Neue, the first time the system font has been changed in the entire history of OS X. The login window uses a blurred version of the default wallpaper instead of the simple gray background from Mavericks. The "stoplight" window buttons and form controls have lost their gel-like "Aqua" appearance, with the former adopting a flat tricolour design and the latter becoming either solid blue or a subtle blue gradient. Certain form controls (such as checkboxes and radio buttons) now have animations when selected.

Certain design elements were removed in Yosemite for the first time: the "poof" animation when removing an icon from the Dock (however, the sound effect remains), and the "Cube" animation when switching users.

Windows applications

The Aqua theme has also been embedded in applications made by Apple for use in Microsoft Windows such as iTunes, QuickTime, and the Safari web browser (although removed on Safari 4). iTunes for Windows has followed the same theme as the OS X version, with the exception of the use of native Windows user interface controls and Windows-style title bar buttons at the upper right of the player window.

The Windows version of Safari, in version 3, included a functional Aqua look and feel (including pulsing scroll bar, sheets, and other interface similarities). As of version 4, a more Windows-like theme is employed using the standard Windows user interface controls and window border.

QuickTime for Windows uses the same theme as seen in older versions of QuickTime for Mac OS X, with brushed-metal windows and Aqua buttons on top.

Graphical control elements

White and blue are two principal colors which define the Aqua style. Title bars, window backgrounds, buttons, menus and other interface elements are all found in white, and some, like scrollbars and menu items, are accented with a shade of blue. Most of the graphical control elements have a "glass" or "gel" effect applied to them; for instance, David Pogue described the original Aqua scrollbars as "lickable globs of Crest Berrylicious Toothpaste Gel".^[16]

OS X also allows users to choose a Graphite version instead of a Blue version of the interface. When using the Graphite scheme, controls appear a dark slate grey rather than bright blue or multicolored. For example, the title bar controls become three blue-grey balls rather than traffic lights. This color scheme was added at the behest of developers and users who found the blue scheme to be too garish or unprofessional.

Interface elements

Most of the graphical control elements are available in three sizes: regular, small and mini.

Windows

Both the standard Aqua-themed pinstriped windows and the brushed metal windows appear to have the title bar buttons sunken into the window, however in versions of Mac OS X prior to 10.2, the buttons appeared to be on top of the pinstriped windows. Brushed metal windows also have more plastic-like buttons.

Toolbars are available in two types: standard or unified. Standard retains the normal Aqua title bar and simply places a row of icons below it, whilst the unified look extends the title bar downwards and places icons on top of it, as if the window has one large title bar.

Drawers are accessory sidebar views that can slide out from any edge of a window except the top edge. They can be resized perpendicular to their window edge but follow the window's size in the other direction. Drawers were once frequently used to display controls and information that did not need to be always visible, but Apple now recommends against their use.^[17]

Sheets are dialog boxes that are modal to a specific window. When opened, they are thrust towards the user like a sheet of paper, hence the name. They are partially transparent and focus attention on the content of the sheet. The parent window's controls are disabled until the sheet is dismissed, but the user is able to continue work in other windows (including those in the same application) while the sheet is open.

Menus

The menu bar in Leopard.

Menus are backed with a slightly translucent solid gray, and when menu items are highlighted they appear blue. In application menus, which run in a single bar across the top of the screen, keyboard shortcuts appear to the right-hand side of the menu whilst the actual menu item is on the left. In Yosemite, the menus are much more translucent and have a blur effect.

Drop down menus for use in windows themselves are also available in several varieties. The standard "pop up" menu is white with a blue end cap with opposing arrows, whilst 'pull down' menus only have one downward facing arrow in the end cap. 'Pull down' menus are available in four different Aqua varieties, most of which have fallen into disuse in later Mac OS X releases.

Text boxes and fields

Text boxes are black on white text with a sunken effect border. In addition to regular square text boxes, rounded search text boxes are available . For more extensive text requirements, there is also a multi-line text field. A combined text box and pull down menu is available, which allows the user to type in a value in addition to choosing from a menu. There is also a combination textbox and picker control, which allows the user to type in a date and time or edit it with directional buttons. Mac OS X v10.4 introduced a new interface element that allows the user to drag non-editable 'tokens' to a text box, between which text can be typed. Whitespace before and after the tokens is trimmed.

Push buttons

Standard push buttons with rounded corners are available in two varieties: white and blue. A blue button is the default action, and will appear to "pulse" to prompt the user to carry out that action (In Yosemite, the default action buttons no longer pulse, they are simply colored blue). The action of a blue button can usually also be invoked with the return key. White buttons are usually associated with all other actions.

Also available are rounded bevel buttons, designed to hold an icon; standard square buttons; glass square buttons and round buttons. In addition, circular, purple online help buttons are available which display help relative to the current task when clicked. Disclosure triangles, although technically buttons, allow views of controls to be shown and hidden to preserve space.

Checkboxes and radio buttons

In OS X, empty check boxes are small, white rounded rectangles. When they are checked, they turn blue and a checkmark is present. They are essentially buttons which can be toggled on or off. Radio buttons are similar in appearance and behaviour except they are circular and contain a dot instead of a check. Radio button are classed into groups of which only one can be activated at a time.

In Yosemite, a short animation was added to show the checkbox or radio button filling in.

Tables and lists

Tables and lists can be broadly categorised in three ways: A standard multi-columnar table with space to enter values or place other interface elements such as buttons; An outline view that can contain disclosure triangles to show and hide sets of data; and a Miller columns view akin to the column view in the Finder. All table views can use alternating blue and white row backgrounds.

Progress indicators

Two main types of loading/saving progress indicator are available: a progress bar or a monochromatic spinning wheel (not the spinning pinwheel). The progress bar itself is available in two varieties: indeterminate, which simply shows diagonal blue and white stripes in animation with no measure of progress; or determinate, which shows a blue pulsing bar against a white background proportional to the percentage of a task completed. The spinning wheel indicator, also found in the Mac OS X startup screen since version 10.2, is simply a series of 12 increasingly darker grey lines arranged circularly, like the side view of a spoked wheel rotating clockwise. Many other interfaces have adopted this device, including the Firefox and Camino web browsers and many Web 2.0-influenced web sites.

In Yosemite, the progress bar was changed to a thin, light gray. The "indeterminate" variation kept the pulses, but slower and spaced out. A progress indicator now appears during boot, replacing the spinning wheel indicator found in earlier versions.

Miscellaneous

Sliders are available in three types: one with tick marks and a triangular scrubber, one with a round scrubber and no tick marks and a circular slider which can be rotated. All are available horizontally or vertically. The circular slider is simply a gray dot on a white circle which can be rotated to set values.

OS X has a standard control for picking colors which appears as a regular square button with a color sample in the middle. When clicked, it shows the standard OS X color palette.

Tabs in OS X are nearly identical to push buttons, with the unselected tab(s) being white and the selected tab being blue. Image "wells" are also available: a small, sunken container into which image files can be dropped. When the well contains an image, it can display a thumbnail representation of the file's contents.

Fonts

Apple used Lucida Grande as the standard system font from 10.0 to 10.9. The system font was changed to Helvetica Neue in 10.10 Yosemite. OS X makes use of system-wide font anti-aliasing to make edges appear smoother.

Animation

A widget being added to the Dashboard in Mac OS X 10.4. Shown here is the ripple effect.

Aqua makes heavy use of animation. Examples include:

• Dock icons bounce up and down as their corresponding applications are launched.
• Dock icons also bounce up and down, in a different rhythm, when a background application requires the user's attention.
• Dock icons can increase in size when approached by the cursor. This feature (called "magnification") is optional.
• When minimized, windows are "sucked" into the Dock using the "Genie effect" or "Scale effect." Both of the effects are customizable by the user. The former makes a window turn into a curvy shape so it looks like reverse animation of a genie exiting a lamp, and the latter scales down the window until it is small enough to be in the Dock. By pressing the shift key, both effects can be seen in slow motion. These keystrokes can also be applied to other Aqua effects such as Dashboard, Mission Control (OS X), formerly Exposé, and Front Row. Holding Control as well as Shift makes the minimize effect take twice as long as just holding Shift. Holding just Control also slows down the animation slightly. There is another undocumented dock effect called "Suck" which can be enabled by hand editing a configuration file or using a Terminal command;^[18] this appears to be the same effect that accompanies the removal of widgets from the Dashboard.
• When a folder on the desktop is opened or closed, the corresponding Finder window appears to come from, or disappears into, the folder icon rather than just appearing from nowhere. This effect was present in the Classic Mac OS Finder as ZoomRects, but had disappeared from early OS X developer releases.
• Sheets are "posted" out of window title bars. Sheets appear to be pieces of paper being thrust toward the user, or slide out like paper from a tray.
• Dashboard widgets appear to fly onto the screen. Dashboard widgets appear with a "ripple" effect, as if being dropped onto the surface of a pond. When removed, widgets are sucked into the close button as if being drawn into a vacuum. This effect can be applied on windows being minimized to the Dock.^[18] Starting from Mac OS X 10.7 Lion, the default Dashboard configuration differs from that of previous versions (it takes its own space in Mission Control), causing the rippling effect to be removed. However, the user can re-invoke the original Dashboard (along with the ripple effect) in System Preferences.
• The contents of a stack will appear to spring out from behind the icon when clicked.
• In the Public Beta of Mac OS X, docked items dragged on to the desktop simply disappeared, apparently 'dropping' onto the desktop. This behaviour was changed with Mac OS X 10.0; from this release onward, items dragged off the dock would 'disappear' in a cartoon-like puff of smoke, an effect which Apple later used in various places, such as Safari's Bookmarks Bar and iPhoto's tag removal). A similar effect was used in Apple's Newton OS. In OS X 10.10 Yosemite, this effect is no longer present; the item simply disappears.
• Starting from Mac OS X 10.7 Lion, windows which contain a document or website open with an animation similar to Windows Aero. A similar zoom effect can be seen when opening files from the desktop, or within a Finder window. This also applies to the entire desktop when a user logs in.
• When fast user switching is used, Apple's "Cube" effect is used to transfer between desktops and/or the login window. This was removed in Yosemite.

Many of these effects can be turned off by the user or are only available on supported hardware.

Underlying technology

Aqua is powered by the display server Quartz Compositor.

Litigation

Apple has threatened legal action against those who make themes similar to their look and feel.

Despite accepting (for the most part) Apple's right to their copyrighted artwork, the skinning community took exception to their heavy-handed actions against all Aqua lookalikes; Stardock's Brad Wardell contrasted the company's litigious approach with Microsoft's approach to incorporating third-party skins into Windows XP.^[19]

See also

• Windows Aero
• Compiz
• KWin
• Metro Design Language

References

External links

• OS X Aqua Human Interface Guidelines