“As soon as possible” is a fascinating phrase. It’s a client favorite. Allow me to dissect this phrase into the two obvious parts:
“As soon” suggests when you need it, and “as possible” pertains to when I’m able to do it. If you were to ask me to do something “as soon as possible,” I would get to it when I have completed everything else I intended to in the foreseeable future (which could take a fair amount of time).
What people often mean is “immediately” or “urgently,” although they don’t say it. If you were to ask me to do something “urgently,” or more specifically “tomorrow,” I would consider my current projects and adjust priorities if necessary. (Note: Rush orders will surely incur a fee.)
When requesting a task to be completed by someone, try not to use “ASAP” because it isn’t a fixed point in time, does not denote urgency, and is ultimately left up to the person completing the task to determine when it will be done. If you have a deadline, be specific about it.
I swear it must come up in every discussion when talking about software design. It’s bad, it’s good. It’s a trend, flat design is better. I honestly am so sick of it.
The first problem is defining it. Every person seems to have a different understanding of what that word means. The most obvious issue with that is when people are talking about it with each other, we’re talking about different things.
Find My Friends is often condemned for being too skeuomorphic. Mythbusted: Find My Friends uses standard iOS UI that is themed using custom graphics. The fine corinthian leather and stitching does not harken back to a day of fine corinthian leather products we used to use to find our friends. There is no connection to real world objects by using these materials.
Game Center is another app that is used as an example of skeuomorphism. Mythbusted: Game Center uses standard iOS UI that is themed using custom graphics. While the polished wood, gold medallions, and green felt recall the feeling of a poker table, at no point does Game Center rely on or suggest that it is a poker table because of it. There are no poker-table interactions in Game Center, and no one expects there to be.
Podcasts is yet another example. This app has a beautiful representation of a reel-to-reel that not many of us remember ever using. There are similar controls like play/pause, but other features like share, sleep timer, skip seconds forward and backward were never things that a reel-to-reel could have because of its physical constraints.
In the case of Podcasts, Apple uses a(n unfamiliar) product to illustrate the use of an app. Of course, by default, the podcast “album” cover obscures the entirety of the reel-to-reel and only displays playback controls and volume, not dissimilar from the Music app where podcasts used to live.
While Podcasts can be rightfully accused of being skeuomorphic (and in some places, the wrong way), it is in this writer’s opinion that it is made to be fun and inviting, not to recall a time gone by.
iBooks, an app that was introduced with the original iPad, uses a wooden bookshelf with books outward facing and pages that turn so closely to real life. iBooks is a wonderful example of how real skeuomorphism can help a user understand how to use it. The original iPad was touted as “you already know how to use it.” How right they were. It’s not just that we’ve used iPhones before it, but that some interfaces lend themselves to be incredibly easy, like iBooks.
iBooks showed us that we don’t have to just make table cells and navigation bars and buttons. Even though iBooks technically has these things, a user doesn’t parse them the same way as they do when in a “standard” or “unthemed” app like Settings.
As a visual designer, I have not only been witnessing the trend of using real life textures in software, but I’ve gratefully been a part of it. And as a visual designer, I hope it doesn’t change drastically soon, because I love drawing visually rich graphics for the incredible retina displays we have in our pockets and in our bags. It’s really fun, it can be really beautiful, and when applied over a great UI, it can be useful too.
More importantly, a visually distinctive app such as Game Center, Find My Friends, Podcasts, or iBooks helps you to remember which app you’re in. The colors, textures, and environment paint that picture instantly. (When I look at an Android phone, it’s often hard to remember which app I’m in because most default apps look the same and use the same colors and theme.)
Skeuomorphism is a word that everyone disagrees on what it means (or suggests it means all of the above), but is often used to discriminate apps that use realistic textures for the sake of joy, beauty, and delight. When you’re talking about an app that uses realistic textures, call that “theming” or “skinning” because before last year, that’s what we called it, and that’s what it is.
Making standard UI elements look beautiful shouldn’t be condemned, and it seems that Apple has done a wonderful job in attracting millions of people to use iOS because of these choices. Other apps might be able to get away without using textures and gradients, and that’s fine too. Visual and UI designers should just do the right thing for their users, whatever that means.
I like to make apps look good. It’s what I enjoy most, and I think it’s a very important part of the app-creation process. In fact, so do users.
“Probably the biggest impediment to this app’s success is how ugly it looks.”
–Top review from a popular travel app
While there is much to be said about designing apps, it can vary wildly between different products, companies, and people. If there is any constant in the process of designing an app, it’s the app icon. Everyone must have one.
What’s their purpose?
People seem divided on this. On one hand, it can be used for marketing. It is, after all, one of the very first things a user will see about your app. When they search for it or see it on the App Store, your icon will be there to try to sell the app.
On the other hand, once a person becomes a customer and has your app on their home screen, the purpose suddenly becomes very different. Users should be able to recognize your app icon when they’re looking for it.
And while you can focus on marketing needs, that is a one-time scenario for each person. Any individual will only buy your app once. One time. It’s important to recognize that optimizing for this one situation may hinder the needs of your everyday user.
I believe good app icons are most valuable for your customers, your everyday users, not first-time shoppers.
Consider walking down a candy aisle at a drugstore. If you have a craving for Reese’s Peanut Butter Cups, you know how to find it. Of course, it’s the bright orange wrapper with a bubbly yellow word on it. Instant. Most candy bars have very distinct brands which can be instantly recognizable at a glance of the entire aisle. This should be precisely how you approach your app icon design.
An ideal app icon reminds users of an app through shape, color, and texture. Take the Phone icon, for instance. It has evolved a tiny bit since Steve introduced it in 2007, but has remained mostly the same. Today, it is a bright green, with diagonal stripes, and a white phone symbol. These three elements together (read: by our powers combined) form an instantly recognizable mark for users. When a user needs to use the phone, it’s a no-brainer.
If we look at other familiar icons (to everyone on the platform), you’ll find the same characteristics at play. The Mail icon features a vibrant blue color, some clouds, and a simple envelope shape. The Music icon is a vivid orange, with a grungy texture, and two dark orange eighth notes. All three of these are easy to find, coupled with user-defined positions on the home screen.
When going through the process of creating or sketching your app icon, you might come across a few obvious ideas relating to function. For example, these three shopping apps use shopping carts for their icons. In fact, the majority of the icon is consumed by the cart symbol and a small percentage is used to denote the brand.
If we really think about it though, these shopping carts aren’t appropriate for any of these three apps. Zappos and Amazon only exist as online services that have never used a physical cart, and more-so their primary business is to sell you products! It’s a given what their intent is, so instead of focusing on the cart, why not focus on the brand? And regarding Apple, could you imagine an Apple Retail Store featuring a glowing white cart logo embedded in the stainless steel outside the storefront? How preposterous a thought!
Instead of focusing on what your app does, focus on what your app is. This will help your brand show through, which will be more unique and more recognizable.
It’s genius really, the glowing white Apple logo you see embedded in stainless steel is the same image of the products they sell. Your MacBook features a similar glowing white Apple embedded in a unibody aluminum enclosure.
If you take that same logic to app icons, any style you have in your app should be applied to your icon. Find My Friends, arguments about the necessity for fine corinthian leather aside, uses that leather both in the icon and the app. This makes a very obvious connection to the user. Maps features a full screen map. So does the icon. iBooks has a beautiful wood-textured bookshelf in the app. The icon uses the same wood texture. These material connections help a user associate your icon with your app.
Take inspiration from life. There is surely an analogy that can be drawn, or a physical product you are replacing with your app. Use the real life counterpart to influence your brand and your icon. If users see an icon that resembles something they know in real life, they will expect that it’s related! (Why wouldn’t they?)
Routesy is a great app for checking on MUNI and other Bay Area transit schedules. Its icon closely resembles old MUNI monthly bus passes. Though now deprecated, any Bay Area citizen who used MUNI on a daily basis will recognize that ticket anywhere. Using that ticket as a basis for the Routsey app icon is ingenious. Just as you use the pass every day, you’ll use this app every day.
Delivery Status is a neat way to track shipments. By using a brown cardboard box with a large white shipping label, this icon addresses a concern. “Where’s my box?” The answer can be found by tapping the icon of something that resembles the package you’re expecting.
Trailers, an app from Apple, uses a symbol found everywhere on Hollywood sidewalks. You’ll find it inserted in each “Movie Star” on the sidewalk. Combined with a fancy red carpet, and users will instantly understand this app is for going to the movies.
It’s not uncommon that Mac apps have companion iOS apps. Here are some examples of apps that use the square composition of iOS app icons in a really great way. Coda and Diet Coda share the leaf shape, color, and texture, but in a different way. Things showcases fitting an object to a square. Twitterrific exemplifies cropping to the most important area of an illustration. By relating the icons of apps on two different platforms, users will know to expect a similar experience from each.
Now that we’re about five years into the App Store, seeing a single developer or company ship a few apps as a suite is becoming increasingly more common.
Nike+ has a few apps that feature the same shapes. These three all have a diagonal shine, the familiar Nike swoosh, and a plane at the bottom. The consistent shapes and composition frame these as a family of apps.
Facebook has individual apps for functions, but retains company branding by sharing the background color, the familiar Facebook blue. The thin lighter blue rectangle at the bottom is an iconic branding element for Facebook and ties all of these icons together.
The iLife suite on iOS shares something very interesting and unique: an environment. While all of their spaces are designed differently, they all feature an object sitting on a surface with a close backdrop, making it obvious these are meant to sit alongside each other.
Apple’s iWork apps exhibit the same background color, gloss shape, and materials. The Keynote and Pages icons have shiny metals. Keynote and Numbers both have bar charts. The relationship of elements across icons makes these apps obviously from the same creator.
But I must admit, while I can point out many ways for your app icon to look unique, borrow from real life, or share styles with your other apps, I have no idea how to make an icon for a game. After some quick research, it seems all anyone does is put their primary character in a yellow square. They won’t really stand out amongst games, but I suppose they’re instantly recognized as a game.
Your app icon will sit among many other icons on the home screen, so make yours memorable.
This is adapted from a talk I gave at the Renaissance conference on January 23, 2013.
Of course, I love creating app icons. If you need an app icon, don’t hesitate to contact us! We’d love to work with you.
A Little About Icons & Me
Over the past five years, I’ve created a lot of app icons for a bunch of people. At Tapulous, I created them for Tap Tap Revenge, FriendBook, Twinkle, Fortune, and Collage. At The Iconfactory, I made one for Ramp Champ. When I went to Apple, I was fortunate enough to adapt icons for iBooks and GarageBand for iOS and, in addition, work with others to create the icons for Trailers, iTunes, and Remote. While at Square, I made an icon for their “Card Reader” app. And at Pacific Helm, Checkers.
Scattered throughout the years, I’ve been able to work with some really cool clients to make their app icons either while on my own, at the Iconfactory, or at Pacific Helm. In 2008, I was even able to make an app icon for the President of the United States, which was pretty cool.
“Hey Phil, what are we going to call this thing?”
“Well everyone seems to think we’re going to release a phone called iPhone.”
“Alright, sounds good. Let’s go eat sushi after work. You can pay this time.”
“This thing has the App Store, Mobile Me, and 3G service. What should we name this thing? Keep it iPhone or should we update the name too?”
“Well, since the most significant upgrade here to the actual phone is 3G service, let’s call it iPhone 3G.”
“Sounds fast. Let’s go with that. Sushi? Your treat?”
“Okay Phil, we have a bit of a problem here. This is our third phone and we can’t call it iPhone 3 or something, so what do we do?”
“Well what’s different?”
“They say it’s faster. I mean I notice it but look at it… it doesn’t look any different.”
“Uh, what about iPhone 3GS? The S can stand for speedy.”
“Phil, that is without a doubt the stupidest thing I’ve ever heard you say. But what choice have we got? I was going to treat you to some sushi for lunch but since you made this name our only option, it’s on you.”
“We’re gonna call this thing iPhone 4, right? It is the fourth iPhone you know. Have you seen this god damn retina display? How rad is that?”
“Well Steve, don’t you think people will accidentally call it 4G? I mean, it doesn’t have 4G service yet.”
“Irrelevant! I’m not letting you fuck this up this time. You can pay for the sushi because I did your job for you.”
“Phil, this thing didn’t change too much. It’s a bit faster I guess. Oh, and you can talk to it.”
“I did this before with Steve. iPhone 4S.”
“But then it was 3G service, not 4, which is a number.”
“You gotta make tough choices, Tim.”
“Whatever. We’re gonna sell millions of these anyway. You wanna get a burger after work? I’ll pay!”
“Hi Phil. So this is our sixth one of these right?”
“Yeah, but we just did 4. We have to do 5 now, don’t you think?”
“Well we never had an iPhone 2.”
“True. But who cares. We could call it the new iPhone.”
“Fuck it, let’s go with 5.”