Whether flashy or shy or brash or subdued, icons are a part of our daily life. As an artist, I find that well-designed icons are a work of art in and of themselves, and that creating icons can be a real joy.
Emerging standards for common functions has eliminated a lot of the guess work as to which icon should be used where. Also, the emergence of inexpensive icon libraries created by professional icon designers has largely eliminated the practice of creating custom icon sets for every project. However, not even the best icon libraries can anticipate your every need, and unique project requirements may call for the design of icons that are not only in your chosen library, but may not exist anywhere. When this happens, a designer who can create the missing icons will keep your project from misusing icons from your library, which muddies their meanings and locks user uncertainty into your finished project, or falling back on using stand-alone text, which uses more real estate and
Thing to keep in mind when designing icons for your project:
Icons Work at Different Sizes
Icons are not tiny and cuddly. Well, some are, but not all of them. Those beautiful little thumb-tip sized colorful chiclets that adorn your phone screen? Those have actually live in a number of places and need to be different sizes everywhere.
From minuscule favicon sizing, which is used by your web browser, to the massive App Store displays, one size simply does NOT fit all, and often you art will need to be adjusted at various points where the design breaks.
Resizing Icons All Willy-Nilly Will Blur Them
Resizing icons without regard to pixel fractions creates fuzzy edges. This happens when edges lands between pixels. Newer, high resolution displays make these less visible, but don't eliminate it entirely.
In situations where designs may undergo a high amount of scrutiny by clients or stakeholders, its OK to spend time fashioning pixel-perfect versions of icons, especially those carrying brand messages.
Note on Icon Fonts: Icon fonts are great, but also suffer from pixel-fraction blurring, and there is no way to easily fix this in the font itself. Icons that should not degrade should be handled outside of an icon font.
Some Icons Need to Blend In
- Are the same color as the text they are next to.
- This keeps them from grabbing too much attention.
- And links the icon to the text.
- Are medium contrast with their background.
- High contrast would call too much attention.
- Low contrast would cause them to appear 'grayed out'.
Some Icons Need to Shine
Icons Have a Variety of Audiences
"Jargon is only jargon once it escapes." Jargon and acronyms are only inappropriate if your audience struggles to understand them. If everyone already knows what you're talking about, however, go for it. Just make sure that 'everyone' is actually everyone.