Vector Icons, how we got here
Icon design ain’t the same as it was back in your grandfather’s day. Actually, your grandfather probably never designed icons, and if he did for some reason, he probably did it with pen and ink, or a protractor or some other such manual contraption. So I admit it. Referring to your grandfather was just a cheap device to underscore the fact that devices and platform technology is changing fast, and design techniques are constantly under pressure to evolve to keep up. But back the point I am trying to make: icon design and production has changed quit a bit since the advent of web and mobile apps. And it has done so for the better.
How it was
Several short years ago, iOS used to have only two screen densities. Android had about four. High density displays and Retina displays had yet to appear on computers and laptops. So when designing icons for digital products, designers would labor away in Photoshop or some other popular pixel-based design tool. They would output sets of icons for all these different devices and screen densities. For Android they had to support LDPI, MDPI, HDPI, and XHDPI. If you are interested in learning more about Android screen densities you can find out all you want here. On iOS, they had to consider they 1x and 2x resolution, and add the silly filename suffix @2x where appropriate. Designers quickly learned that they couldn’t possibly handcraft these icons individually for each size and still hit their deadlines. They had to find all sorts of tricks to make sure that the output of one icon would scale nicely without artifacting to all the different screen densities.
How they compensated
They solved this by mastering Photoshop’s, or Illustrator’s vector drawing tools. These are powerful tools, and they were great for allowing designers to realize all that they could envision. But the downside to this was that oftentimes the smaller-sized icons would look muddy, blurry and hard to read compared to icons from higher-densities. So designers were left with the option of designing for the lowest common resolution, or designing for the top resolution, and devil may care for the lower screen densities. Or, god forbid, create custom-drawn duplicate icons for each size. In addition, the asset wrangling of duplicate assets at all the sizes across all screen densities was a complete pain in the ass.
How it is now
In a short time, screen density has only increased. Android now supports LDPI, MDPI, HDPI, and XHDPI, XXHPI and XXXHDPI. (The last size sounds a little naughty, but it’s not. It just means its screen has 4x pixels more than an MDPI screen.) While iOS is up to 1x, 2x, and 3x. As Android and iOS devices’ screens continue to increase in size and density, designers’ busy work doesn’t seem to be anywhere near an end. However, while the devices that designers must target have increased, techniques and technology have improved to make their work flow easier. One of the most important aspect of this has been the use of vectors and glyphs as deliverable assets. Coupled with the death of skeuomorphic design, which now lets designers create a more descriptive visual language rather than a realistic tactile one, icons are lighter, simpler and most importantly, more meaningful. This allows designers to create a simple mark, without the burden of skeuomorphic realism, as vector icons. This is important because vector icons do not have any artifacting at any size. It also cuts down all duplicate assets for each screen density. Whew, that is a relief! And the efficiency does not stop there. These vectors can be incorporated into a font file, aka glyph. This allows developers a little more flexibility when integrating assets into an app. It allows the designer a much simpler workflow. And most importantly, it allow a simpler and cleaner icon system to be delivered to the user, with much better readability across all screen densities.
Icons property of CSuite Technologies Inc. © 2016. CSuite Technologies Inc.
To see more of these vector icons please check out my Glyph icon page.