As an illustrative designer, designing web and application icons are some of my favorite projects to work on. Interface icon design is taking a concept and simplifying it in a way that is still clear in message to the user, fits seamlessly into its parent interface and is also appealing to the eye—all of which are pivotal components of a solid and visually creative user interface. Simple in no way means easy or plain. It takes a lot of hard work  and pre-planning to make tiny icons clear and concise to ensure positive user experiences. I have experience working on numerous icon projects and have compiled a brief summary of helpful things to keep in mind when designing interface icons for the web among other applications.

What’s the big deal about interface icons anyway?

There are various purposes for designing icons these days. Yes, icons are commonly used for websites and apps but icons are not limited to digital use. They make for solid supporting elements to fortify brand identity (but we'll save this topic for another article). The key icons I’ve come across are the launcher icons, navigation icons and notification icons. These icons will be used in several different devices that use different resolutions, so it’s important to create each icon in multiple sizes to support all devices.

Navigation Icons

Oftentimes, a few explorations during the user-experience design phase are necessary in order to reduce an idea to its essence and communicate it effectively. The overall look of a set of icons will depend on the brand or application they will be designed for. Icon sets must work together and not fight against each other aesthetically. A set of well-designed icons can make or break the usability of a website or app. They have to enable the user to navigate a site or app easily.

As you can see, these navigation icons lead the user through
the different features of the app in a simple yet effective way.

Style Trends (Flat design vs. Skeuomorphism & Trends)

App icons typically are more detailed, but they still shouldn’t be over complicated. They should, however, be easily recognizable to the user. There are many different ways to style an icon—from glossy to 3D to flat. The flat design is a very big trend right now if you haven’t already noticed. Everyone from Google to Apple has used this method to update their look. It’s not exactly new but it used to be referred to as “Swiss Style”. So, really it’s just making a comeback. That isn’t to say that Skeumorphic icons (and those in between) aren’t still great. Many designers get into heated debates about which is better, but I believe that either design style works great in the right context. In many cases, the style you choose will depend on the purpose of the icon(s) but in some cases an icon works great in various styles like the Safari icon below.

Even though the flat design is simplified more than the
others, they are all recognized as the Safari logo.

Design Process (Geometry & Grid importance)

Geometry and grids are also very important in making clean and consistent icon sets. Thankfully Illustrator and Photoshop both have a handy grid feature that can assist when designing beautiful icons. In both programs you can use the grids and different shape tools to create crisp and clean icons.

Here you can see where simple shapes help make vector icons in Illustrator
and how following the pixel grid helps create crisp icons in Photoshop.

Here you can see how Eddie Lobanovsky created a simple “poke” icon by first
sketching, then utilizing a grid and creating the clean icon with simple shapes.

HERE ARE A FEW QUICK TIPS TO KEEP IN MIND WHEN DESIGNING WEB AND APP INTERFACE ICONS:

• Conduct initial background research to better understand the brand you’re designing for.
• Research additional icons for reference before moving forward.
• Stick to the basics and keep ideas simple if the branding is not established.
• Sketch different ideas and concepts to define your initial ideas.
• Record ideas on paper first—it’s quicker than recording in Illustrator or Photoshop.