Transcript
[ Silence ]
[ Applause ]
>> 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 [phonetic] 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.