JTech Communications

Ideal Icons for Your Website Project

by Mira Brody - December 1, 2017
Web DesignBest PracticesContent Marketing
Using icons in your website’s interface is a popular way to make your site feel more friendly and approachable. When done well, icons make an interface easier to understand and reinforce your branding and visual aesthetic. Here are some considerations when employing icons on your website:

1. Recognizable. Because the human brain is hardwired to recognize visuals, the addition of a simple, easily-recognized image can make it faster for your site’s visitors to find a feature they’re looking for. If the icons’ meaning is easily understood, they will add clarity: there are near-universal icon standards for concepts such as shopping cart, search, back, and download. Using an icon that is poorly understood or even ambiguous, however, can add confusion or even frustration if an icon does not mean what someone thought it did.

2. Consistent. Your icons should look as though they were crafted by the same hand — not cobbled together from a half-dozen clipart libraries. Just as using twelve fonts leads to visual chaos, using inconsistent icons looks unprofessional and disorganized. Your icons should be an extension of your branding and website aesthetic.

3. Sharp. Building icons for a modern website means they need to work well on the ultra-high resolution displays of phones and tablets — Apple’s retina devices, for instance. Icons that were only designed to work well on computer screens often end up looking fuzzy on phone screens, so special consideration is needed to use icons that look great wherever they’re being seen.

To deploy consistently great icons, our designers use a combination of professional icon libraries as well as vector authoring tools to create custom icons and extend the visual language being used for our projects. Here are a couple sites we’ve built that utilize an extensive library of both custom and sourced iconography —

Bozeman Yellowstone International Airport
The Bozeman Airport website is host to an extensive menu. To help differentiate each menu item, our designers carefully evaluated options that would not only fit in with the aesthetic of the site, but also guide users to where they want to go in the navigation.

Silver Screen Insider

The Silver Screen Insider website is home to a variety of custom icons. A few of their uses include: differentiating between news categories, movie database filters and member achievements and trophies. SSI is is a film resource for movie theater owners and is constantly growing, requiring our designers to create more icons as needed and adapt them into the existing visual language of the site.

Icon Suite

For most of our projects, JTech creates something called the Icon Suite, which displays the site’s brand in a number of scenarios:
1. A “favicon” shown in browser address bars, history, and reading lists.
2. A “pinned icon” shown when the website is pinned to a mobile device’s home screen.
3. A Windows 10 favorites tile that shows up in the metro style cards.
4. Icons that show on tabs, bookmarks, and much more.

The Icon Suite is custom designed by our team to add an extra layer of polish on our advanced sites.

Conclusion
Professional iconography is an important factor in adding polish and usability to any website. Professionally executed icons can help a visitor navigate and better interpret its features and should be carefully designed or sourced to best fit the particular needs of your website.

Monthly inbox insights.

Our articles are published for free on our blog.
First Name
Last Name
Email Address
Subscribe