One dead in Lindis Pass helicopter crash ... Read more

Pixel-perfect icons right on the button

Last updated 05:00 29/10/2011

Relevant offers

Digital Living

What air passengers tweet about the most - Twitter study Porn investigation scam claims device locked for safety Recovered iPhone divides families searching for answers Secrets of the universe now online FBI won't reveal method for cracking iPhone Real-time videos both amaze and disgust Hackers expose data from a website only for the 'beautiful' Automated systems watch skies as airports can't find enough controllers Email etiquette: How to write the perfect email sign-off Volpara raises $10m and lists on ASX

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.

Ad Feedback

''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


Special offers

Featured Promotions

Sponsored Content