With the rise of the smartphone app, icons have become increasingly indispensable to the way we navigate the technology around us – an iPhone homescreen without app icons is almost unimaginable.
While icons have played a role in GUI interaction since, well, the earliest GUIs were developed, we tend to think of icons as belonging in a certain place: the desktop. Meanwhile, websites are thought of as more text-based, with icons rarely playing much of a role in navigation. However, icons can be (and are) used to great effect when it comes to web design. Here are just a few interesting web applications of icons.
Text-icon hybrids
Generally speaking, it’s rare to find site designs that rely solely on icons. This is because the power of icons tends to come from their familiarity – something that’s easy to develop when you’re using, say, a smartphone everyday, but not so much when it’s a website you’re visiting just once in a while.
Many of the most successful examples of websites with icons tend to use a hybrid of icons and more conventional navigation elements. Take Twitter, for example.
Twitter is a very text-heavy platform, as I’m sure you all know. However, its navigation bar incorporates both icons and text to make navigation easier and more memorable. We have, for example, icons with text for ‘Home’, ‘Notifications’, and ‘Messages.’ Meanwhile, there are icons with no text for the Twitter logo (also a Home button), the avatar (which enables users to access personal settings for the site), and the Tweet button, which allows users to post.
You can see a similar logic employed on the website for Dogecoin. The icon-text hybrid design saves on screen real estate while keeping things quick, simple, and easy for users to navigate by improving read- and scan-ability.
If you’re looking for a solution to navigation, a text-icon hybrid might just be the answer.
Product icons
This seems like an obvious one, but icons can be used to great, eye-catching effect when it comes to selling products – particularly on your site’s landing page. Take, for example, the site for LUHSE TEA:
Aside from using the text-icon hybrid navigation we already mentioned, the front page prominently features product icons (see bottom of image). Using the same design but with different colours (to match the colour of the tea in question), LUHSE creates a sense of a coherent brand identity while maintaining an image of product diversity and differentiation. In this way, product icons can be used to strong effect when it comes to branding and selling products or services (particularly when you offer a range!)
Lists
Listing pages or products can be a real pain to layout, and can also be pretty boring and uninspiring for your users. To combat this, many sites now use icons in order to separate list items into distinct categories, massively improving navigability while breaking up what might otherwise be a monotonous space.
A good application of icons here is aiding accessibility. Take, for example, bland.is, a Craigslist/Gumtree-type listings site based in Iceland. If, like me, you don’t speak Icelandic, you might have a hard time navigating this site (or any other foreign-language site). However, thanks to the use of icons, it is easy to find what you’re looking for.
These are just some creative ways of using icons to make your site truly stand out. There are many other useful applications of custom icons on websites – can you think of any more?
