The Tribune

TRANSLATING the ‘iconic’ features of an object into something that is metaphorically meaningful, and instantly recognisable, is no easy task, especially when the design needs to be as effective at 48 x 48 pixels as it is at 256 x 256.

A memorable and functional icon is beautiful and meaningful. Here are 10 tips for how to create outstanding icons.

Capture the Characteristics of the Object

One of the most important aspects of icon design is to create something that is instantly recognisable, regardless of whether it is meant to represent a blue frog or a tin of pencils. What it is trying to portray must be identifiable at a glance or the purpose of the icon is defeated. An icon must, of course, be ‘iconic’ of the metaphor it represents.

Drawing an icon means to draw the most typical characteristics of an object so that it can capture the icon’s action or represent the concept and nuance.

Simple and Versatile to Fit Into a Range of Projects

A key value in this design process is to keep the icons fairly simple and basic style-wise, as opposed to aiming for a definitive style.

This helps make the icons much more versatile and usable in a range of projects. If your icon has a broader range of settings, its potential market becomes bigger.

Consistent Light Source

One particularly useful tip when designing multiple icons is to provide consistency not only in style but the details, such as light source. While usually a secondary thought, any mismatch of one icon in a pack could seriously affect the overall quality.

Create Icons in Vector Format

Icons often need to be used in a range of sizes. It is therefore a good idea to make the most of the scalable nature of vector graphics and create a great-looking design that can be used for multiple purposes.

With vector software packages such as Adobe Illustrator, every shape, gradient and stroke that makes up the icon can be tweaked and changed at any point, unlike a pixel-based design that needs redrawing when changes are made.

DON’T Create Icons in Vector Format

Vector graphics are not always the best approach for icon designers. With many icons requiring very small scales, vector graphics do not often manage to reproduce a crisp rendering when rasterised.

In these cases completely redrawing the icon at a number of specified sizes gives the best result.

When you take a vector image, originally sized at 24 x 24, and scale it down to 16 x 16, the relative proportions do not match. There is no way you can evenly distribute 24 pixels of information into 16 pixels of space (remember, there is no such thing as half a pixel). So the image blurs.

There is also no way you can evenly scale 24 pixels of information upwards into 32 pixels of space. Again, the image blurs.

Furthermore, if you take that same vector image, originally sized at 24 x 24 and scale it up to 48 x 48, you are now doubling the proportions. You no longer have crisp one-pixel lines. You have chunky two-pixel lines. Scale it up larger (say to 96 x 96) and those lines become even thicker.

Beware of Cultural Differences

Similar to point number one, where I noted that it is crucial to capture the ‘iconic’ characteristics of an object, it is also important to remember that cultural traditions, surroundings and gestures can differ radically from country to country.

The important aspect here is national characteristics, as it is essential to recognise the conditions in which your icon is going to be used.

Use universal imagery that people will easily recognise. Avoid focusing on a secondary aspect of an element. Pay particular attention to this rule when designing icons based on warning and traffic signs, as they differ on a country-by-country basis.

Ordinary Colour Combinations

If an icon is created as a bland graphic presented in a circular shape, it is likely to be overlooked. Using strong colours and an interesting shape that reinforces the object will help the icon to stand out.

Remember that icons are rarely going to be displayed on a mono-coloured background. In most cases there will be a lot going on behind them, so they will need to stand out. Consider also using gloss and shading to create a more dynamic final effect.

Design Icons to Work as Large Formats as well as Small Scales

With the development of technology, designers should take into consideration the use of icons at a much larger scale than the standard.

Planning your design process

Sketching is a common process in any aspect of design, and it continues into icon design. Fleshing out a range of ideas on paper really helps develop a concise product that fits the requirements of its purpose.

Because an iconic design must conform to a defined set of proportions and dimensions while still being ‘iconic’ and immediately recognisable, forward planning is incredibly important.

Generate an Interesting yet clear Metaphor for the Icon

The job of an icon is to represent an action or idea in the form of a graphical symbol. Therefore metaphors play a crucial role in translating that action or idea to the user.

As a final point in the midst of creating any icon: “What an image/icon is trying to portray or represent must no doubt be identifiable at a glance, or the purpose of the message is defeated.” Until we meet again, fill your life with memories as opposed to regrets. Enjoy life and stay on top of your game!

NB: The columnist welcomes feedback at deedee21bastian@gmail.com

ABOUT THE COLUMNIST: Deidre Marie Bastian is a professionally trained Graphic Designer/Marketing Coordinator with qualifications of M.Sc., B.Sc., A.Sc.

She has trained at institutions such as: Miami Lakes Technical Centre, Success Training College, College of The Bahamas, Nova South Eastern University, Learning Tree International, Langevine International and Synergy Bahamas.