fbpx
Supercharge your SEO! subscribe to our newsletter For the latest SEO tactics & best practices

How to Effectively use Icons in Your Interface Design

By
Updated March 31, 2017
No Comments
5

How to Effectively use Icons in Your Interface Design


Seth Epstein

Seth is a marketing and analytics wiz who has worked on clients like Suburu and U.S. Bank – but loves helping small businesses and construction companies get more website traffic and leads with Search Engine Optimization skills.

For this example, we’re going to turn our section highlighting the 3 main services into a carousel. Then we’ll utilize icons in place of images that we had previously chosen for our 3 information tiles.

Install Font Awesome:

Go to fontawesome.io and download the Font Awesome Font.

For our example on Mac, double click the downloaded file and click install.

Create a text box and then under Window > Type >  Glyphs, and then change your font to Font Awesome Regular.

A bonus of using this font is that it’s easy for a developer to use.

Create Carousel Navigation:

Create an arrow button by selecting one of the directional glyphs. In our example I’ve moved the tiles closer together to make room for the directional buttons on each side. To better indicate that these are pressable buttons, add a circle around the arrow. For a nice balance

It should be obvious that it’s a button, obvious what the action is when the button is pressed, and large enough for a user to easily press. For mobile, that means at least 45×45 pixels which is the minimum as a guideline for size that is pressable on mobile.

My personal taste is to make the line thickness of the circle and the arrow shape the same width for visual consistency.

Enhance Your Call To Action:

Another common use is an icon to add to your calls to action, like the mail icon to add to your contact button. In our example, increase the size of the contact button and add the icon in. Adjust the font size until it has good balance with the font size.

Save Time with Purchased Icon Packs:

A time saving hack, especially if you aren’t inclined to design your own icons is to download an icon pack. This will likely cost money for a good set, but it’s worth it if it saves you time that you can use for other valuable work.

In the video example, I have a pack that I previously purchased and downloaded. Choose icons that are most relevant for the service or other information being presented. The nice thing with these icons is that you can easily edit the appearance to match your branding.

A couple sites I like for icons:
Creative Market
Envato

Takeaways:

  • Icons can help to create or enhance visual cues for the user.
  • Depending on the style of the site, icons can be used as design elements in place of images.
  •  
  •  
  •  
  •  

Related Posts


Seth Epstein

Seth is a marketing and analytics wiz who has worked on clients like Suburu and U.S. Bank – but loves helping small businesses and construction companies get more website traffic and leads with Search Engine Optimization skills.

Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of
avatar

Ready to Get Started?

Get a free consultation now