App icon and button design — really a unique animal in graphic design. A relatively new category that emerged with computer interfaces in the last 20 years or so, app/button is in some ways easier than logo creations and in other ways more challenging.
Here’s a quick overview of the category: the very basics, some tips and a whole lot of awesome examples.
The difference between logos and app icons
Logos brand a company in the largest, most abstract sense. They set the tone of the company’s entire, overarching graphic style.
App icons, on the other hand, have a more concrete functional purpose: they are the image you click on to launch a computer program or application. They are one element in the company’s “graphic system” and must be made to match the style of logo, website, etc.
Because app icon designs usually have to fit a pre-existing design style, they may be somewhat easier to conceive than logo design, where the possibilities are more limitless. Apps do, however, share similar responsibilities: they must be instantly recognizable and appealing, often at very small sizes.
The difference between app icons and buttons
The boundary between apps and buttons is less clear than the boundary between app icons and logos. App icons and buttons are both graphic images you click on to interact with a computer program.
The difference is generally defined as this:
- App icons are what you click on to launch a program
- Buttons are what you click on to activate certain functions within a program or website, like the orange “Get started now” button on 99designs’ homepage.
Tips for designing app icons
Incredible detail is a great way to show off your skills but it’s not always functional. The following designs look great in this blog post. Scaled down to 57 pixels on an iPhone, though, they lose much of their detail:
So take a middle route: simple enough to be recognizable at small sizes but with enough texture and finesse to be eye-catching. Both of these designs register well, even when shrunk way down:
Noticing a trend? Make it square: this will get you more bang for your buck as far as screen space is concerned:
In fact, all too often app designs become stagnant and boring as a result of squareness. We’ve been really impressed by designs that imply a sense of motion, as with this flip book camera and champagne cannon:
Buttons typically fit an even smaller scale than app icons, so clear minimalism is key. Get your point across, while maintaining a distinct sense of personality. We love all of these:
App icon and button design on 99designs
99ers have produced some lovely app icons and buttons. Here is a small but impressive recent sampling. Shout out to the designers!