Mac Developer Library


OS X Human Interface Guidelines


Designing for Yosemite

People love OS X because it gives them the tools and environment they need to create, manage, and experience the content they care about. A great OS X app integrates seamlessly into this environment, while at the same time providing custom functionality and a unique user experience.

image: ../Art/OSXHiGHero.png

Before you dive into the guidelines that help you design a great app, take a few moments to explore how OS X Yosemite uses simplicity, consistency, and depth to give users a content-focused experience.

Yosemite simplifies many parts of the user interface (UI) to emphasize core functionality. For example, app icons simplify and clarify ornamentation, while remaining gorgeous and instantly recognizable.

Calendar app icon in Yosemite

image: ../Art/CalendarY_2x.png

Calendar app icon in Mavericks

image: ../Art/CalendarM_2x.png

The system font is a specially optimized version of Helvetica Neue, which displays textual content with beauty, clarity, and sharpness.

image: ../Art/HN_throughout_2x.png

The combined title bar and toolbar area removes clutter from the window UI without decreasing functionality.

image: ../Art/combined_bars_2x.png

Yosemite refreshes and refines the OS X UI, without losing the consistency that helps people feel at home in the environment.

Icon styles are freshly balanced to communicate a sense of harmony and stability.

image: ../Art/PreviewY_2x.png

The realistic icon style—used by Preview, Mail, Photo Booth, and Dictionary, among others—employs a consistent level of detail, perspective, light source, and rendering style.

In icons that use the round graphical style—such as those in iTunes, iBooks, App Store, and Safari—the symbols use the same embossed effect, and the overall shape and use of color are consistent.

image: ../Art/iTunesY_2x.png

Using an optimized version of Helvetica Neue as the system font means that both apps and the system present all text consistently. The use of Helvetica Neue also gives users a consistent experience when they switch between iOS and OS X.

Reminders in OS X

image: ../Art/HN_consistency1_2x.png

Reminders in iOS

image: ../Art/HN_consistency2_2x.png

Yosemite refines the impression of plausible, physical dimensionality in the UI. In particular, Yosemite uses translucency and vibrancy to help users focus on what’s important to them. (Vibrancy is a sophisticated blending mode that lets UI elements absorb color from content that’s underneath them.)

Drop shadows, translucency, and vibrant colors help the active window stand out so that users instantly notice it.

image: ../Art/translucency_vibrancy_2x.png

A translucent toolbar helps the window UI recede, letting the user’s content appear more prominent.

image: ../Art/translucent_toolbar_2x.png

Sidebars and overlays can use vibrancy to defer to the user’s content in two different ways.

image: ../Art/sidebar_defers_2x.png

A sidebar that enables app-level navigation, such as the Finder sidebar, lets users see the content behind the window.

An overlay that provides selection and other controls that are focused on window content, such as the Maps Directions view, gives users a more expansive view of the window’s content.

image: ../Art/overlay_defers_2x.png

Notification Center helps people stay anchored to their previous context by using a vibrant, dark appearance that automatically complements the desktop beneath it.

image: ../Art/dark_NotCtr_2x.png