August 13, 2015 // By Magenic
To read Part 1 of this blog post, click here.
Icons have become a mainstay for interacting with the world around us, and have become especially prevalent in business technology. We see these pictorial representations on computers, phones, signage, and a variety of other items every single day. Icons are meant to fit seamlessly into the environment around you, providing easy access to the things and information you need the most. As usability becomes a key differentiator when building applications for the enterprise, the proper design and implementation of icons is key. Here are five importance considerations when designing icons.
#1: Final Format
When you sit down to create (or choose) icons, you should always consider the final outcome first. Will it be used in an app? In a (responsive) website? Will it be printed? Perhaps it will be used in more than one of these situations? The place(s) an icon will be seen are important to take into account since it will save you the time and hassle of reformatting or reworking your icons later.
Once you have your final format in mind, you can start making considerations on what kind of process you will use to create and save your icons. Some of the common formats you can look into include images (such as JPEGs or PNGs), vector based formats (like glyph fonts and SVGs), and ICO files. Each of these has its uses and its drawbacks, so I would recommend doing some research into what would work best for your needs. If you are designing for a mobile ecosystem, try looking at the styling guidelines for the OS. Android, Apple, and Microsoft all have some excellent tips and resources.
#2: Scale
Scale is important for a lot of reasons, but mainly it’s important to determine the level of detail that you’ll be able to include. You should always design for the smallest possible size that the icon will viewed at. The smaller the intended size, the less detail you will be able to show clearly. If you try and put a bunch of detail into a very small icon, you may make it harder to recognize.
If your icon is supposed to be small, try keeping it pretty simple. (Also, it’s good to note that line weights may need to be bumped up at smaller sizes so detail doesn’t get lost in the ‘hollow’ portions.)
If you are designing for a responsive or mobile device, you should also remember that people will need to be able to touch your icon with their fingers. Most sources recommend a minimum area of 44pts x 44pts, but the larger the icon is the less trouble the users will have in selecting what they intend to touch.
#3: Recognition
You’ll probably notice that even though the styling may differ, a lot of the icons used have a common root (for instance, the use of a floppy disc for save). These familiar shapes allow users to easily recognize and interact with icons. Since users have become accustom to seeing certain icons, deviating from those commonly-accepted shapes can be incredibly frustrating to users. This isn’t a hard and fast rule, but you should make sure that the pay-off for using a non-standard icon significantly outweighs the risk you take deviating from the norm.
The image of the lock on the left is one of the most popular choices for ‘lock’ or ‘security’ icons. Keys also pertain to locks, but it’s more difficult to differentiate this icon from its other uses (key icons are sometimes used for passcodes or the security measures needed to lock or unlock something).
#4: Consistency
So now that you have your format, scale, and icon ideas chosen, you need to make sure that they look consistent as a set. Even the most well thought out icons suffer when one or two variants stick out from the rest. Line weight, fill, color, and graphical style all play a big role in a set looking cohesive.
Take this set of icons below- you’ll notice a few icons that stick out from the set as a whole.
The coffee cup doesn’t follow the same dark on light convention, the strawberry has dimension and gradient which isn’t present elsewhere, the donuts lines are thicker than any others are, and the apple is a hollowed icon.
You’ll notice the set here looks significantly more consistent. All icons are dark on light, the majority of the icon is ”filled” (filled icons may have some hollow elements, but the majority of the icon itself is filled), and the line thicknesses are consistent across the board.
Make sure your icons play nicely with one another for a consistent, cohesive look.
#5: Styling
The overall style you choose for your set should be based on the system in which it’s being used. Even the most elegant of icon sets will look out of place if it doesn’t match the setting. For instance, the heavily treated icons look out of place in the super modern look of the background on the left, and look much more at home on the right. This is a very extreme example, but icons designed with the style of the system as a whole will be more successful.
These five considerations are just a small part of designing a successful icon. If you are developing an application, website, or signage that use icons, I would suggest looking a good hard look at them. Do they really mean what you want them to mean? Do they fit in with the rest of the system? Are they the right size and consistent throughout? Make sure your icons add to your user’s experience.
If you’d like to contact Magenic directly, email us or call us at 877-277-1044.