DESIGN AN APP ICON

About the Author

Michael ist a Danish designer, business man & keynote speaker. That runs entertainment development studio Northplay, Pixelresort and design source platform … more about Michael↬


fast summary↬ developing that singular piece von graphic design that individuals will first interact with each time lock encounter your product can be intimidating. A beautiful, identifiable und memorable anwendung icon kann sein have a huge impact on die popularity und success des the app. However how specifically does one do a “good” apps icon? What does that also mean?Fear not, I’ve placed together some tips and advice kommen sie help answer these questions and to guide sie on her way zu designing great apps icons. I’ve to be designing, making resources und giving talks around icon entwurf for the past couple von years. An this article, and bei the video at die end, I’ll sum hoch what I’ve learned around this exceptional craft.

I’ve been designing, making resources and giving talks around icon entwurf for the past couple des years. Bei this article, and bei the videos at die end, I’ll sum nach oben what I’ve learned about this exceptional craft.

Du schaust: Design an app icon

Further reading on SmashingMag:

What Is bei App Icon?

The zuerst things you need kommen sie understand wie setting out zu create in icon zu sein what exactly bei app symbol is und what arbeit it performs. An app icon ist a intuitive anchor for your product. Think von it as a tiny piece von branding that not only needs zu look attractive and stand out, however ideally so communicates die essence of your application.


More ~ jump! proceed reading below↓

Meet Smashing e-mails Newsletter with useful tips ~ above front-end, entwurf & UX. Subscribe and get “Smart Interface entwurf Checklists” — a free PDF deck through 150+ questions kommen sie ask yourself wie man designing und building nearly anything.


Your (smashing) email

Once a week. Advantageous tips ~ above front-end & UX. Trusted von 190.000 familiar folks.


*

The indigenous “logo” is thrown roughly carelessly this days. App symbols are notfall logos. When they absolutely share branding-like qualities, they’re under a gewächs of different restrictions. It’s bei important distinction zum a designer kommen sie make: Logos space scalable vector pieces of branding designed zum letterheads and billboards. Icons are most regularly raster-based outputs customized to look good within a square canvas, punkt specific sizes and in specific contexts. The approach, ns tools, the job and, therefore, die criteria zum success space different.

*
App icon packages consist of a range von sizes. Acquire this template from use Pixels. (View big version)

From a practical standpoint, wie man you’re making an app icon, freundin are producing a set des PNG files in multiple sizes — ranging from small sizes choose 29 × 29 pixels all die way up zu 1024 × 1024 pixels — that need kommen sie be bundled v your app. This set des carefully crafted designs möchte be used an the countless contexts von the operating system where users will encounter her application — including ns iOS app Store und Google Play, die settings panel, ns search results and the residence screen.

App icons kann sein essentially it is in made in any applications capable des producing raster files, yet common options are Photoshop, Illustrator und Sketch. Tools like the ones found on apply Pixels offer ausgezeichnet PSD templates that tun können help freundin get off the ground quickly.


A short videobilien demonstrating how kommen sie use one von the templates on use Pixels

The 5 Core Aspects

Now, let’s look punkt some von the best practices bei designing app icons. I’ll talk about each von my five core elements of apps icon design, give tips ~ above how zu improve every aspect and show off some examples von how I’ve operated with that quality. A lot of these examples möchte be based on my own work. That’s notfall because i feel favor it ist the ideal or only way to illustrate these things, but it has die added benefit von my discovering what thoughts went into ns process. Wie going through the aspects, try kommen sie imagine symbols that freundin like and how ns individual facets take shape an the symbols on your house screen. Let’s gain started.

1. Scalability

One des the most important aspects of in icon ist scalability. Because the icon ist going to be shown bei several locations throughout die platform, und at number of sizes, it’s essential that your creation maintains that legibility und uniqueness. The needs to look good an the app Store, ~ above “Retina” devices und even bei the setups panel.

*
An app icon needs zu work at multiple resolutions, retaining ns legibility des the concept across die range des sizes.

Overly facility icons that cram too much into the canvas often fall victim to bad scalability. A very big part des the theoretical stage of anwendung icon entwurf should be dedicated kommen sie thinking about whether a given entwurf will scale gracefully.

How kommen sie Improve Scalability

Working on a 1024 × 1024-pixel canvas tun können be deceptive. Shot out the design on die device and an multiple contexts und sizes.Embrace simplicity and focus on a single object, best a distinctive shape or ureigensten that retains its contours und qualities wie man scaled.Make sure ns icon looks good versus a variety of backgrounds.
*
A few icons I"ve made through scalability in mind.

2. Recognizability

An app icon ist like a wenig song, and being able zu identify it quickly amidst ns noise des the store and the home screen ist a crucial component in great icon design. Nur as die verse des a lied needs kommen sie resonate with ns listener, deshalb do die shapes, colors and ideas of bei app icon. The entwurf needs zu instill a memory und sense von connection ~ above both a practical and in emotional level.

*
An icon kann sein be detailed or simple; just make certain it"s creative and interesting und accurately conveys your intentions.

Your icon wollen be vying zum attention amongst thousands of other icons, all of which have the very same 1024-pixel canvas to make your impact und secure their connection with ns viewer. While scalability zu sein a vast part des recognizability, dafür is novelty. Ns search zum balance between these qualities ist the an extremely crux des the discipline.

How kommen sie Improve Recognizability

Bland, overly complicated icons are ns enemy des recognizability. Try removing details from your symbol until die concept starts zu deteriorate. Go this enhance recognizability?Try out several variations des your design. Heat them hoch on a grid und glance over them, see which aspects von the designs capture your eye.Deconstruct her favourite app icons and figure out why sie like them and what techniques were used kommen sie make them gestanden out.

3. Consistency

There’s something to be said zum creating consistency between the experience of interacting with an app icon und interacting v the anwendung it represents. I feel like good icon design is an extension of what the app is every about. Do sure die two support each other will create a more memorable encounter.

Mehr sehen: Wolfsburg Europa League Qualifikation, Vfl Wolfsburg

*
Consistency bolzen icon and interface zu sein important to strengthening die visual narrative.

Shaping a sleek, unified image of your app in the user’s mind boosts product satisfaction, retention and virality. In short, getting your icon to work harmoniously with die essence, functionality and design of your application is a huge win.

How to Improve Consistency

One way zu ensure consistency betwee app and icon is to align their shade palettes and to use a similar und consistent design language — a green interface reinforced by a green app icon, for example.Although it’s notfall always possible, one way kommen sie tighten ns connection between in app and its icon is to tie the symbolism von the icon directly to ns functionality des the app.
*
Icons can also be do consistent throughout a suite von related apps.

4. Uniqueness

This practically goes without saying, yet try to make something unique. Mimicking a style or a trend is perfectly fine, however make it your own. Your icon wollen be constantly competing with other icons zum the user’s attention, und standing out kann sein be a perfectly valid diskutieren for a design.

*
The "Productivity" category in the iOS app Store ist a great example von how uniqueness hasn"t gotten in the entwurf process.

Uniqueness is a tricky part von design, due to the fact that it relies notfall only top top your ability but deshalb on die choices von others who room tackling a similar task.

How to Improve Uniqueness

Consider what everyone else ist doing an your space and go in a different direction. Always do her research — the welt doesn’t need another checkmark icon.A einzel glyph on a one-color background tun können be a tricky route zu go under if sie want zu be unique. Play around with various colors und compositions, and challenge yourself kommen sie find new und clever metaphors.Color zu sein a great and often overlooked way kommen sie reframe a concept.
*
Whatever your entwurf style, uniqueness zu sein often in exercise bei finding a novel idea.
*
Game symbol design tun können be a an excellent source of inspiration because there"s usually a broader range von ideas top top display, free von convention.

5. Don’t usage Words

This ist one des my all-time top haustiere peeves. Only on die rarest des occasions is it jawohl to use words in in app icon. If you oase to retreat to another tool des abstraction — the created word — then I’d say you’re notfall using the full force of your photographic arsenal.

Words and pictures are separate representational tools, und mixing them an what ist supposed kommen sie be a graphical representation usually leads to bei experience that zu sein cluttered, unfocused und harder zu decode. Zu sein there yes, really no better way zu visualize die application than v dry words? Whenever i see native in in app icon, i feel like the designer missed in opportunity zu clearly convey your intention.

What to Think About wie You’re Considering Words an Icons

There’s no need to include die app’s name bei the icon — it will usually accompany die icon an the interface. Instead, spend your time coming hoch with a cool pictorial concept.“But facebook has ns ‘f’ an its anwendung icon,” ich hear sie say. If you’re making use of a einzel letter und it’s a great (and unique) fit, then the letter möchte lose that “wordy” quality und become iconic. However, this zu sein more often ns exception than die rule.Your company logo und name in a square zu sein never a an excellent solution. Perform you oase a mark or a glyph that functions well within the constraints? If not, then you’d more than likely be finest off coming trost with miscellaneous new. Psychic that bei icon ist not the same together a logo und shouldn’t be compelled into the same context.

Making your Mark

The app Store und Google Play have many examples of bland und unopinionated icon design. Her icon ist the strongest link you’ll oase with the user. It ist what they’ll see zuerst when they fulfill you in the anwendung Store. It’s what they’ll interact with every einzel time they use your app. It is what they’ll think of when lock think des the app. Anything short des a well-thought-out, fitting and attractive solution will be a failure von your greatest visual asset. Your app icon should not be in afterthought; it have to be a functioning part von the process.

App symbols are tiny little pieces von concentrated design, and the qualities of good iconography room universal: scalability, recognizability, consistency and uniqueness. Mastering these wollen spill over zu other areas des your design. Becoming in iconist will make sie a far better designer.

Whether they’re in-depth or simple, typical or creative, an excellent icons oase one unifying property: They every grab people’s attention an the same restricted amount des space, top top a totally level playing field. It’s a certain challenge, und the answer is always within that very same canvas.

Mehr sehen: Die Besten Saugroboter 2016 Test & Erfahrungen, Die Besten Saugroboter

Crowning your application through a singular piece of graphic design is no doubt intimidating, but ich hope die tips outlined above wollen make sie more confident in taking on ns challenge. Jetzt go forth and make a fantastic anwendung icon!

Resources

In this article, I’ve used icon tools available zu subscribing members von Apply Pixels, but many icon tools are out there, both free und paid. Icon entwurf is one des my an excellent passions, und if you’re hungry zum more, I’ve made numerous videos und given a gewächs of talks on the subject. Below are 2 that intricate on ns theories behind this article.