Clarity, readability, brevity: seven principles of good icon design

In user interfaces, simplification helps clarify meaning and make room for content. Telegram icons are laconic and nice:

Sometimes icons in interfaces are more like illustrations. Yelp’s multicolor icons are delightful images of popular products. The shrimp in the Thai food icon is adorable:

Icons for mobile, desktop or tablet apps can be used to add more depth and color to icons. Because users understand context on a screen or in an app store, icons can be more expressive.

To achieve harmony for a family of icons, follow the same stylistic rules. Apple used all kinds of strokes, fills, and sizes for iOS 13:

Take a look at this set. Do some icons feel “heavier” than others? Any icon has a visual weight, which is determined by parameters such as fill, stroke thickness, size and shape. To achieve consistency, you need to keep these parameters the same.

Untitled (16)

Apple recently released an introduction to SF Symbols, which includes an icon style in nine weights and three scales (perhaps a slightly complex but detailed tutorial). Icons look more harmonious.

Untitled (17)

Maintaining consistency in a large family of icons is not an easy task, especially if several designers are working on them. In doing this, it is important to have clear principles and rules to follow.

The Phosphor icon set, designed by the author and Tobias Freed, includes over 700 icons. Although they each have a different shape, the icons have the same weight and look good together:

Untitled (18)

Individuality

Each icon set is different. What makes it unique? What can he tell about the brand? What mood does it create?

Untitled (19)

Waze’s interface relies heavily on icons. These colorful icons seem to say, “We’re freaky!”

Twitter icons are soft, light and crisp:

Untitled (20)

Sketch icons are subtle and airy:

Untitled (21)

Freemojis icons are cute:

Untitled (22)

Android icon packs are designed for different home screen themes. Below are the icons in Abstract, Pixel, Bubble and Neon styles:

Untitled (23)

Ease of use

The process of creating icons does not end after they have been perfectly drawn. Further testing and post-work is needed so that designers can easily create new icons and use them in their projects, and developers can code.

A quality icon set is organized, well-documented, and tested in context. It is good if it is supported by special tools such as an icon manager.

Organization

Keep the main file “clean”, name the assets correctly and place them so that they are easy to find. Consider the best way to create categories. Alphabetically? To size? Type?

Untitled (24)

Document creation

State the basic principles of an icon family. For example, the principles of Phosphor icons:

  • Comprehensibility. First of all, the idea must be clear. Make badges recognizable and readable. Never sacrifice clarity when naming a symbol.
  • Brevity. Use as little detail as possible. The Phosphor style simplifies. Be concise and count every stroke to convey the message.
  • Form. Be quirky. Add unique details carefully to liven up the icons without being overly restrictive.

List the technical rules. For example, for Phosphor it is:

  • Canvas 48 × 48 px.
  • 1.5 px center stroke.
  • Rounded ends.
  • Continuous lines, except when broken segments are necessary for understanding.
  • Straight segments, perfect bends and 15 ° increments where possible.
  • Adjust curves as needed to follow design principles.
  • Use whole, even numbers whenever possible, reduce to 1 px and 0.5 px if necessary.
  • Stick to the outline of the lines: 28×28 px circle, 25×25 px square, 28×22 px landscape, 22x28px portrait.
  • Keep the crop area 6 px thick.

You can make the documentation publicly available, for example:

Testing

Check the sequence. Make sure the icons work in context, they are the same size, and that they blend harmoniously with the visual system.

It is helpful to place icons next to each other to test the principles outlined above: clarity, legibility, alignment, brevity, consistency, and personality.

Untitled (25)

Special tools

Finally, if you can, create tools to make icons easier to use. Material Design makes icons easily accessible with its own library. Find the icon you want and load different styles, colors and sizes in the selected file format:

Untitled (26)

A set of icons – a living creature. Give him the love and tools he needs to succeed and grow.

Resources

Icon Libraries:

  • Feather is a set of over 200 minimalistic icons that scale well.
  • Material system icons – over 1000 utility icons for the interface in five styles.
  • Nucleo – a set of over 30 thousand icons in three styles.
  • Streamline is a beautifully drawn set of over 30,000 icons in three scales.

Icon aggregators:

  • The Noun Project is a great way to find inspiration in different styles and metaphors.

Icon managers:

  • Nucleo is an application with which the user can import, view and perform other actions with icon sets.

Source: vc.ru

Author: Clark Douglas

Leave a Reply

Your email address will not be published. Required fields are marked *