Small cat lines

Cat Lines

Designer

Should you be bothered about designing an icon?

On the whole, there are some amazing free and paid for icon sets out there that designers have created for their colleague’s benefit. On some occasions, we get to design icons for our clients within a project. This is great, as I get to think about their brand and how to incorporate that into something unique for them. There are numerous types of icon sets out there; line icons, block icons, detailed, flat, you name it and there will probably be a style like it. It all depends on what is wanted and what fits within the client's brand. If this is something that we can fit into the design process for our clients we do, and this is where the challenge comes in… Where do you start?

The misconception is that you can have any icon on a site, what does it matter, it’s just there as a small feature of a page. This is wrong. There are so many things to consider. You need to allow the set to fit with the overall brand and look and feel of the company you are working for. (If you are doing a personal project this gives you more freedom). For example, you would not use a cartoon style set for a corporate client, the two would not go together. However, if they were a more fun start up or had an agency vibe then this route could have potential. You have to pick and choose the right fit as you will have done for the rest of the design.

So how do you go about even starting to create an icon set? I first started to think more in depth about this after seeing John Hicks give a talk at an event a couple of years ago, a colleague subsequently gave me his book, The Icon Handbook, to look through. I had always considered the term “icon” in the modern sense. I was just taking the term at face value for what I know it to mean in my working life, I hadn’t before thought about the history behind the modern icons we see today.

People have been using symbols, pictograms etc for thousands of years. Some to tell stories and some to simply communicate the meaning or ownership of something. Using an image is a far easier way for the brain to take in and understand what something is. I think we are programmed to understand things from a visual sense way before any other. You can even see it with babies and toddlers; unless you have a genius child they will recognise the pictures and bright colours of a storybook way before they will be able to understand the written words or what you are saying.

The more modern icons such as your play icons, download docs, forward, reply etc would have no meaning whatsoever decades ago as the technology simply didn’t exist to the extent it does now. T-shirts are even available now with an icon set printed on them for people who go travelling so that the language barrier isn’t such an issue. Just point to the icon on the t-shirt and it is a much easier starting point that trying to look up the word for restaurant or doctors.

In his book, John Hicks also mentions the code created between the homeless. These symbols are not recognisable to have an exact meaning or correlation to an object; their meaning has been learned over time and passed on. And so they are now recognisable to those in the know. Now for websites this would not do as you want to be able to identify something quickly without “being in the know” you want your user to know that a play button means to view this video, if they spend too long thinking about it then they are more likely to click away from your site as they cannot understand your content.

A great example of icons that are well designed and recognisable are those within airports. If you don’t speak the language how are you supposed to know what is going on? Just look up and they are everywhere in an airport. They have all been designed with visual cues in mind. The same can be said with icons within the Olympic games. The originator of this picture style icon was Gerd Arntz. You can still see his inspiration in the London 2012 games and today's Rio Olympic Games 2016 icons. They are clear and definitely stylized and at the same time are very simple and easy to understand.

As you can see from the above, icons that are well-designed need to have these basic principles embedded in them: shape, recognisable attributes (as you can see in the rio icons they use block shapes, an overall encompassing shape and the same line widths on the secondary elements) and above all they need to look like they all belong to the same set, they are a family after all.

A while ago I wanted to have a go at creating my own icons, not for a client, but to see where I could take an illustrative style and use that creativity in a different way. And so I set about creating a set of Valentine’s and Christmas icons. I was inspired (after looking through John Hick’s book) by Fred LeBlanc’s style of drawn icons http://fredhq.com/shop/drawn). I wanted all of the icons I was creating to have the same look and feel and so I started to think about what I liked or found inspiring with the icon sets I have used in the past. I needed them to look like a set, and so I started with a simple square grid, this was my canvas, and from here all of the icons will fill the same area. I can’t go outside of the edge of the shape or too far into the shape, this way I have already set out to start creating something with uniformity.

Once you have your area you can start creating. I have noticed throughout the websites I have created that I have a preference for line icons, there is something about the lines that make something simple look detailed whilst still keeping a simplistic look. Choosing to use set lines, curves etc will also help the aesthetics be in keeping within the icon set. For these sets, I chose to use two line weights to add a little detail as seen below.

When starting an icon, I use my background in illustration to think about how something is comprised. When I start to draw I always think about the shape of what I am creating first; not the detail. If I were to sketch a person I would sketch out the shapes I feel make up that person before fleshing the sketch out with facial features, etc, and an icon is no different. You can create the shapes you need as the basic starting point and go from there.

Once you have the outline you can then start adding the details. For example with the elf and Santa for the Christmas icon set I created the shapes before adding the eyes and the hat details. You can also see that the Penguins hat, Santa’s hat and Mrs Clause’s hat are all the same curve and shape. This enables the viewer to easily recognise that these are part of the same set. You can have as detailed an icon as you want, but I have found simplicity is key. That is not to say that detailed icons don’t look good, they look great, but you have to think about the size that these icons are being displayed within a site and if that is only 32px by 32px or smaller, there really isn’t much room for great detail.

A bit like when designing a web page I want elements on the pages to look the same so that it all feels like one site. The same with my icon set, their needs to be a uniformity to them. Like the line weights I have used. They are the same two on each one, the hat styles I mentioned earlier, the colour palette (if using colour). I like creating icons that look hand drawn like the above, they look cuter and to be honest they are easier to create as they all still look like a set but are less rigid. However, if I was creating for a client I would ensure that my style would fit that of their brand, I would not apply this style if it did not suit.

The best way to become better at designing icons is to just practice, which is what I intend to keep doing in order to develop this part of my illustrative skills. Look for inspiration wherever you can, you might find a style or colour palette in a magazine or see something that catches your eye on the way home that can lead to great design inspiration for an icon set, even if it is purely a basic shape.

From talking about simple icons I also started to create a far more detailed set. I started to create a set of pictograms for our office team and found that after doing a few I couldn’t stop. Each person has their own identities and little quirks but I have kept eyes, noses, mouths, eyebrows in a consistent style so we all look like a set. These are very detailed but I couldn’t help myself with this set. I wanted to get everyone's personalities across and found some people far trickier to portray than others. I just wanted to show the different ends of the spectrum when it comes to designing an icon.

So in answer to my own question… yes, you should be bothered about designing an icon!

Yes, they might just be a small picture but they can help quickly get a point of view or meaning across far quicker. The grid and points around taking elements from one icon and using them throughout are just the fundamentals. You do not have to stick to these prescriptively, and I would encourage you to do what you wish when creating your own set. But when you have created a few always go back and look at the full set to see if you have created a family or if you have just simply created a few different objects. You will be able to clearly see the difference by doing this.