Are you having trouble choosing the right icon for a specific problem? Working with your developer to get the best possible result for your client? This article will give you an insight into principles, problem solving and collaboration required to come up with something that fits!
Icons are among the most important visual aspects of web design. The level of detail, style
and application depend on a number of different things.
I have recently been working on a number of websites that require very specific icons to
communicate subtle metaphors.
This post will go through a recent example, where I was required to create a warning icon for
a document error state. It will be a linear guide of my thought process and collaboration with
the developer, but also touch on the following guiding stages:
This post isn’t supposed to be comprehensive, but will benefit you by walking through a real
Sometimes you’ll be building your website from scratch and need to generate a number of
icons to communicate certain things visually. Often you’ll have a request come in from a
developer or client for a unique icon.
The request in this example came from a developer. He needed an error state icon for a
At first he suggested a dark page icon with an X behind it to be used in cases
where a document type is not supported, or a document fails to load for some reason.
He had something like this in mind:
Not bad right? I stripped it back a bit and sent this to him…
But, we agreed it needed to reference the document icon somehow since it was specifically for a document load error.
We needed to consider the icon set as a whole, so we kicked a few other ideas around.
“What about the ‘alerts’ icon?”
we thought. But that was already in use for clinical alerts.
When dealing with a complete icon set it is important to have an understanding of the set of
icons. Otherwise you might accidentally reuse a metaphor which has already been used somewhere else.
Then we considered the document icon with a triangle around it:
This was just a suggestion from the dev, but experience told me that it was too complex. It made for an
awkward metaphor that’s wasn’t communicating directly enough.
I next made the suggestion that we should use a big ‘X’ within a circle.
This wasn’t optimal either, as the message communicated was one of danger! It was probably way too
over the top.
The lesson here is to consider the context of your icon. Colour and visual weight is an important way to
communicate this. For example, red is traditionally used to warn people, whereas lighter
colors like gray are more neutral and sub-communicate that everything is ok!
Sub-communication is a semiotic language; something which is also eminent in typography.
For example, a decorative font sub-communicates a feminine character, whereas a hand drawn
font may sub-communicate something more playful and child-like.
What are you trying to sub-communicate with your icon?
For example, with the document error icon I tried to recall error messages which subcommunicated in a way that didn’t create too much panic.
I remembered the error messages I’d get when my internet connection went down; they were perfect. Not too over the top, but subtly letting the user know something is wrong.
Definitely the right direction.
This last example from the Chrome browser was perfect for what I needed! Subtle, but letting the user know that something is wrong.
Everything from the size of the icon to the grey colour used helps the user understand the severity
of the problem, but is not so over the top as to cause panic.
The final icon created in this instance was simple, but also communicated the right message.
The art of using icons is something that needs a bit of experience and an eye for design, but it
can be addressed by following certain principles such as those we’ve discussed. If your icon is too ambiguous, but the metaphor fits then consider using a label as a visual cue
to help users identify the information. Thanks for reading, feel free to share your own icon design experiences in the comments!