Meta

Tips for creating an icon for beginners

Ever wondered what makes an icon successful?

If you have ever gone on a digital device, such as a smartphone or computer, you have seen little boxes with images inside, which lead you to a specific function. These images are called icons.

Icons are not just images in a box. An icon is a small graphical representation of a program, a file, a command, or a label. They are a great way to allow users to navigate an information-rich environment. In order to help people find information and functions easily, you must create an eye-catching icon. If you were to create an icon, you may think to yourself, how do I make it so that my icon tells the user immediately what they need to know? In the below, I will explain a few simple tips that will have a big impact on how your icon can be represented. Creating one may seem like a simple task, but it can be difficult. You must pay attention to not just the design aspect of it, but the meaning behind it.

Carrie Cousins, an experienced web and graphic designer explains a few simple tips for creating a successful icon that is visually appealing and bound to catch anyone’s attention. When creating your own icon, keep these tips in mind!

1 – Keep it simple – A simple icon allows users to understand and remember more easily than a more detailed image. Simplicity is key in design. You can keep it simple by using simple colours, shapes. Adding unnecessary details may make the icon less recognizable.

2 – Avoid words – Many icons you see typically do not have that many words. There just isn’t enough room for an icon that is filled with words to be understood. Even if there was enough room for text, it still would not be a good idea as the main point of an icon is be recognizable instantly. Try to avoid text unless it is included in your logo, unless it is absolutely necessary. Words typically take more time for the brain to process than images.

3 – Remember scaling – An icon should be usable regardless of size. This is especially important because of the constant changes in the digital landscapes. Different platforms and devices may render icons at different sizes. While creating your logo, start big, then scale down. Ask yourself, “Is this icon still recognizable at a different size?”                                 

podcast icon                      podcast icon                        podcast icon

4 – Make it monochrome – A trick many designers use to test out if their icons are effective in any size is to make it monochrome. Start off your icon with a black and white palette first. If your icon is recognizable and communicates the same message with and without colour, then it works perfectly.

bw audio icon                bw video icon

5 – Use vibrant colours –  However, if you want your icon to stand out, go with vibrant colours. It will help your icon to stand out on a variety of backgrounds which will catch the eye of users. Try to stick to a limited palette. It is hard to create an icon with many different colours, but if you experiment and it ends up looking good, go for it!

audio icon                video icon

In the end, an icon just needs to be instantly recognizable and appealing to the eye. It can just be simple graphic representation of a logo or image. It needs to be memorable and catch the attention of others, but most importantly, needs to immediately convey the relevant information. Once you have incorporated all these tips into your icon, the next step would be is to test it out using different colour backgrounds, or putting your icon beside other icons. If you follow these tips you will have succeeded in making an icon that truly deserves the adjective, iconic!

*All icons above are made by the author, assets from here, here, and here.

1 comment on “Tips for creating an icon for beginners

  1. Pingback: Reflection on Learning #4: Creating Logos and Cancelling out Simple Vocabulary – ninelie's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: