Visual Design Foundations: Iconography
Communicate the information in a glance and enhance aesthetic appeal in design.
You must have used washrooms in malls and other public places, how do you generally get to know if it is the men or women washroom? Yeah! There is an icon that tells us which one is for what gender. It is a simple graphic that can communicate meaning without any word.
Free & Discounted Udemy Courses — Explore Now
An icon simplifies a tangible or intangible concept in a simple graphic which is understandable in a glance, Iconography is mostly independent from any language which makes it easy for anyone to understand the meaning it communicates.
Iconography has such a power to communicate meanings that they have become a necessity in design as icons can transmit an idea or concept in a glance. Some of them end up being so strong that their meaning persists in time around the world, a good example of it is the “save” icon that is a shape of a gadget (a diskette or floppy disk) that is not even used nowadays, even though everyone knows its meaning.
The word icon has been used differently across the history, it’s origins are from Greek εἰκών / eikōn, that means image/likeness, a painting or statue of a holy figure. According to the Oxford Dictionary the general use of the word is a well-known person/thing which is seen as a symbol of an idea or movement. In computing, it is a pictogram or ideogram displayed on a computer screen in order to help the user navigate through a computer system. Thus, we can define an icon as a representation of any concept/message/term that can be identified within a community.
In visual design icons help us to reduce the visual clutter and communicate ideas without using text, which reduces the time of the users to interact with an interface and improves the learning curve of new users. Icons are always inspired from references taken from real-life concepts which are part of general people’s common sense. Those references are then translated into simple symbols using simple shapes and forms to convey the concepts. That is the reason icons are simple and quick to consume and understand a meaning without requiring the understanding of any language.
It is not always easy to convey the meanings through icons as they can often be busy, confusing or people may interpret different meanings out of a single icon. Thus, while creating icons, it is crucial to consider some influential aspects. Let us explore some of those important aspects.
Kinds of Icons
First of all, it is important to know what kind of icon fits the for which kind of purpose? There are three kinds of icons that you can consider.
- Pictogram is representational, it’s a pictorial image of a word/thing, these are tangible objects that can be represented through a simple graphic. Such as a plane for an airport, a cigarette for a smoking area or a print machine for printing a document in a text file.
2. Ideogram is a symbolic image that represents an idea, they are complex due to abstract or intangible things, such as feelings, actions or concepts. An example is the symbol that we use for maths where two lines arranged horizontally parallel to each other, which means that two things are equal.
3. An Arbitrary Symbol is an invented image which stands for word/thing/idea/action. Most of the time the meaning of these icons should be learned, due that the connection between the icon and the meaning is not completely logical.
Context & Convention
Icons might work or might not work according to different criteria. Before starting to design the icons first ask yourself:
- How will the icon be used?
- Who will be using the icon?
- What is the message the icon needs to convey?
- Will the icon replace the text? Or be accompanied by it?
- Are there any existing conventions?
- Do existing conventions still apply?
These questions will help you narrow down the concept based on the context for which the icon will be created. It can also help in reducing the effort to create an icon if you find conventions that are already existing and working. For example, if you need to create an icon for the action ‘delete’ there is a convention on the market that users already know which is a trash can shape.
Creation Framework
Having a framework to build an icon is very important, which ensures that the process is thought through and enforces the meaning of your icons ensuring visual consistency within different icons of the family.
Ideal steps to ideate to create icons
- Always start researching the context and conventions as we learned previously.
- Sketch out multiple variations, if there are conventions already in place, it is a good starting point even if you try to sketch as many ideas as you have.
- If you feel stuck, brainstorm alone or with your team.
- Mindmap those ideas and sketches to narrow down your concepts.
- Test your ideas with real users.
Digitize and Standardize
In order to use the icons and match them with your designs, we have to digitize them. For this, we have to follow the following steps in order to standardize them and keep consistency between them.
- Choose the Grid that best fits for your icon creation approach. Already there are two grids each for IOS and Android which designers use regularly to create icons. Grids ensure to keep appropriate proportion & consistency for your icons.
- Anti-Aliasing. Your icon should have crisp edges and be pixel perfect. Anti-aliasing is the digital process that reduces image distortion, by slightly blurring edges, anti-aliasing filters get a more realistic and appealing image, even though image are composed by square pixels and in small cases such as icons, anti-aliasing could distort the image enough to make it unreadable.
Having an edge with differing x coordinates like shown below in the last reference will make your icon give a blurry feel. To reduce the anti-aliasing it is recommendable to use 45-degree angles in your shapes that help the anti-aliasing to look crisper.
- Minimizing the complex shapes. The human mind is inclined to quickly remember geometric shapes. Complex shapes can be broken down into possible more basic geometric shapes. This as good practice can be mixed with brainstorming to get a minimalistic outcome without losing its essence.
- Boolean Operations will help you in the construction of icons. Powerful tools such as Sketch, Adobe Xd or illustrator have four boolean operations, namely: union, subtraction, intersection, and difference. Playing with this boolean operation you can build icons putting together multiple basic shapes.
- Consistency should be present throughout your design or project. We can not avoid this factor, icons must be consistent even in small details across your icon set, you can consider aspects such as rounded / sharp corners, flat / outline treatment, line thickness, colours among many other details. These considerations ensure harmony and coherence in your design.
- These considerations define the style of your icons, and that should be thought through depending on your UI requirements, there are multiple styles of icons, some of them are:
- Filled Icons, these icons give a sober and modern look and feel, they are the icons with better scalability in terms of being legible in different sizes (image). They are very useful in cases where more emphasis is needed on.
- Line icons, these icons use lines to build their shapes, they have a playful look and feel, but they could be difficult to understand in small sizes (image). In contrast with the filled icons, these are mostly used in cases where less emphasis is needed.
- Style and Shade Icons, this icons can use multiple techniques like lines, gradients and fills, they give a lot of personality to your design but same as line icons, would be difficult to understand in small sizes (image)
Each of them give personality to your design but it is necessary to consider that the style won’t affect the experience, for example if you are using line icons and you keep the same thickness it could affect the readability of your icon in small sizes, a thing that doesn’t happen with flat icons.
- Standard sizes. Depending on the requirements of the project you may be required to set multiple sizes for your icons. The most common sizes are 12px, 16px and 24px, but that could be variable according to the project requirements. Mostly they match with your body text font size. Avoid using decimal numbers in the position of the nodes that compose your icon, this would ensure the consistency of the size of your icons .
Once you get all your icon set libraries, you can implement it in your design. There are some good practices to build a set of icons as a design foundation.
1 .Work with Smart Objects/Symbols
As a good practice it is good to use the icons as a smart object or symbol, in case that is required any update, we can update it in a more effective way by using master symbols.
2. Naming
Name your icons appropriately. Stick to all lowercase, separated by underscores. Sketch automatically organises Symbols into folders when you put a / in the name, this is very helpful when we are exporting icons in the handoff process for the development.
- If you need icons of only one size, use
Foundation/Icons/icon_name
Ex. Foundation/Icons/email - If you need icons of multiple sizes, use
Foundation/Icons/icon_size/icon_name
Ex. Foundation/Icons/12px/email
3. Documentation
Document any decision taken from the grid, to the styles and sizes, this with the purpose to keep consistency and effective communication with your team.
Tips / Best Practices
- In the beginning first define the style of icon that is going to be used which would be standard global rules for icon creation throughout the design.
- Stick to the grid to create icons and define bounds for it.
- Check and apply standards of anti-aliasing.
- When creating variations, compare based on legibility, understandability, pros and cons
- Always maintain the same style by giving rules. For ex: line icons 2 px line width, shard corners outside and smooth corners inside etc.
- Name your icons appropriately. Stick to all lowercase, separated by underscores. Sketch automatically organises Symbols into folders when you put a / in the name, also is very helpful for development at the time to implement the icons in code.
- While exporting ensure to export icons in png and svg.
Checklist
- You should ensure that the mood board has been done to get the initial direction of choice of iconography.
- Research context and conventions
- Define a style to follow throughout the design.
- Sketch variations, and do brainstorming if you feel stuck
- Test the variations and mind map the results to narrow the outcome
- Digitize using grids to keep consistency
- Implement the icons across the design and Document use cases
Related Topics
Quick Question
Why is the use of icons important for visual design?
- Improves visual appeal
- Reduces the learning and understanding time for new users
- To make your design modern or futuristic.
- Reduce visual clutter
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
