Pixel-perfect icons right on the button

19:38, Oct 28 2011

The web is full of inspired and beautiful icons, all competing for our attention like puppies in a pound.

Some icons are more recognisable than others: the ubiquitous Twitter bird, the ''f'' in Facebook or the arcs of an RSS feed. So what are icons trying to tell us?

Looking at icons is like looking at book covers, says the director of app-development company Outware Mobile, Daniel Gorog.

''People can feel the richness of an app through the icon,'' he says.

''If it's just a boring, white icon with the name of the product, then that's usually an indication of what's in the app. A high-quality icon probably means it's a high-quality app, in the user's mind.''

But when we look for apps, we're like wayward puppies: we don't really know what we want and we need help.


Icons aren't just pretty pictures designed to capture our attention. They have become our standard shorthand for accessing information, from websites to apps. People wouldn't even know what a web-directory tree is any more. And why would we want to know when we can just click a pretty little button to take us where we want to go?

Good design is also about squeezing that brilliant idea into a tiny space. ''The icon is the first thing the user sees, so it has to convey a message - and that's hard to do within a 57-by-57 pixel box,'' Gorog says.

Don't assume you can use a logo as an icon. Logos are often seen in a large size, so it's hard to make them work as an icon, says art director Jesse West, of games developer Firemint.

''They can lose detail, which detracts from the quality,'' he says. ''An icon is smaller than your thumbnail ... Icons can range from 57, 72 to 114 pixels and many other sizes but they are all a similar physical size on the screen.''

The best icons look great, small or large, says the director and lead designer at app development company Bjango, Marc Edwards. ''Icons should be simple and recognisable at small sizes but very detailed at larger sizes,'' he says. ''It's a fine art to get the balance between simplicity and detail.

''On the Mac, the Finder's sidebar is small but ScreenFlow is huge. On the iPhone and iPad, icons may be shown as small as 29 by 29 or as large as 144 by 144 pixels. The App Store requires 512 by 512.''

But icons can be updated. ''It's not like you're printing a million copies of a brochure and pulping it,'' Gorog says.

Branding helps us find icons, even if we have the attention span of a puppy. People can create their own set of icons that reinforce the brand of their website, says social-media consultant Fred Schebesta, the founder of Hive Empire.

''You can give icons away for free in return for a link back to your website,'' he says. ''Or you might offer something [such as] icon design or website design related to that topic of icons. This is a smart way of using icons to market yourself.

''Another approach is to interpret Twitter, Facebook and Google+ in your own branding to give a nice interpretation of their functionality. You can do creative things with the Twitter icon but stay closer to Facebook as users [are so familiar with it].

''Or use a plug-in like ShareThis [which lets people share content and can be used to drive traffic]. There are lots of WordPress plug-ins you can use as well.''

Schebesta says the Google+ button affects search-engine results and brings new people to the site. ''The new Google+ has set a design benchmark,'' he says. ''It's nicely set out and flat.''

So where is the best place on a webpage to put these icons? ''I'd favour big icons close to the top or the side of the page,'' Schebesta says. ''I'm not a fan of small icons, which can look like ornaments. If [social-media icons] are at the top, people can see what other people think before they read the page.''

Woof. Slurp. We've found our water bowl.

Sydney Morning Herald