Apple’s Design tips for UI icons…

Here are some tips for designing UI Icons and Images – by Apple. Some are pretty obvious, but then Apple do excel at making things easy for the masses.

I disagree with the point about portraying texture and weight to icons. The current trend for simplicity and flat icons is the right way to go.

Apple User Interface Tips.

— Beautiful, compelling icons and images are a fundamental part of the iOS user experience. Far from being merely decorative, the icons and images in your app play an essential role in communicating with users.

For the best results, enlist the help of a graphic designer. An experienced graphic designer can help you develop an overall visual style for your app and apply that style to all the icons and images in it.

Use universal imagery that people will easily recognize. Avoid focusing on a secondary or obscure aspect of an element.

Embrace simplicity. In particular, avoid cramming lots of different images into your icon. Try to use a single object that expresses the essence of your app. Start with a basic shape and add details cautiously. If an icon’s content or shape is overly complex, the details can become confusing and may appear muddy at smaller sizes.

Use color and shadow judiciously to help the icon tell its story. Don’t add color just to make the icon more colorful. Also, smooth gradients typically work better than sharp delineations of color.

In general, avoid using “greek” text or wavy lines to suggest text. If you want to show text in your icon, but you don’t want to draw attention to the words themselves, start with actual text and make it hard to read by shrinking it or doubling the layers.

In general, create an idealized version of the subject rather than using a photo. Although it can be appropriate to use a photo (or a screenshot) in an app icon, it’s often better to augment reality in an artistic way. Creating an enhanced version can help you emphasize the aspects of the subject that you want users to notice.

If your app has a very recognizable UI, consider creating a refined representation of it, instead of using an actual screenshot of your software in the app icon. Creating an enhanced version of the UI is particularly important when users could confuse a large version of the icon with the actual interface of the app.

Avoid using iOS interface elements in your artwork. You don’t want users to confuse your icons or images with the iOS UI.

Don’t use replicas of Apple hardware products in your artwork. The symbols that represent Apple products are copyrighted and cannot be reproduced in your icons or images. In general, it’s a good idea to avoid replicas of any specific devices in your artwork, because these designs change frequently and icons or images that are based on them can look dated.

Don’t reuse iOS app icons in your interface. It can be confusing to users to see the same icon used to mean slightly different things in multiple locations throughout the system.

Portray real substances accurately. Icons that represent real objects should also look as though they are made of real materials and have real mass. Realistic icons accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey an object’s weight and feel.

Use transparency when it makes sense. Transparency in an image can help depict glass or plastic, but it can be tricky to use convincingly. You should not use transparency in your app icon.


About tabletdesigner

Mobile Product Consultant and Creative Director, consulting across design agencies, publishers and brands on digital publishing, apps, UX and interactive design. I also train designers how to use Adobe DPS, and inspire new ideas for getting content working on mobile devices...

Leave a comment...

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: