Snapshot : Learn the basic steps of how to create icons with Adobe Illustrator with this mini case-study. Icons are simple visual designs that you use to add more impact to your communications. In this article, we show how they make designs easier to understand, how they help improve visual appeal and usability, and how they form part of your brand identity.
This week, we look at how to use a specific area of graphic design – icons – to boost your marketing and creative impact. We’ll do this by sharing the steps we took on an actual design project.
You don’t need deep technical knowledge of Adobe Illustrator to follow along. But some familiarity with the basics of Adobe Illustrator and what it can do is helpful.
We’ll go through a step by step guide to how we created a set of 54 branded icons related to marketing, creative and e-Commerce. You can see them right up there in picture at the top of the page. And, you’ll find one of these on each the skill guides pages on this website.
Why use icons?
Let’s start with what icons are, and what they can do for you. Icons are simple graphic designs that visually represent ideas, concepts or objects. From a marketing and design point of view, icons have three main benefits.
1. Icons are easer and faster to understand than words
Firstly, to your audience, these visual representations are in most cases much easier and faster to understand than using text descriptions. This is particularly true for intangible items like ideas and concepts.
It takes less effort for our brains to interpret visual representations than it does to interpret the meaning of text on a page.
Our brains are naturally drawn to visual cues.
Think about the apps on your phone for example.
Do you look for the word “weather”? Or, do you just hit the icon with the sun, and the cloud?
What about when you want to take a photo? Do you look for the word “camera”. Or, do you just hit the icon with the illustration of a camera?
The apps are all easier to use and find because they have icons – visual representations – of what they are. That doesn’t mean the text is omitted, but it’s only there to support the visual.
Icons are easier to remember
These visual representations are also easier to remember. Visuals create stronger associations in the brain that are easier to access.
If we described this design, “a landscape shaped rectangle, with a circle in the middle, one very small rectangle at the top right, and a smaller parallelogram attached at the top of the main rectangle”, it’ll take a few seconds before you recognise what we’re talking about.
But if we showed you a camera icon, like this one, you know in micro-seconds what it is, right?
From a design point of view, these are examples of affordances.
Affordances are a design principle, where you understand precedents and expectations in user perception of designs.
You use that precedent to make your design easier and more useful. In other words, you give people what they expect to see.
If you make something look like a button, then expect people to press it. If you show an arrow pointing to the left, then most people expect that to mean “go back”. And so on. Icons use a lot of these affordances to make designs easier and faster to understand.
2. Icons improve visual appeal and usability
Secondly, when you use these icons in website design, they improve the visual appeal and usability of your web pages and content.
From a visual appeal point of view, they provide contrast (one of the most important design principles) to long passages of text. They can stop pages appearing overly text-driven. And with the use of colour, they can create more appealing and memorable page designs.
From a usability point of view, they help reinforce to the user that they are in the right place. They show a relevant visual representation of what’s on the page, and what things on the page do.
We know if we see a magnifying glass, that’s something to do with search or research, for example. And if we see a shopping basket, we know that’s something to do with online shopping.
You can also use icons to help break up long passages of text by providing an alternative to look at for the reader’s eyes.
This gives the eyes a “rest” from reading text, and makes pages more readable. This helps with the overall layout of your website pages.
3. You can use icons as assets with your brand identity
Finally, from a brand strategy point of view, you can use icons as tangible assets to reinforce your brand identity.
You can adjust colour, style and the “tone” of the icons, so they reflect elements of your brand identity.
When you use these elements consistently, it helps build mental associations and reinforces those particular design elements.
Look at all the icons in the image at the top of the page, for example. You can see we’ve reinforced our colours and style using repetition, which is another key design principle.
So, with these benefits in mind – visual representation of ideas to make them easier to understand and remember; improve visual appeal and usability and building your brand identity, let’s now move on to the case study.
Case study background
The goal for this project was to create a set of branded icons to replace the default icons which we’d used to help build the first version of the three-brains.com website.
When we first set up the Three-brains website, the page template we used was called Neve, and we used site building tools from Elementor. These tools included the option to add an icon box, and that option gave access to a library of over 1,500 free icons from Font Awesome.
For anyone starting out building their own website, that’s a helpful tool and short-cut to get icons on to your website.
You can use the website page settings to adjust the size, colour and placement of the icon, so you can make it a little more distinctive. But, importantly, you don’t have any option to edit the design of the icon itself.
And while that wasn’t a problem in the short term, it was something we wanted to improve longer term. Because, what it meant was the icons were not unique to our site. Any other website could replicate them by using the same templates and tools.
That was the start of the challenge for us.
The project brief – challenge
As with any communication brief, you start with the brand and the objectives. Our internal brief covered our brand essence, personality and values. They are embedded into our services, so we won’t cover them here.
However, it should be clear, that we believe distinctiveness is a big part of what makes great brands. Happy to share that this belief is part of our brand personality.
(By the way, we talk about distinctiveness in our guide to brand identity and in previous articles, if you want to find out more about this.)
But it’s one thing to say you’re distinctive. It’s much tougher to actually show that you’re distinctive.
So, the overall goal for this project was to show more distinctiveness. We wanted to move away from generic icons that anyone could use. The goal was to create specific branded icons that were distinctive to the Three-brains brand. That’s where the thought process really started that led us to consider how to create icons for the website.
A second design challenge – icons for specific deep topics
We also faced another challenge. Though there are 1,500 icons in the default Font Awesome library, they cover topics broadly. But, often they didn’t cover topics deeply. Where we had multiple articles under a broad topic, the choice of icons often wasn’t specific or varied enough to cover the topic we needed.
So, you might use a magnifying glass to signify an article on research for example. But, what if you have six articles on market research? There weren’t six different magnifying glasses to choose from. And what if the articles were on specific areas of a topic?
So, if we wanted to differentiate between qualitative and quantitative research, for example. There wasn’t the choice of icons to do this.
Or, another example. We have six articles under writing skills. So, a pen is usually a good symbol for writing., right?
But, what if our writing articles needed icons to represent writing advertising copy, sales copy, and writing for blogs. Would the same pen makes sense for those three topics?
No.
So, we needed icons that had a consistent theme (writing), but be differentiated enough from each other to cover each specific topic under the theme.
And then of course, with more obscure topics or very specific topics, sometimes there just isn’t a default icon to use. So, to design icons for topics like market research agencies or online store strategy for example, we had to create icons from scratch.
That’s when. if you know how to create icons, you can create your own graphic design answers to these challenges.
How to create icons – four step process
So, we had 54 different topic pages where we needed to update the icons. For each icon, we went through four key steps.
Step 1 – Research what’s already been done
As we mentioned above, there are often precedents and expectations in visual designs that consumers will be familiar with. Affordances, remember?
They will know that a magnifying glass signals search or research, for example. They’ll know a pen signals something something about writing. And even for less tangible items, they’ll recognise symbolic designs like a light bulb signifying an idea or an innovation.
So, for each item, our first check was on Google to see what existing visual icons were out there. So, searching “Market research icons” and looking at the images tab. Searching “qualitative market research icons” and so on. What we were looking for were any obvious “signals” in the designs that were repeated frequently and so were part of common usage.
This research isn’t about copying what’s already out there. You use existing ideas to inspire, not to imitate. You want to make sure you use the essence of common patterns. But, you bring your own style to the design.
This “not copying” is important. Firstly, that wouldn’t actually meet the brief of making us distinctive. And secondly, it would involve potential copyright and licensing issues. That was a can of worms we didn’t want to open. The best way to make sure you are not breaking any copyright is when you create your own designs.
Step 2 – Draft the designs in Adobe Illustrator
So, with the research inspiration, we then set about creating the icons in Adobe Illustrator itself.
A little bit of background on the technical set-up. We opened a basic blank 300px x 300px artboard for each design, at 72dpi.
Common usage visual items
For any “common usage” visual items that our research had shown us we needed to include – a magnifying glass, a laptop, a light bulb for example – we used the basic Shapes tools (Rectangle, Rounded Rectangle and Elllipse mainly) to draw out each shape.
We made manual adjustments using the Selection and Direct Selection points on the anchor points and paths.
And then when we had the main shape, we used the Shapebuilder tool to form the actual shape of the icon.
Creative thinking visual items
For more non-standard visual items, it was the same “production” process in Adobe Illustrator. But we needed to do a bit of creative thinking, before we started those designs, to generate the idea.
This meant we needed to understand what the topic was, and how we could symbolise it visually.
So, in this example, the generic symbol for search and research is the magnifying glass. So, we had to include this on the icons for research topics.
But to drill down to qualitative research for example, we had to consider what is it that makes qualitative research different from other types of research? The answer we came to was that it involves direct conversations with consumers.
And “conversation” does have an identifiable symbol in the form of speech bubbles, which you can see in the design.
Same process when it came to quantitative research. What is it about quantitative research that makes it different from other types of research? Well, that research is about numbers and trends. And these, you could symbolise with the use of a graph.
Which is what you then see in the icon for quantitative research.
Convey meaning with the least amount of design
For each icon design, we then reviewed it to check that every design element was needed to make the design work. We had each design element on different layers in Adobe Illustrator. As part of the review, we turned these layers on and off for visibility.
If the design was still understandable without a layer, then we left it out. This is an important discipline to try and convey the most meaning, with the least amount of design. (it comes from the work of legendary designer Dieter Rams and it’s well worth doing some research on his design approach.)
So, for each design where we could take out elements, that’s what we did.
That’s why none of the people images have full faces for example. It’s why there’s no actual text on any of the icons. (unless you count the number on the sales promotion one, but numbers are not technically words). And it’s why none of the graphs have axes, titles or sources.
We didn’t need any of those things to create the right visual impact.
The icon designs worked without them.
Step 3 - Tailor them to your brand identity
Once we had a basic design that visually represented the topic, next we looked at how to make it also represent our brand identity.
At the simplest level, for this project, the first thing we did was to add our brand colours. It’s worth adding colours later in the design process, than earlier.
It’s possible these icons might appear in formats where there is no colour. So, they need to also work without colour. We checked each of these in grayscale before we added any colour.
That being said, we knew that these icons would only appear on our website, and so would always be seen in colour. Red, blue and purple are the dominant colour in our brand palette.
And as you can see from the collated summary of all the icons, the red is our lead brand colour and appears on every icon. And you’ll find the secondary blue and purple colours in most of the icons.
Repetition and consistency reinforce brand identity
This creates repetition and therefore consistency in your brand assets. And this, helps to reinforce your brand identity. We have specific Hex colours which we stored as “swatches” in Adobe Illustrator so that we used the right colours every time.
In fact, there’s only one icon where we used any colours outside the brand palette. That’s the one on the use of colour in marketing where we felt the colour wheel was the best way to bring that topic to life. And that kind of needed colour.
But one challenge with that icon, and some of the others was if the icon was too generic. So the colour wheel itself is quite generic, for example. A process outline like we have on the market research process icon is quite generic.
So, where we thought the design was just too generic, that’s where we added some of our own branding. You can see the distinctive Three-brains logo on icons where otherwise the icon would be too generic.
The logo does not appear on every icon, though. Partly, because it just didn’t work visually on some of them. And if we used it on every icon, it could be too much and put people off. But it’s there on enough icons, that our brand identify is clear.
Step 4 – Publishing to your website with consistency
The final step on each icon was then to export it as an .svg file on a transparent background. This was the graphic file format required to publish icons via the Elementor site builder.
These were exported at the same 72dpi so that the file size was kept as low as possible. But as they were vector graphics, they retained the integrity of the shape, if we needed to resize them at any future point.
We named each icon after the topic it represents, and tried to use the Keyword from the article. Not only does this make them easier to organise and find, it also helps your SEO tool recognise this as a relevant image for the page.
Set a checklist for publishing the page
We then set a checklist for publishing the page in Elementor, so that each icon appeared in the same place and in the same way across each page. This is another way to drive consistency and repetition.
So in this case for example, this meant setting the spacing and padding (the white space around the image) and the actual size of the icon itself. It meant defining the font size, style and colour of the title text that accompanied each icon.
We had to do some slight manual adjustments with the sizing to make sure they looked “right” on each page. But, this was usually just a matter of a few percentage changes in the size. And it was mainly due to some of the icons being portrait, and some being landscape.
One way we could have overcome the need for these manual adjustments would be if we’d set say a standard background shape for all the icons. So they could all have gone on a a rounded rectangle or square, for example. You’ll see this on some other sets of icon designs.
However, hands up, that we didn’t actually think about this until afterwards. And to be honest, we think this would have made our designs too uniform. We think there’s enough consistency across the designs. But there’s also enough variation in the types of icons, that it’s a good fit for our brand.
And so, once we’d published the icon to the page, it was a case of then going back to first step and repeating.
Repeating 54 times in this case.
How to create icons – conclusion
Icons are a great way for both beginners and more advanced designers to practise their graphic design skills.
For beginners, the shapes and Shapebuilder tool are easy to use, and the creation of the icons themselves is generally not technically challenging. You don’t need to use some of the more complex features in Adobe Illustrator like Effects and Textures to create the basic shapes. They’re just a good design challenge to get your head around the basics of Adobe Illustrator.
And for more advanced graphic designers, icon design can still be a fun and challenging project. Because, there’s a real design skill in working the icon design down to its core and most simple elements.
When you practice how to create icons, it forces you to stretch your creative thinking muscles. It forces you to be focussed and disciplined in what you include in your final icon design.
We cover more on the use of Adobe Illustrator in our guide to graphic design tools. Our guide to brand identity also has much more on the need for creating distinctive brand assets. If there’s a specific question or challenge you have on how to create icons, feel free to contact us directly.
Photo credit
Woman at Station with Phone : Photo by Daria Nepriakhina on Unsplash
