There are perhaps far more ‘failed’, boring icons in the world today than there are clean, effective ones. Although it’s important for designers to know what to avoid when creating new icons or icon sets, it is also vital to look for inspiration from other design work and know what makes an icon effective. Here we look at a few examples of classic icons updated for today’s technological world.
Native Windows 8 ‘Tiles’
Microsoft had long been criticised for failing to update their product designs for new audiences. Seemingly cautious to make a drastic change to the Windows interface, Microsoft were content to churn out poor icons with each iteration of Windows from XP up to 7. Particularly on Vista, the desktop icons were so badly designed that the icons of other applications stood out in comparison.
All that changed with Windows 8. With a new emphasis on touchscreen interfaces, Microsoft radically altered the layout and design of their app icons. Playing off of the classic ‘Windows’ logo, their icons are now square, flat, multi-coloured ‘tiles’. The use of colour in particular helps strengthen the brand, by building a firm association between the software and the overall product, and by linking Microsoft with a ‘colourful’ identity.
On their own, some of the icons can be criticised. But along with the use of their innovative ‘live tiles’, Microsoft have created a homogeneous and classic standard for all the native apps of Windows 8 (left). We can clearly tell which of these are third-party apps. Many developers are content to just recycle their desktop icons. The design’s strengths also shine through when carried over onto Windows Phone 8 (right).
Some would argue that Microsoft may have shot themselves in the foot by choosing sameness over diversity, effectively rendering all third-party icons as either sore thumbs or indistinguishable from others. With the dawn of Windows 8, designers certainly have some catching-up to do when creating icons for the OS. But taking the native app icons for Win8 as a whole, Microsoft have certainly created a beautiful and effective design that really works.
The Google Chrome icon uses elements of the official Google logo to its advantage. We’ve seen several iterations of a Chrome icon since its launch. The first one utilises a high-res, 3D style and makes use of plenty of soft shadows and light effects. The second is the current icon, and is a much more simplified version of the original icon. It has been made flat (in line with current icon trends, which is a plus) and has a much lighter use of shadow and gradients.
Like the Windows icons, the use of colour plays an important role in brand association. The colours – red, green, yellow and blue – all feature directly in Google’s main logo. By relying on a circular shape like other internet browsers, there are also a few signposts to the application’s function. More than that, the Chrome icon stays more or less the same across all platforms (unlike some others we can think of) without relying on text as an aid.
Without making radical changes to the design, Google have been able to create an effective icon that remains utterly synonymous with its product and brand. By encouraging consistency in design across the app’s many platforms, Google have ensured that multi-device users (which is most end-users these days!) are not alienated.
Trust your instincts
Here we’ve seen two classic sets of icons that have undergone changes to keep up-to-date with end-users. The Windows icons underwent a radical change in style and substance, whereas the Chrome logo really only changed style. Both, however, are effective improvements. These icons have undergone massive redrafting and research processes, but both of them make use of a few basic tools: simplicity, colour, and consistency. When updating icons or designing them for the first time, it’s really important to trust your instincts, whether they’re demanding a big leap of faith in your design or just a few small changes. But it’s also vital to remember what makes an icon great in the first place.
Don’t forget to check out our guide to Windows 8.1 tiles icon sizes when designing for this interface.