The Importance of Unique Icons in Web Design
This page may contain links from our sponsors. Here’s how we make money.
Crafting your layout around iconic symbolism offers a method of communication beyond just text. Symbols quickly explain the function of a button or link. Symbols become recognizable logos for companies. And symbols let us know when we've meandered our way into the wrong bathroom. Well, symbols and the lamenting screams of horrified women(or men?).
Keep in mind that a website using too many icons will get confusing real fast. You generally need some context to help readers understand what they're looking at. Finding a balance between visual and contextual information is the name of the game. And that game's called Connect Four. But instead of connecting colorful plastic it's like connecting design elements. And you're not really playing as much as frantically overthinking to find a good solution.
While there isn't any magic formula to use on every webpage I'd like to offer advice for designers who want to better understand icon placement. Specifically how to fit and craft icons which blend into a page while offering a dash of convenience to the user experience.
When using any icons in your website the goal should be to illustrate your own unique idea. This idea(or ideas) should be clear, effective, and immediately recognizable. It's best if you plan out some content into paragraphs or list items first. Then you'll have a better idea of which icons might fit better with the content.
Github has a small education landing page which outlines their course for new programmers and developers. The use of icons provide a quick glanceable understanding of the material. Also notice how the various headlines accentuate each of the icons. This combination is perfect when you have a list of ideas that need to be conveyed in a short amount of space.
Here's another brief example on the landing page of a UX design course. The header is much more detailed than other examples in this post, but it still provides the same effectiveness of illustrating unique ideas.
Visitors will recognize each guided step as the representative icon(brainstorming, planning, drafting, etc). When designing similar graphics think more about what each icon should represent rather than mimicking a word or phrase.
Although I don't see this technique all too often, icon design can be used to improve navigation menus. A list of similar-looking menu links can use icons for differentiation between content. Sort of like casting agents for a mundane navigation. And these agents will actually do some work for you!
Take the example screenshot below from a venue page design created by Megan Fox. It has a vertical and horizontal page rhythm which is fairly common in detailed page layouts. The navigation is certainly enhanced by the use of icons which give a brief explanation for each of the links.
Visitors could merely glance over the nav menu and still catch exactly what they're looking for. This is the beauty of shapes and contrary to what my geometry teacher said, you won't need to know any of the math behind them. People gravitate towards shapes because we see them in the world all around us.
Try being creative with your icon ideas and see what you come up with. The best designers are willing to push boundaries and it's beyond these boundaries where you'll find the coolest and most unique ideas. Just be sure the boundaries you're pushing are related to the project – there's a fine line between creative expression and a visit from the local police department.
If icons aren't providing an enhancement to the UI they could be more informational. Using icons to provide information about a product or service is still helpful to the user experience. But keep in mind these should enhance existing information – various icons scattered onto a page without context seem more like undecipherable Egyptian hieroglyphics.
Pagoda Box uses a series of icons on their homepage right in the top header. Each icon seems very business-like; serious but effective. The icons are actually a small navigation of features they offer in cloud hosting packages. Clicking an icon will bring you to a new page explaining more about the service. Very effective method to get potential customers interested in whatever you're selling.
Form a Distinct Style
There is no harm in using a pre-designed set of free icons. In fact this will often save time on a project to focus more on other areas. But there's something to be said about creating your own unique icons in a distinct style for each individual project.
Take the Walk has a dark homepage with vibrant red overtones. Each of the icons match in a grungy chalk/handdrawn style. This style is also prominent in the website's logo which ties into a deeper branding effect. The goal is to create matching page elements that really blend together and feel like one cohesive unit.
The icons found on Ludlow Kingsley have a similar feeling. These can be found on the homepage located under “what we do”. Being a creative agency they want to prove a set of skills and offer some insight to visitors. Their unique style is more abstract yet easily fits into place on the website.
These icons link to another internal page explaining the studio's creative process. Each icon animates individually with a sense of aesthetic pleasure more than functional UI. But the accompanying header and brief details explain things much clearer.
DryIcons has thousands of free high-quality icons available for commercial use (with attribution) in SVG and PNG format. The site is clean and easy to use and easy to find what you're looking for quickly. A good option if you're looking for inspiration, or haven't quite mastered your own original icon designs yet.
Remember that icon design is all about practice. Take a look at live examples and save your favorites in a folder on your computer. Even try re-creating a few of them using Illustrator or Photoshop to learn how the process works. But before creating a brand new icon you should think about what purpose it serves. The best websites use icon design to enhance functionality while also providing aesthetic pleasure.