Icons can drive your user experience forward and communicate complex ideas quickly and effectively, or it can leave your users scratching their heads puzzling over meaningless squiggly lines.
Here are four websites that nail iconography and inspire you to nail your own.
1. Orangina
Orangina has some of the best iconography that we’ve found. Ever. It’s fun and playful, perfectly representing their brand, but without losing any focus on functionality.
What we especially like is how all of their icons move just a little bit. It makes them far more interactive, which is both engaging but also a great way to provide essential user feedback.
In particular, we love their carousel icons. Instead of two or three simple dots to let users know that they’re hovering over a carousel, Orangina uses an icon of their distinctive bottles.
But that’s not all. To indicate when the carousel is going to change, the bottles fill up. When one is full, the image changes.
That one little icon instantly make the carousel far more functional and much more fun to use, without sacrificing the power of the full image power at all.
2. Avenir Clinic
Not all iconography is for typical creative agency services.
Avenir Clinic is a dental clinic in Laval, Quebec. This is hardly the ultimate source of incredible web design that you’d expect, but in fact they’ve done a fantastic job.
Designed with Phoenix, The Creative Studio they’ve created a set of intuitive animated icons for each and every dental service they provide. This includes root canal therapy, gum treatment, restorations, and treatments related to TMJ dysfunctions. TMJ dysfunctions! An icon. For TMJ dysfunctions.
They’re creative, they’re intuitive, and they’re even just a little it fun. We strongly recommend you check them out.
3. Don Q Rum
Don Q Rum tells the story of their sustainability efforts with a heavy reliance on iconography. Their challenge is that the process of how you make rum and where they’ve implemented sustainability measures is complicated. So to do it, they’ve used icons to really drive the point home.
What we really like about Don Q Rum is that they use icons to support their copy rather than replace or simply reiterate whatever they’re written. While icons are often asked to communicate on their own, it’s nice to see them being deployed effectively in a slightly different way.
For example, one step of the steps of turning waste water into something useful is microfiltration. Here’s the copy and icon they use to describe it:
From the copy alone most people will understand what’s going on. But the icon provides a small visual reference point for readers to really grasp what the microfiltration process looks like. They work nicely together so it’s easy and clear to understand the process.
4. Nine Hours Hotel
Good iconography doesn’t have to be on a screen. The Nine Hours Hotel is a capsule hotel in Kyoto, Japan, and is bringing a much-needed simplistic design to the Japanese concept.
The hotel uses iconography for everything, to reduce any potential language barriers between the service and its guests. They use icons to tell guests where to check in, where to take their shoes off, where to find showers, and even what elevator to use.
In conjunction with a brutally simple black and white colour scheme, the icons help guests move and operate within the hotel entirely independently for their entire 9 hour stay.
You can check out a report on the hotel below:
Wrap up
Iconography is an essential part of a web designers skillset. Whether you’re creating them from scratch or using an icon set, how you choose to deploy them can make or break your site.
Hopefully, these clever, tasteful examples of both icon design and deployment will give you some ideas on how you can use a picture to tell a thousand words.
