The main purpose of design is to communicate. The most successful designs often combine several different types of communication methods to create a cohesive message. Icons are one such type of communication that can enhance user experience by creating visual interest that adds meaning.
Icons aren’t meant to simply be ornamental; their goal is to help readers absorb information more efficiently. They add to content by enforcing meaning, and can act as spatial breaks. Icon design is as much a strategic and creative process as any other kind of design.Here are four tips to get you started using icons the right way.
1) Select a Style
Before starting the design of your icons, take note of the overall graphical system of your website. The styleof your icons will need to flow with your visual identity in order to complement your content. Icons themselves should also share the same style. Some aspects to match are:
- Perspective
A straight-on view is often the most effective approach in icon design, but if you choose to get creative with the angle, make sure they’re all facing the same way.
- Color
You can use more than one color (after all, you are trying to catch viewers’ attention), but stick to one palette throughout your icon group.
- Design effects
If you choose to add any extra effects like reflections, shadows or outlines, each icon needs to have the same effects, and to the same extent.
Thiswebsite has a simple design, so it’s only natural that the icons do also. While they’re made up of outlines, they are still very noticeable and have a personalized style that reflects the brand.
Thissite features icons with a very unique style: they’re quite detailed and much larger than most, but they work together to augment each content section.
2)Consider Your Audience
It’s important to think about who will be seeing your icons, so you can be sure that everyone will understand them. For example, mailboxes look very different in different cultures, so if you’re aiming to reach an international audience with an email icon, you should stay away from illustrating a traditional American mailbox.
Apple uses the universal image of a stamp to represent its mail app.
3)Simplify
In order to immediately convey meaning, icons should not have overly complex designs. A complicated image is counterproductive to an icon’s goal, so simplicity is more effective. This includes taking out any unnecessary components that you might be tempted to add.
The icons used in this cloud computing guide are very minimalistic, which makes them effective both in symbolizing each category, as well as creating a unified aesthetic with the whole site.
4)Plan Placement
Icons are most useful when placed strategically. To enrich your content, some good places to use them are:
-With headers to add a creative touch
-On pages with a lot of content to emphasize natural breaks
-With feature/action lists
-As buttons
The group of icons used on this CDN site immediately grabs the viewer’s attention and enforces the step-by-step process demonstrated here.
The trick to using icons is being very deliberate, consistent, and intentional with your design, as you want your website to have a strong communication system that viewers easily understand.
Author Bio
Luke Clum is a graphic designer and web developer from the great Northwest. He loves diving into UI design and is an avid hiker and climber. Follow him on Twitter @lukeclum
