Designing icons for elearning
In our elearning, user guides, infographics and other projects, we make a lot of use of icons. Icons are useful, simplified images to use for buttons, topic headers, and other places that need a quick, punchy graphic that can be easily and quickly read. Here are some guidelines on how to create effective icons.
1. Look and feel of content design
First, consider the existing look and feel of your elearning design. When designing your icons, will they be consistent and harmonious with the graphics you are already using? Will they fit in with the user interface style? Naturally, you also need to ensure that these elements are also consistent throughout the icon set you are using. If you are drawing a series of icons to indicate a number of related items, consider how they will relate to each other, while still being distinct and readable.
2. Analysis
This is where you analyse the keywords that each icon needs to represent, and then try to create the right visual representation or metaphor for those words. You’ll have to distill down the simplest images and symbols associated with the concepts you need to communicate.
Consider also whether you’re designing for a company intranet, or an international, publicly available site. If it’s the latter, will there be cultural differences in the symbols you choose to represent an idea? Pick something to base your icon on that is universally recognized. Also, try to avoid obsolete imagery. The ‘Save’ icon that is represented by a 3.5” floppy disk is still being used long after the real-world object has been phased out.
3. Design icons at the size they will be used
If you choose to create your icons as vectors and make them in Illustrator, there is an temptation to scale the design, and try to use it at any size. This doesn't work with icons. What looks good at 512px looks like a blurry smear at 16px. Icons should have a base design that is used as a starting point, but each output size needs to have its own optimized design. This will also affect the level of detail you will be able to put in your icon.
Icon design is not a one design equals scalable solution though. This is one reason that Photoshop is just as good a solution as other programs. For designers that make icons in Illustrator, they are still going to clean them up in Photoshop, or jump through some hoops to get their icons to look good at small sizes when being output directly from Illustrator. So, don't buy into the myth that icon design is a purely vector-based medium. We are outputting pixels here, after all.
There are also vector tools in Photoshop and masks that you can take advantage of that equal the scalable playing field between the programs.
4. Keep it simple
As mentioned above, the size the icon will be used at will have some effect on the amount of detail you can put in your design, but in any case, less is more. The purpose of an icon is to be iconic, so adding too much detail or complicated designs will only make your icons harder to read. Even when creating icons in an illustrative style, the symbol should still be easily recognized and understood. The more iconic your images are, the less time and brainpower your learners will need to spend on understanding what the icon is communicating.
