Advertise    Write for Us


Icon Design – Basic Concepts and Rules

posted by: Iaroslav Lazunov, in Articles / Theory/ Comments:
Icon Design – Basic Concepts and Rules

Icon Design is one of the most important trends in design. The number of web sites is increasing every day, number of applications grows, and all these contain interfaces, therefore, need to have icons. Today we will talk about the basic principles of creating icons, their types and trends in this area.

A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device (Wiki).

What are the icons for, maybe we could do with just text symbols?

I do not think so and here is why.

  • A human remembers pictures better than text.
  • Icon, in contrast to the inscriptions, may have characteristics that help to find it quickly on the screen. These characteristics are the shape and color. Inscriptions do not differ from each other by shape and color. In order to distinguish one inscription from another, you need to read them. In the case with icons, just one glance is enough.
  • Icons help to save screen space. The size of interface icon is usually smaller than one of an inscription.

What are the basic principles you should follow when creating icons?

  • If you create a set of icons, they should have the same style. Icons should not be considered in isolation from the environment where they will be located. That means that you need to take into consideration interface design, website design, and so on.
  • Icons of the set should be equally illuminated. That means that reflections and shadows must correspond to the same light source.
  • If you create multiple sizes of the same icon, design it from scratch. This is especially true for small sizes 16x16 and 22x22. If you just reduce the large icon to the desired size, ignoring this rule, it will transform into a dirty spot. When designing an icon for a smaller size, reduce the number of objects, do not use shadow and small glares. If a large icon looks like a 3D object, draw it in the frontal plane for the small size.
  • When you create small icons in vector editors use the pixel-perfect technique. Objects must lie exactly on the lines of the pixel grid. Otherwise, anti-aliasing future blurs the boundaries of the image, and the icon will not be clear.
  • Icons should not contain unnecessary elements, it complicates their perceptions.
  • Take into consideration cultural and national differences of users. Some symbols in different cultures can be interpreted in different ways. If you do not exactly know the audience, try to use global symbols that are understandable to all parts of the globe.
  • Icons in the set must differ significantly among themselves. If the user will be confused with the icons, then the whole point of their creation will be lost. In the first place an icon should be a "visual anchor".

What are the different types of icons?

You can read full version this tutorial on Astute Graphics Blog

Follow us if you want to be the first to know about the latest Adobe Illustrator tutorials and articles. Vectorboom team works for you!

Total comments: 5
0   Spam
1 icon-design   (2012 Sep 13 01:01)
Are you going to create new Icon Design tut? I really like all you vector tutorials

0   Spam
2 jaroslav   (2012 Sep 13 01:09)
Yes, Dude. I'm writing such icon tutorial right now cool

0   Spam
3 icon-design   (2012 Sep 13 12:52)
What icon will you create?

0   Spam
4 Austin   (2012 Sep 13 21:13)
What is the main trend in icon design now?
BTW Thank you for your interesting tutorials

0   Spam
5 jaroslav   (2012 Sep 14 12:15)
Realistic 3D icons

Only registered users can add comments.
[ Registration | Login ]
Subscribe Now!
RSS feed twitter
Recent Consultations
Illustrator Tutorial: Create a Vector Bottle
Free vector  - ice cream cone
5 free vector icons for iOS App
Astute Graphics Free Webinar recording #2: IMAGINING THE HALFTONE
Free vector - Set of four seamless backgrounds with retro dandy elements