Mantia.me is no longer the home for my wallpapers, icons, etc. All fun stuff can now be found on Louieland. Past blog posts will remain here for the time being.
Yesterday, Caleb and I released a little app called Albums. We received incredibly polarized feedback. Some people loved it, others hated it.
There’s a few things I wanted to share about making stuff and taking criticism, being opinionated, solving problems, releasing a product, pricing, and what Albums set out to do.
“In many ways, the work of a critic is easy. We risk very little, yet enjoy a position over those who offer up their work and their selves to our judgment. We thrive on negative criticism, which is fun to write and to read. But the bitter truth we critics must face, is that in the grand scheme of things, the average piece of junk is probably more meaningful than our criticism designating it so.”
The above quote is from the movie Ratatouille, and is spoken by the food critic. I always come back to it when getting negative criticism.
There’s another quote I really like from Nile Rogers, in response to criticism for Daft Punk’s album Random Access Memories. “Some people seem to love it while some people seem to hate it, which is extremely healthy. Art and music is about triggering debate and different reactions and the most depressing reaction for an artist is indifference.”
When I posted the app icon for Albums to Dribbble yesterday, I expected criticism for the icon, but it didn’t seem like the proper venue for app criticism. A few people started voicing their opinions about the app, and I just had to remember the quotes above, and how they relate to me.
Making software isn’t easy. You have to make a lot of decisions and have good strong reasoning for doing so. A lot of the decisions I make are with my gut, and revolve around my personal taste. But there’s another way to design things, and that’s “safely.”
It’s not easy either, but designing safely means designing for everyone (80%+ of the population). Often, designing safely means making decisions that don’t make you happy personally. You include a feature so that someone else will like it.
I prefer designing something for myself. It falls into the category of something that is 100% known, instead of a mystery I need stats for or input on in order to design something.
Designing safely also doesn’t give you the polarity we saw with Albums. You don’t often see people love/hate apps like the stock Apple Music app. That’s because that app is designed carefully for a large audience. It has a bit of everything to make everyone content. It doesn’t exist for people to fall in love with it. And that’s fine, it’s just not for me.
Designing opinionated software often comes with shortsightedness. You forget about every possibility. It’s not negligent or careless, it’s just forgetful. It’s hard to remember every setting that exists.
In Albums, we recently discovered a bug (only from launching to people outside Caleb and I) that if a user has “Show All Music” unchecked in their Music settings, albums in iCloud won’t play. They show up, they just don’t play.
Some things, like this example, couldn’t have been found out without extensive testing or releasing to the general public.
I had a similar experience with Camera Noir. I blindly accept location services. It didn’t dawn on me that if someone were to reject it, our app couldn’t handle that. And because I updated the app in beta stages to itself, I never was asked for location services again. I couldn’t have known.
If you’re at all familiar with the apps I’ve produced in the past two years, you’ll know I’m in the business of incredibly specific apps.
My first independent app was Checkers. It’s just a game of checkers, and it didn’t have any AI. You had to play with another human across from you. Camera Noir only took black and white photos. Magic Passport is just a checklist for Disneyland.
Albums is no different. I set out to design something that solved a simple problem: every time I opened up the music app I was greeted with an alphabetical list of albums or artists and had to scroll or search for what I wanted to listen to. From the moment I opened the app to when music was flowing to my ears, it could take 10–20 seconds.
I’d scroll up and down the albums list, but it was too long to use reliably. I could use the alphabetical scrubber, but again, a list of too many albums makes that list scroll too fast. Every pixel I scrub was like a dozen albums scrolling by me. Getting to Daft Punk’s Random Access Memories easily meant searching for it or bookmarking it as a playlist. So then I ended up with a ton of playlists that were single albums.
One person told me that I must be “out of touch” with how people listen to music. I don’t believe I am. Listening to albums in their entirety is not a thing everyone does, but I believe it to be the purest form of listening to music. As a work of art, completely. I fully understand that lots of people listen to single songs, or shuffle albums or artists. Without understanding this, I wouldn’t have ever been able to work on a product like iTunes.
Pricing is a tough cookie. There have been so many articles on pricing apps and frankly I don’t want to have that argument again. My only theory in pricing apps is high enough that whiny kids don’t buy it because it’s “expensive.” This disallows stingy people (who love complaining) to get the app so they can complain more about how they hate it.
For a week, we lowered the price of Camera Noir to a dollar, and we received the most negative feedback about the app we ever had. It was a “ripoff” because it “only” did black and white photos.
That game is not for me. I’ll price my apps how I value them. After all is said and done, $3 gets split up quite evenly between Apple, Caleb, and me. I’m only getting a dollar off of your purchase. Am I ripping people off? No. I’m getting one American dollar for each purchase.
The last thing I wanted to talk about was the kinds of users I want. This goes hand-in-hand with pricing. Let me be clear:
The kinds of users I want to buy my software are the kinds of people who like my work. They may not always agree with me, they may not always find a use for what I make, but they can appreciate it. I want people who want to buy my apps, not people who need convincing. I want people who won’t complain, but will file bugs because they understand that it won’t be perfect in version 1. It hardly ever is. Even Apple screws up their version 1’s. (Sometimes their version 2’s!)
In short, I like making apps. I’d like to continue making apps. But more importantly, I want to keep making apps that people love. (Even if you, in the back, hate it.)
I remember when I became interested in design, but it was not obvious at the time that software design was what I was after.
I was fourteen, and I had my own computer. It was a stupid Windows PC but the time was right for all sorts of wonderful things. There was the ability to theme the UI to different colors and styles. I downloaded every theme from Javier Ocasio (KoL). You could change icons easily with tools made just for that. I’d install an app that made a fake OS X dock on your PC to launch apps from. Y’z Dock. I downloaded icons (like those from Everaldo Coelho and Jairo Boudewyn) and themes and was constantly tweaking and changing things. And Konfabulator widgets.
And then there was even a thing called PearPC that allowed you to install OS X on a PC. That’s when I started using OS X.
I had Panther. I installed Shapeshifter, and Candybar, and Pixadex, and Mighty Mouse: apps that were created to help you customize every aspect of your computer. You could change the theme, from the window controls to the menubar, to scrollbars and buttons, and skins for specific apps. People used to skin apps on OS X that we don’t even care about today, like DVD Player. People made custom skins for DVD Player’s remote.
Then I actually got a Mac. I got an iMac G5, brand new. It had OS X Tiger. Themes had to be updated, but they were updated, at least some of them. I downloaded everything from Max Rudberg. Milk, EYLO, Aluminum Alloy. There was a site dedicated to all this: MacThemes. Phill Ryu threw this together with help from others, and there were reviews of themes, download links, all on a beautiful (and yes, “skeuomorphic”) web design. I started downloading icon sets like MINIUM° and SNOW.E2 from Sascha Höhne, and everything from the Iconfactory. Ged Maheux, Corey Marion, Talos Tsui, Dave Brasgalla, Anthony Piraino, David Lanham. These people were my heroes. They drew things I could only hope to draw one day.
MacThemes Forums. This is how I met so many designers like me. Sebastiaan de With, Mischa McLachlan, Philipp Antoni, Henri Liriani, Louis Harboe, Taylor Carrigan. We posted icons and themes, and screenshots. So many screenshots. A thread of hundreds of pages of screenshots so everyone could see what your computer looked like.
Somewhere in here, I got my first paid job. I got to make an app icon and UI for an app called Xslimmer with Jorge Llubiá and Pedro Cuenca.
And suddenly: iPhone. As soon as there was a way to jailbreak it, we could customize it. I found the folder, like many others, where the icons were. I replaced them. I drew my own. I attached my name to the download in Installer.app like a lucky idiot, and people started to notice me who previously hadn’t.
Without all this, without all these people above, without everything happening just like this, I wouldn’t be designing things like I am today. I might not be drawing icons and making apps.
And Brad Ellis. Who would’ve thought I’d start this company with him four years later?
I moved across the country to work for the Iconfactory: my dream job since I was sixteen. I got to make Ramp Champ with Sean Heber. I got work on Twitterrific with Craig Hockenberry. The people at the Iconfactory are some of the most wonderful people I’ve ever met in my entire life. They treated me so well and helped me grow into the designer I am today.
After that, I was able to move all the way back across the country again and work for Apple where I got to make icons for Apple. For Apple. And after a brief stint at Square, I now get to work for myself, here at Pacific Helm. I get to make my own apps. I get to work with all sorts of people on all sorts of apps.
I’ve met a lot of great people that have genuinely inspired me. Neven and Christa Mrgan, Joey Ellis, Mark Kawano, Tim Van Damme, Johnnie Manzari, Jeff Broderick, Brian Benitez, John Gruber, Greg Maletic, Elliott Harris, Michelle Morrison, Nick Paulson, Shahrouz Tavakoli, Wil Shipley, Bradley Lautenbach, James Dempsey, Brent Simmons, Patrick Gibson, Lia Napolitano, Phred Lender, Benjamin De Cock, Max Temkin, Caleb Thorson, Sam Soffes, Alexa Grafera, and many more.
This is the only way I can see how it could’ve happened.
Just the other day I was wondering… what happens now? Not with me, but with the next fourteen-year-olds who are ready to be inspired. Do they look at Dribbble and decide to make things? Do they jump in and make an app?
I started by tinkering, customizing. Just as an engineer might. You start with something that exists and you change it to understand it. You do things on your own. But now… companies like Apple have locked down things like theming. It’s so hard today that no one even bothers. Changing icons is hard too. With some apps you can’t even do it without an app breaking because of code signing.
Most of the people I know listed above have a similar story. Maybe young people will be inspired by our apps, maybe they’ll be inspired by our art. But will they be able to tinker like we could?
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.
User Experience designers, so called, try to elicit emotional responses from users. Is the reason for creating great UI to make you feel good or is the purpose to make a task easy or simpler than before?
I was talking over breakfast with someone and got on the topic of emotion and experiences in software, and wondered why we don’t show much emotion when using apps. Certain things make us excited or happy, but we don’t necessarily show it.
Even a really funny video might not make you laugh, but when you’re in a group, you have a greater chance to. It’s like groupthink. Or crowd psychology, bandwagon effect, herd behavior, or collective behavior. Whatever it is actually called, you’re more likely to react when more people are around.
I think the reason that we might not show emotional reactions to apps is because the majority of time that we use them we’re alone: it’s you and your phone.
To use an example, Steve Jobs introduced the iPhone in a legendary keynote presentation. While showing off a few apps, people in the audience reacted audibly. When he first slid the grabber to unlock the phone, everyone gasped. When he first sent a text message and the familiar iChat “swoop” sound played, everyone laughed.
Steve even unlocked the phone a second time because it was such a crowd-pleaser. But now that it’s standard, we get little enjoyment out of it. Just like a joke, it gets stale. There’s nothing wrong with that, it’s just that a familiar joke won’t prompt us to laugh as loudly or excitedly.
Was the purpose of those iPhone UI choices to make you feel good the very first time? Or were they just “the right thing”? I certainly didn’t expect a familiar iChat sound to play when a message was sent, but as soon as it happened, it was obvious. Of course, why wouldn’t it?
Don’t let your guiding principle of designing an app be to make people feel something emotionally. Just make UI that’s easy, smart, and simple. In turn, your users will be happy.