App Icon Design

You all know that every app, even your app, needs an app icon. It's the symbol that represents your product on the Home screen and the App Store.

Humanity has been using symbols to communicate ideas since antiquity; even Apple was doing this a long, long time ago.

I'm only joking. I'm only joking, of course. I hope there are no egyptologists in the room that were offended.

But in all seriousness, we have a long rich history of using symbols, literal, non-literal, as a method of communication, and we extend this to the modern world, but we apply the same principles to the user interface design.

For example, there was your Macintosh. We're going to take a quick trip down memory lane and take a closer look at some classic Mac OS icons.

Many metaphors have stuck around for three decades of Mac OS. Investing in simple application iconography was a way to emotionally relate to the user. It made the system approachable and easy to use.

It also made the platform unique and stand apart from the competition.

Many are close approximations of real world objects, and some concepts might be a little on the abstract side, but they all live within a system that tells a user that they're interconnected. For example, they're appropriate; some are families, like families of maps or families of documents, and due to time, we've moved beyond some metaphors, either because the technology was surpassed, like the floppy disc; remember those, or the metaphor we're seeing is too aggressive, like the bomb. Or we had to learn a concept like the hieroglyph .

Over time the face was removed, and we've come to notice there's just the explanation point.

Even smaller glyphs share the same principle. So, let's take a close look at one of my personal favorites, the paint bucket.

The paint bucket fills your canvas with color, just like spilling a real can of paint on the floor. At the time, this was an abstract idea, but it was grounded here by a real world object. And how about how this was drawn even in those days? Consider the consistency of line weight.

There's implied movement in the angle, a subtle indication of perspective.

It's got a good balance of black and white. It's simple and high contrast.

These examples represent some fundamental principles that we still use today when designing app icons.

The first, metaphor, finding an easily identifiable metaphor that will object or graphic logo a mark. The second, simplicity; your design should be simple and clear, no clutter or over complicate it. If your icon is designed well, it should be quick and easy to read. Connection.

Aiming to create an emotional connection with the user, the icon is the face of your app as much as the UI. Keep it fun, keep it engaging. And lineage, make changes to your icon meaningful and deliberate.

Don't change your app icon every single time that you update your app. Refine your identity over time.

So, let's think about some of these principles as they related to an Apple app.

Keynote. Since version 1, all the way back in 2003, the app's identity has been the podium.

And why the podium, you ask? Well, the symbology is important, especially today of all days.

It is a real old metaphor that many can relate to.

Presenters have used podiums for generations, and to add an emotional connection, the presenter notes rest on a warm wooden surface. The microphone adds a familiar detail. It immediately sets the stage for what keynote does, and we didn't want to lose that. As keynote has moved from version to version, we updated the materials, and we've transitioned from a classic to a modern style, but the notion of the podium has remained consistent. The lineage provides users with a sense of familiarity.

The podium was such a strong mark that when we designed our apps for iOS, we simplified the podium to more of a glyph and brought it over.

The visual connection here is really important because it tells users that they can expect at consistent experience across platforms.

And if you have a family of apps, take a look at the iLook icons.

Keynote uses the podium on both Mac and iOS.

Pages uses the pen, a metaphor for writing and the written word.

The paper is denoted by a line on iOS but helps to ground the pen to a surface. Numbers uses a flat and more 2D representation of the chart and the table on iOS.

We extend the same principles to GarageBand with, and iMovie with the guitar and the staff. The metaphor in color palettes for all of these actually share the cross platform to reinforce the idea of family.

Let's focus in on a few details. Some things are super important.

First off, the colors harmonize with the rest of iOSs vibrant color palette. The glyphs are simple. They all share the same mass. They're white and high contrast. There are no unnecessary details, and they all share the same ground plane. This might just look like the Keynote podium, but there are some subtle optimizations within.

For example, the corners are all custom curves, so they appear really smooth, a large and small size.

So, again, the same principles, metaphor, simplicity, connection, lineage.

Let's look at these as they relate to another app, music memo, shown here on the right.

There's a clear connection to the history of GarageBand through color and metaphor. The circle is reminiscent of a sound hole in an acoustic guitar.

The strings vibrate in a playful graphic way. There's a sense of movement and creativity.

The icon makes use of the iOS icon grid so that when music memos appears next to other icons in the system, the common elements like the circle are the same size as say Safari. Now, we're going to do something a little fun. We're going to take a look at the News app icon to look at some of the more practical considerations to think of when you design your app icon and some tests that you can do at home to make sure that your design is holding up at a smaller size. So, let's ask ourselves a question, in a hypothetical world, what if News were the only app on the home screen? What would the icon have to communicate for it to be immediately clear that News does what News actually does? Or to be understood without a name underneath the icon? How would a good use of simplicity, form, color, contrast, composition help it to be understood? You think an icon would have to work twice as hard, right? Well, here's a few other props that we tried along the way.

The first icon here has a peak of paper is a little abstract. Does the end rest on a newspaper, or a white box? A little hard to tell, and much of the red background is hidden.

The second introduces another sheet behind the first, which helps to reinforce the metaphor a little, but when the other edges are missing, you can't tell that the N is actually resting on a newspaper, and the color is still fairly hidden.

Let's look at the third design.

You can clearly see all the edges on the newspaper. The white is high contrast; the red background pops. The rendering of the newspaper and logo text is simple, bold, and graphic.

Why does this matter? Well, when you look at your icon on the Home screen, you can really see what holds up at a small size and is the right mix for contrast form and color. Here's the three designs at a small size.

And try testing your icon in a folder next to other icons. Squint your eyes.

Where's the news article? Right there on the top left. And it's easy to see because of the simple design. The composition is distinct. It's high contrast, and the color is clearly visible. Designing an app icon is an iterative process. So, here's some other things that you could think about as you start to design yours.

We'll start with the first, trying to be unique.

Now, that might sound like a tall order, but it's important to be really aware of other apps in your category.

Here's the three apps in the video space, Quick, Instagram, Periscope.

Let's look at how different these icons are. Colors and shapes are bold. Each is distinct; it stands out on the Home screen.

Instagram is also a great example of how an icon can become synonymous with a company the moment you see the white camera glyph, the purple sky, you immediately think Instagram. Second, experiment.

Now, despite how beautiful a blank canvas is, starting here might be a little daunting. So, why not try a little bit of sketching. Even if you don't think you can raw, sometimes a pen and paper goes way further than a mouse, and sketching is a great way to get your ideas out without worrying about finessing your icon early on.

Do some doodles; show your friends; get their ideas. This is your app icon, so your design has to pop. Have some fun with it.

Further, and perhaps most important, test.

What do we mean by test? Well, as you develop your app icon, examine on the Home screen, in a folder, and if your app has settings, the settings app.

And be careful if you decide to represent your user interface in your icon.

Clear is a great example of doing this really, really well.

They've got a strong visual style with recognizable colors and a simple brand of pattern that really helps to stand out at a small size. Again, it's simple, colorful, high contrast.

And last but not least, have some patience.

The answer might not come to you right away. Take your time, examine your options, and save your work. Oftentimes, it's the simplest design or an early direction that you abandoned that you actually ultimately find is the right choice. So, to summarize, when designing your app icon, think about metaphor, a clearly identifiable object or symbol that is simple and easy to understand.

To create an emotional connection with the user, be fun, be playful.

And lineage, your icon is the face of your app.

It's our brand. Think of your icon as an investment.

And for the process, try to make your icon unique so it stands out on the Home screen and the App Store.

Experiment with different designs and test them.

Use the icon grid. Look at icons that Apple has designed as reference for form and color. See what looks good, big and small.

Put your icon in a folder to see how it looks at a really small size.

And don't forget to optimize your assets for different device sizes.

And above all, have patience. Designing an app icon can seem like a lot of work, but if you invest the time to do it, it can really, really pay off. Thanks for your time.