Topper_Blog

Website Icons Are Important To Design: Here’s Why

April 17, 2020

Subscribe to Flight Media Blog Notifications

Website Icons Are Important To Design: Here’s Why

What are website icons?

Website icons are visual cues that help communicate concepts on your website pages. they can act as a visual language to prevent the user from interpreting a concept incorrectly and to ensure effective communication.

Part of great website design are the icons you use on your website. The colors, the elements, the copy, the navigation and other aspects are all important, as they give the user an experience with your brand. 

But icons are an especially important visual element that complement the copy and overall look of the page.

Here’s an example of a few icons that appear on our own website:

Website icons on a web page

Note, for example, how the box for “email marketing” has an envelope icon. That website icon supports the content and further communicates critical information about that feature.

The most important function icons play is to give users instruction or direction for what they should do next. As a visual cue that accompanies content, users will quickly know what to do and where to go.

 

 

As a result, when your website enhances that user experience, individuals will stay on your site longer, and you’ll see an increase in conversion rates and various metrics that help your site rank well.

So let’s dive into some technical information about website icons and then we’ll show you specific examples of how we used icons in the design of one of our client’s websites.

New call-to-action

A History Of Website Icons

Icons in web design have undertaken an interesting evolution since the early days of the Internet. 

 

 

Let’s take a walk through visual cues over the history of websites:

  • From the text-heavy websites of the 1990s with animated GIFs and page hit counters (why?).
  • Through the Flash-obsession period (now a huuuuge SEO no-no). 
  • To Web 2.0.
  • To Skeuomorphic design.
  • To flat, modern responsive design.

Through all of these phases, website icons have proven through every era to be an essential design tool for communicating content messaging to the user. 

Side Note:

You can learn more about web design trends here.

What do website icons do for design?

Website icons perform three main functions in design:

  1. They support the user interface, making it more visually appealing.
  2. They frame important information.
  3. They break up content blocks, making copy more readable.

This Is How Website Icons Work

Icons in web design accomplish three core functions. 

We’ll look at our recent website redesign of Kelly’s Choice for some context.

1. Website icons support the user interface, making it more visually appealing.

On the homepage of the Kelly’s Choice website below, we used website iconography to reinforce the message being communicated in the banner section of the page.

These icons support the concepts that the nutritional programs are physician approved, offer step-by-step instructions, the patient can know they’re doing the right things, and finally, get guaranteed results.

website homepage

2. The icons frame important information.

In the screenshot below, you’ll see that Icons help reinforce key statistics about the Kelly’s Choice program.

3. Iconography breaks up content blocks, making copy more readable.

In the example below, we wanted to convey a step-by-step plan that users can follow to work with Kelly’s Choice, and ultimately, get the payoff they’re searching for, which was to “get results.” 

By using a multi-column layout with numbered icons – instead of a just plain ordered list with only text – we’ve provided an easier way for the user to identify the program steps and convert through on the call-to-action (Choose Your Program).

stats and an apple

A Helpful Strategy For Using Icons

When choosing icons, the primary thing to remember is that the symbol you choose should help to communicate the message in the copy. It should also match the overall branding. 

vegetables on a tray

Finally, avoid cluttering the page with too many icons, which will negatively affect the overall design.

As a general rule, keep this in mind: Use icons where they make sense!

Blog Comments