What is The Noun Project?
Web design trends are a funny thing. Just when you think you’ve nailed the perfect design, some bright spark comes up with a new idea or a new technology and suddenly your world is flipped on its head. Today’s most wonderfully hip, pixel perfect design will be out on the trash heap before you know it. We’ve all stumbled across an old website, from barely three or four years past… gasping in horror at the screen, “what were we thinking?”
One can only guess at what tomorrow’s trends will be. What will we be doing as soon as we’ve finished upgrading all our websites to be responsive, flattened all our designs and finished info-graphing ourselves silly? On the other hand, are we working towards ensuring more standards are applied across our designs? With so many devices and appliances out there with screens these days, and a whole generation now grown up with the internet – is our understanding of interface design reaching new heights?
There are plenty of designers out there who can follow trends. And there are also those among us who like to set them. I attended Web Directions South last week and was delighted to listen to a number of fantastic speakers. One of my favourites was Scott Thomas, famous on a number of fronts including being the creative director for the Obama Presidential Campaign in 2008. But most importantly (I think) Scott is one of the founders of The Noun Project.
If you’re not a designer, then chances are you haven’t been let in on this little secret
You may not have heard of the noun project, though you see the results of it everywhere you look. Apparently, what our designer friends haven’t been telling us, is that for a number of years now, their iconography has been handed to them on a silver platter! Well, not quite, but things have been looking up since the launch of this graphic arts library back in 2010. Long gone are the days of having to create your own icons, but also gone are the frustrations associated with Google image search – all those wonderful results popping up in the search yet it’s impossible to find a high-res or vector equivalent, let alone one that is royalty free.
The Noun Project is more than just another stock library or depository for icons. Scott and his colleagues have a keen understanding of symbolism and the aim of the project is not just to build up a remarkable collection of icons – 25,000 at last count – but also to foster the creation and growth of what they call the world’s ‘visual language’. It’s about simplifying communication using common iconography – symbols that have meaning and understanding across borders and multi-culturally. Symbols that speak for themselves.
Naturally this has fallen right into the hands of web designers, who are lapping it up in their eternal quest for more intuitive and efficient design. They’re extremely handy for infographics as well (as they are all the rage currently). I noticed a new trend for the first time the other day, when I saw that our designers were starting to come up with navigation menus that were reduced purely to a collection of symbols. No text or labelling was required, and it still made total sense. You can see an example below, which is the navigation from the Google Ventures website (not a Wiliam site).
The top screen grab shows navigation with text, and the bottom shows the same navigation with a collapsed view / symbols only.
There are some occasions where this makes perfect sense. I recently project managed the streamlining and responsive overhaul of a major client’s order processing interface. This internal facing application isn’t visible to the general public, and is used solely by staff. On this occasion, where users are effectively parrots repeating the same tasks day in / day out, using symbols to reduce the size of the navigation made total sense. This handed more screen space over to viewing the order and payment reports.
We’ve had some reluctance from clients to do away completely with menu titles, which is understandable. A number of times it has been requested that they be put back in, to aid unfamiliar users. We have also tested and proven – on our own Wiliam website – that it’s not always the best option to have symbols sans labels.
There are also accessibility considerations; we need to ensure navigation is clearly labelled even if it’s not visibly so. Text-to-speech readers for the visually impaired need to understand what each symbol stands for. Presumably this can be handled through alt tags, ID attributes and so forth, so it’s not a biggy.
It’s easy to see where things are headed. The use of symbols enables further de-cluttering of the page, and in these flat design days where minimalism is God, less is always more, and content is king, we will see a much greater use of common symbols in all our interfaces. And not just websites. Think about the touch-screen interface in your new car, or the buttons on your new remote control, or used for public services or signage.
The Noun Project is really a manifestation of current design trends. The more we use symbols, the more we also realise that our ‘visual language’ is still in its infancy. A part of what The Noun Project hopes to achieve is the standardisation of symbols – so that when you have a need to visually represent a word, then there is a symbol that matches. The famous ‘hamburger’ menu icon (noted above) is again a good example. There have been numerous calls for a standard ‘show navigation’ icon, including from our own famous Mr Jephcott and it seems that people are largely starting to get their heads around the idea of this – and other – universal symbols.
A common cause of grief for designers is when they need to come up with such a symbol when one isn’t available, The project helps with this, as it allows designers to collaborate and upload their own creations, and make them available through creative commons license. When all of a sudden you need an icon that represents ‘global warming’… you know where to find it. And if there isn’t an appropriate symbol, you can create it and share it with the world!
The Noun Project have even gone as far as to organise what they call ‘Iconathons’ which are basically design workshops organised in partnership with organisations and sponsors, to create new libraries of symbols for a specific purpose. It literally involves groups of people sitting around in circles, thinking up how they would visualise a word or concept – such as ‘compost’, or ‘school’ or ‘sustainable energy’ – and then putting pen to paper. A task that is often harder than it looks! It’s interesting to see some of the past Iconathons that have been conducted for government departments, the Red Cross, the Food Bank and dozens more.
Next time you need an icon, head on over to The Noun Project and get yourself familiar with the (human) race’s visual language!
