Icons are symbols, which can be literal or metaphorical. They have the ability to communicate ideas, function and meaning in a common and visual language, helping us navigate through our physical and digital lives.
In this article we'll discuss the thought process behind creating an icon set. A set consisting of 16 icons can take up to 8-10 hours to research and produce. By using some of the tips outlined below, you'll be able to streamline your workflow and cut down on the production time.
The four phases outlined here are Discovery, Planning, Design and Implementation.
Before jumping into the creative work, it really pays off to start off by doing research. Luckily, the web design community has some great resources which can make the designer’s workflow much easier.
To begin, brainstorm by jotting down a list of words related to your subject. Keyword searches, along with tools such as a thesaurus and Google's Keyword Planner will help to broaden your search.
Visit some Web sites related to your topic. The categories in their navigation will be a hint as to what the most popular subjects are. Even old telephone books, such as the Yellow Pages are great reference tools. Scan the ads for phrases related to your subject.
If you plan on selling your icons consider the approach of the 'Long Tail'. The gist of it being that you'll have better success designing hard-to-find items instead of going with popular themes that have already been hashed out millions of times.
After doing some research it's actually helpful to take a break and allow this information to process. Grab a cup of coffee, more ideas will reveal themselves. Once your satisfied with the list, lets move on to the next phase.
Image by Martijn van Exel, Flickr
As we begin to think about the execution of our icons, the context of where they will be used must be considered first. Usage requirements will determine how much flexibility we have in the design phase, determining the constraints we have to work within.
The first question to ask is, will the icon set be used exclusively in print, digitally, or both? It's important to establish this up front, because they're aren't as many constraints when designing for print. Small businesses may need icons for their establishments, and won't rely on the icons for web navigation. Signage, menu design, brochures and other print collateral are some examples.
Stylistically, icons that appear in print may have more of an organic, hand drawn look. Intentionally drawing them to be anti-perfect gives your icons a human touch, providing warmth and making them feel less computer generated. In these cases, you can break the constraints of grid (just a bit) to achieve the look you want.
Consider how ubiquitous you desire your icon set to be. Keep in mind that the more you break standardized norms, the less intuitive they will be. Users have preconceived expectations about the meanings of particular computer system icons. A gear has become synonymous with settings for example. Obviously Apple, Android, Microsoft and other operating systems have a major influence upon UI systems, so going with their conventions is a good place to start. Play around and stretch the boundaries when appropriate.
Trends change over time, and the associations we have with certain forms will evolve. Most software applications use a Floppy Disk for 'Save' to be ubiquitous, even though millennials may not know what a floppy disk is. This kind of disconnect will resolve over time as new associations develop.
Finally, we can start to think about the aesthetic quality and styling of your icon set. We have a list of subjects to draw, and understand the perimeters of the project, so let's get to the fun part.
Referencing your list of subjects, get out some paper and a pencil and start drawing by hand. Start out with basic sketches. At this point you're working quickly, refining the details and working out many options for each icon in the set. Once your satisfied with the sketches, scan them into your computer and use a drawing program such as Adobe Illustrator to create vector shapes. Vectors are resizable and will provide the best performance when you output the icons.
Three things to keep in mind during the design phase: Clarity, Consistency and Form.
Clarity is perhaps the most important element of icon design and UI. Icons should be designed so their meaning is not ambiguous. The purpose of an icon set is to enable people to interact with a system, and when icons achieve this, life is a little easier to navigate through.
If users don't intuitively understand the meaning behind the icons being used, they are forced to learn their meanings. At this point they will often become frustrated or confused, which is not the result we want.
Another consideration is that system icons and other UI elements should not compete for attention with the content, so overly complex, animated or colorful icons may need to be tested.
A great icon set needs clarity, but it also needs consistency, this helps users to develop usage patterns. Consistency gives your icons a uniqueness across the set, and stylistically makes them easy on the eyes. Users appreciate consistency, as it helps provide a stable platform.
As you create the individual icons adhere to a grid. This will enhance the appearance and usability of your icon set, helping to provide desired consistency. Moleskin's squared sketchbooks are perfect for sketching icon sets.
Learn how to design pixel perfect icons and download a grid here.
In addition to clarity and consistency, it's important for your icon set to have style and personality.
Form is defined as the shape or visual quality of the icons, how they look. It's the aesthetic that gives your designs an appealing quality and uniqueness all their own.
Shape, color, line weight, texture, perspective and symmetry are some of the important elements that make up the overall form of an icon. Keep these elements consistent as you design across the set. Flat perspective is recommended, although 2D and 3D isometric perspectives can add dimension.
Draw a couple of icons and see how well they fit together side by side. When you've got a theme going, continue to draw out the entire set.
As you design, remember to keep it simple. Not too many elements, eliminate the unnecessary. You're going for a highly visual aesthetic, recognizable and simple.
Great, your vectors are drawn, let's put them into production. Here's some tips for saving them out to different file formats, depending upon their usage.
If your icons are going to be used in print, save the icons as .EPS files, preferably in Adobe Illustrator 10 version. AI10 allows for metadata, and it's established enough that most graphic programs can open the format.
If your icons are going to be used in software, you've got some considerations to make. Hardware manufacturers are producing newer generations of higher pixel density screens. The challenge for designers is that Retina Displays, mobile devices and other desktop monitors render software interfaces differently.
Additionally, not all users have perfect eyesight. For better accessibility, assume the graphical user interface your designing for may be magnified.
Taking these considerations in mind, let's discuss three formats that you can save your icons to: .SVG, .PNG and fonts.
SVGs are growing in popularity because they scale, and are thus responsive in various view ports. Mobile devices exceed PCs in Internet usage, which means that icons are being rendered in responsive interfaces. SVGs render high quality vector shapes without the hefty download and are compatible with most legacy browsers.
If you're comfortable coding in XML, this may be the way to go. Any vector file can be converted into an SVG.
PROS of using SVGs:
CONS of using SVGs:
PNGs are raster based and very popular. PNGs are super easy to implement, so your workflow might be a little faster.
PROS of using PNGs:
CONS of using PNGs:
Fonts are harder to work with than SVGs and PNGs. Some people prefer them, although they tend to not give you as much control over the final output.
PROS of creating icon fonts:
CONS of creating icon fonts:
As technology continues to develop over time, standardization may become the norm. For now, there are trade offs and sacrifices depending upon the format chosen. No format is perfect, nor is one format the best in every scenario. Like any technical decision, the solution should be determined by how well it matches up with the project requirements.
Shop from thousands of high quality vector icons, giving you a consistent look for your project. No subscriptions. Great prices. And free icon sets too.
Comments will be approved before showing up.