Guides and Sample Code


macOS Human Interface Guidelines


Icons and Graphics

High-quality graphics not only improve the appearance of your app, they also help convey information and enhance the overall user experience. macOS users are accustomed to beautiful, meaningful graphics and they look for the same level of quality in the apps they use.

Make sure your graphics look professionally designed. Don’t underestimate the impact that beautiful, high-quality graphics have on your users. Low-quality graphics give people a bad impression and can negatively affect their perception an app’s overall quality. To help ensure that users are delighted with your app, make graphics a priority in your design and development process.

Make sure your graphics look great in full screen. If you allow users to take a window full screen, make sure you don’t just scale up your graphics to fit. As a general rule, start with artwork that is larger than you need and then scale it down.

Make a great first impression with a beautiful app icon. Your app icon is the first experience users have with your app, and it can have a marked effect on their expectations. Think of your app icon as your calling card, and spend the resources necessary to ensure that it makes the right impression on users. Decide whether your app is best represented by a realistic or graphic style icon. For example, the Garage Band app icon is a beautiful rendering of a guitar.

image: ../Art/garage_band_icon_2x.png

Aim for realism if you create the appearance of real-world materials. In some cases, real-world textures, such as wood, leather, metal, or paper, can enhance the experience of an app and convey meaning to users. If this makes sense in your app, make sure that the texture you create:

  • Is authentic and expressive, and looks great at all resolutions

  • Coordinates with the overall appearance of your app and does not look like it was added as an afterthought

  • Enhances the user’s experience and understanding

Determine whether depicting a real-world task helps users understand its virtual version. Make sure that adding realism enhances both understanding and usability: Improving one at the expense of the other does not make your app better. For example, even though writing and posting letters is a real-world activity that most people understand, Mail does not expect users to fold a virtual note or affix a stamp to a virtual envelope.

Feel free to modify a real-world depiction if doing so enhances the user’s understanding. In other words, don’t feel that you must be scrupulously accurate in your rendering of realistic objects or experiences. Often, you can express your point better when you fine-tune or leave out some of the details of a real-world object or behavior.

Don’t sacrifice clarity for artistic expression. For example, it might make sense to show notes or photos pinned to a cork board, but it might be confusing to use a cork board background in an app that helps people create a floor plan for their home. If users need to stop and think about what your images are trying to communicate, you’ve decreased the usability of your app. (This concept is related to the principle of aesthetic integrity; see Aesthetic Integrity.)