Previous Entry Share Next Entry
How to make an ideal icon for your iOS app?
Полетели!
zhumai

Often designers spend a lot of time drawing application icons. It looks like it becomes serious branch in digital art. Very talented artists find more and more interesting ways to show the application metaphors in square format 1024x1024 px size.
It’s good to notice that such aspiration for beauty came from Apple company.  Apple has a man, who brought beauty to the cold computers. In 1977 year Mike Markkula brought his “Philosophy of Apple’s marketing” in 3 states:

- the first one is empathy, understanding of the customer’s feelings;

- the second one is concentration;

- and the third important state is suggestion.

“People make their opinion about the company or product on the basis of the first impression. Talking about your iPhone application it’s an icon. The customers judge the book according to it’s cover. You can create really amazing product  with the best quality, the most useful program and so on. But if you will present your product  in a poor way, nobody will buy it. If we will present our product in creative and professional way, we inspire people to the needed attitude.“

Mike Markkula

The iOS application icon is your first visual contact with the customer. And the customer will make a decision to go to the details page or not. So here are some advices how to make your application successful.

The icon should be beautiful

The icon should be beautiful to make first good impression and boost customer’s confidence. So simple and obvious, isn’t it? For some interface it's not enough to draw nice picture, but for the icon it's quite OK. Please, see the examples below.
illustrations2

Would users expect a good interface, if the icon has dark dirty shadows, bad color palette and low contrast? I think NO. What about these great icons below? They have warm and nice color pallete, contrast, great detalization, lights, shadows and reflections are made with love. Just beautiful!

illustrations1
If you want to find more beautiful icons, visit http://iicns.com/, find tags "icon, iOS" on the most popular portfolio resaurce like http://dribbble.com/, http://www.behance.net/ and find out more.

The icon should be unique

The second simple advice is to make your icon unique. This is very good example of different apps for Vkontakte. Is it possible to distinguish all these icons? Imagine that you have installed all of them on your iPhone. How can you understand what are they all about and which one do you need now? Which one is for video, for music and for pictures?




Test your icon. Select your category in the appstore and compare your icon to the others. Does it look nice and we can notice it amongst hundreds of others?

You can also use http://touchin.ru/test-iphone-icon/ for testing.

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. This example shows how to make unique icon, but save some common known detail or some element of the brand.

illustrations8

Think about good metaphor

It can be a powerful tool for improving the user experience of your icon, because metaphors can explain abstract or complex concepts, create a sense of familiarity. We love to recognize things. Whenever we can’t recognize something, our brain tries its best to make sense of whatever we’re looking at. It can trigger emotions also. While we associate the abstract icon of a coffee cup with a certain meaning or function, a detailed picture makes us think of yummy, hot coffee at the same time.

illustrations9

Don’t include words if you can

An icon is a graphical representation of a word, concept, object or operation. Words are in themselves an abstraction of a concept, object or operation – don’t mix these two representational tools as it will ultimately make your message more cluttered and harder to decode. Don't confuse with using the logo.
There’s quite a few icons in the app store that has words in them.

Icon/App consistency

It’s good if the icon and the UI of application will have something similar, for example colors or texture, metaphor.  If the interface use bookshelves with book covers, the icon can include book spines. The second example duplicates the whole interface.

Logo Icon

You can make your logo an icon. Why not? If the logo is nice and the advertising company made it well known and popular, you should use this.

illustrations3

Show what your application is about

For example, Google maps has a little piece of the map as an icon and the iBooks uses wooden texture as a metaphor for the book shelves and the simple book picture on it.

illustrations6

Show the connections

Sometimes Mac apps have companion iOS apps. Customers know the desktop icon and it's nice to make iOS icon look similar, but it's not very interesting to make just a copy.
illustrations5

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 make them look alike.

illustrations7

Don’t use standard gloss

And the last advice. Developers put standard gloss on the icon. It’s not unique any more and this light kills the best half of the icon, all the details on the top. All these icons would look better without gloss. If it’s so important to put this effect, make it as transparent as you can.

illustrations4

Conclusion

If you want to make a good application icon, just make it beautiful and unique. Think about nice metaphor. Don't forget to include nice metaphor what is the app about, try not to say, but to show. Or you can make an iconic version of the interface. Show the connection between applications from one "family". Ask developers no to use standard gloss. And if the application is from strong well known brand, don't be afraid to use the logo. Design the successfull application icon isn't a simple task. I hope that my advices will help you.


I used next links preparing this article.

http://habrahabr.ru/company/touchinstinct/blog/137063/
http://www.iphones.ru/iNotes/240014
http://developer.apple.com/library/mac/documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html
http://www.pixelresort.com/blog/iphone-app-icon-design-best-practises/
http://mantia.me/blog/about-app-icons/
http://www.maclife.com/article/features/what_do_top_100_paid_app_icons_have_common

http://sixrevisions.com/user-interface/5-reasons-why-metaphors-can-improve-the-user-experience/

This is my very first article, so I'll appritiate your comments.




Tags: ,

  • 1

Interesting article

(Anonymous)
It's very interesting article. After creating icon you need create different size of image. The best way of this is automatic application. Such as IconFly, as example

  • 1
?

Log in