Yosemite App Design Checklist

The App Yosemitization Checklist guides you through the major areas and aspects to consider when bringing your application to OS X 10.10.

App Icon

Choose an appropriate app icon style: Graphic or Realistic

• Don't reuse your iOS app icon
• Strive for simplicity

Realistic App Icon

• Make sure that adding realism enhances both understanding and usability.
• Feel free to modify a real-world depiction if it enhances the user's understanding
• Use perspective appropriately: Remember that an app icon looks like it’s sitting on a desk in front of you
• Use textures appropriately: Icons that represent real objects should also look as though they are made of real materials
• Setup Light appropriately: Try to avoid a frontal key light. Find a light scenario which shows the shape and weight of your icon. Think about the "scene" your icon sits in in and how different colors might bleed in. Consider using an orange light source from the left (or bottom) and a blue light source from the right (or bottom).

User Interface

Translucency & Vibrancy

Translucency and vibrancy help users focus on what’s important to them. Translucency, vibrancy and shadows help the active window stand out so that users instantly notice it.

• Consider using a translucent toolbar to let the user’s content appear more prominent
• Add translucency to your sidebar
• Add translucency to popovers and overlays

Toolbar Icons

• Decide about the toolbar icon styles and don't mix them: Toolbar controls (Buttons) vs. freestanding icons
• Differentiate: Variate shapes and images to distinct icons
• Harmonize: Apply the same perspective, size and visual weight
• Use a straight on perspective
• Use colors judiciously and in a meaningful way. Consider updating your color scheme to reflect the brighter system look

Sidebar Icons

• Use black and transparency (alpha) only
• Apply clearer outlines to your icons
• Apply lighter fill colors or gradients
• Remove unnecessary details

Empty Views

• Update your empty view icons: Lighter grayscale tones and slight emphasize on outlines
• Consider removing icons on empty views entirely and use only text instead

Preferences

• Use brighter colors and remove details which do not contribute to a better understanding
• Do not simply double the size for retina. Take retina screens as an opportunity to make your icons even more elegant and light on the eyes