Picking Icon Sets that Compliment Your Web Design
Today the icon is ubiquitous. We see them so often in everyday life, that we probably don’t even recognize when we interact with them anymore, and it seems that they have been in existence forever.
They were, in fact, first introduced in 1981 when the Xerox Star 8010 was built as the first office computer of its time and the designers were looking for an intuitive way to ease the learning curve for users new to this technology. And while the lowly little icon has certainly come a long way since then, their usefulness in creating user friendly interfaces really hasn’t changed all that much.
Today icons are essential when designing web based user interfaces, and are typically used in web design in one of three different functions:
Clarifying – Using icons to visually reinforce the verbiage on the page, i.e. showing a picture of shirt when talking about clothing.
Interactive – Using an icon as a GUI interface, like a button or slider, when action is required on the part of the user, i.e. a shopping cart on the Buy Now button.
Decorative or Entertaining – Using an icon to beautify or entertain, i.e. the smiling emoji we all know and love.
The style of the icon can also be broken down into discreet categories, each with their own merit and meaning.
Outline Icons, commonly called Line Icons, are minimalist, clean and modern monochromatic images. The Basic shape clearly depicts the outline of an object or shape in complete form. The Incomplete shape, as the name implies, leaves open gaps in the image outline and creates more of a 60’s Pop Art feel. And finally the Dotted shape strategically replaces segments of the outline with dots and dashes because, well just because. Outline icons are classic in design and usage.
Just as colored TV slowly replaced the beloved black and white sets, so too have Colored Icons taken over from their Outline Icon ancestors. The Basic style has the look of coloring page versions of their ancestors. Still simple, clean lines but with a touch of color. They are perfect to use in classic design when your overall layout has a more vivid appearance.
Expanding on the concept of Colored Icons and adding a bit of flare, the Doodle aka Hand-drawn aka Sketch aka Cartoon Icons are less polished and classy as their more structured counterparts and are perfect in designs that scream homespun, or organic in nature. The Scenic Icon by contrast maintains the single subject shape of a classic Colored Icon in the foreground and adds relevant but muted images to the scene in the background. These are good to use when the surrounding page has little or no information, for example a website under development or a page containing a single yet vital piece of information. The Two Toned Icons replace black and white with another two-color palette and are more subtle variations of the monochrome Outline Icons that add a little splash of color in a subdued manner.
Glyph Icons are typically monochromatic shapes that add more curvature and definition than the Outline Icon is capable of doing. They are best used when representing objects or concepts that are not as easily recognizable in a classic style.
Flat Icons are just colored Glyph Icons that use subtle shadows and highlights to giving them a “flat” appearance on the page. They stand out in web design because of their color, and appear more life-like in their design and use.
And several specialty icons have been introduced in more recent times. The Animated Icon is great for drawing attention to itself, and can be used effectively when used in moderation. Nobody wants to interact with a website that is jiggling and spinning everywhere they look. The CGI Photo Realistic Icon is also an attention-getter, they just may not be the best one to use when action is required as their meaning is not always intuitive. And finally as an homage to the original icon, you have the Pixel Icon that is a great vintage way to show nostalgia.
Regardless of the style of icon you choose, effective icons all have the same set of key features. The meaning of the icon is Clear to the target audience. The icon transfers Meaningful information of value. They are Recognizable in form and meaning. They are Simple and aren’t overload with hidden meaning. They should be Original and Noticeable in the web design. They should Scale legibly and attractively (both up and down in size). They should be visually Attractive, and Non-Offensive. And finally, they should be Consistent with the general stylistic layout of the design.
- Using Colors to drive your sales
- Tip of the week: Photography basics - Aperture
- I need to get out more. Some background information
- Tip of the Week: Using a Pin Hole Camera
- Professional Portfolio: How to Frame Your Photographs
- Helping more than the dogs
- Tip of the week: 8 GIMP newbie tips
- Why I love Norfolk