CareerFoundry UI Design Short Course - Day 03

UI Design Short Course Header

Yesterday we learned how you can use design principles to make your job easier as a designer. Today we’re going to shift from the conceptual to the practical and dig into the basics of icon design.

Icons are graphic symbols which convey meaning through their resemblance to real life objects. They are essentially pictures of things. We see them absolutely everywhere, not just in UI design. They can communicate vast amounts of information in a short time and, in many cases, a lot faster than text can. They’ve been a staple of human communication throughout history and their ever-growing popularity is ensuring that they continue to be.

There are a few kinds of icons out in the UI field that you’ll commonly come across and will likely be designing. These include:

Favicons - Favicons represent websites and are found in browser bars. They are normally a smaller version of a logo, or a variation.

Application Icons - These guys can sit on your phone screen or your dock.

Interface Icons - These are icons used in UI that aid navigation, frequently as part of a collection.

What makes an icon “good”?

Icon design affords designers loads of creative freedom and can be lots of fun. It is, at a very basic level, drawing pictures. Unfortunately, not all pictures are drawn equal. You’ll find exceptionally good icons out there as well as terrible ones too. Below you’ll see two Mail icons. Do you think they are both effective in telling you you’ve got mail?

Email3-Img1.png

Good Icons Are Simple, Clear and Predictable

Don’t add unnecessary decorative elements or details to your icons even if they look great. More often than not, unnecessary elements will get in the way of communication. This does not mean that icons have to be boring. You just need to make strategic use of style elements and tools to give them character without detracting from the icon’s meaning.

Good icons are also predictable. Users know that when they see 3 horizontal lines stacked on top of each other, a.k.a. a “hamburger” icon, that clicking it will usually reveal a hidden menu.

Email3-Img2.jpg

Good Icons Are Consistent

Good icons are consistent, not only with each other, but with the app or product they will be featured on. When creating an icon collection, be sure to apply the same styling to all of the icons. Make them feel like a family by using the same kinds of shapes, textures, or line weights. Their characteristics must match. You want to create unity, avoiding icons that don’t quite fit in with the rest of the group.

Take a look at the image below. It features different objects, but you can tell that they belong to the same family because they all follow a certain style; the color, line weight, and shapes are all the same.

Email3-Img3.jpg

The Icon Design Process

As with all work related to design, icon design has a process that your icons will greatly benefit from if you decide to follow it. We've broken it down into 3 main stages: Exploration, Design, and Implementation.

1. Exploration

Before you start drawing out your icons, give yourself some time to explore. Spend some time thinking about the idea or object you are designing for and all the images or symbols directly associated with what you need to communicate.

2. Design

Once you have selected an idea or object to work with, begin sketching. Pencil and paper work wonders and are a quick way to explore alternatives fast. However, many designers choose to jump on their screens and start pushing pixels early on, which is also totally fine.

3. Testing

Finally, you will need to test your icons. You want to make sure they are scalable and read clearly at different sizes. They should also align with the interface in which they will be used. Pop them into the UI and actively look for issues. Go back to the drawing board as needed. Revise your icons based on your findings and test again until they are just right.

As you casually use apps on your phone or visit various websites, take a look at the iconography they use. Is it clear and easy to understand? How could the icons be improved?

Further Reading

Keen to continue learning about UI design, and can't wait for tomorrow's lesson? Here are some articles to keep you going in the meantime!

How To Design A Mobile App User Interface Like A Pro

Learning Sketch For UI Design? Avoid These 5 Common Mistakes

Figma VS. Sketch: The New UI Design Tool That Everyone's Talking About


This page was last updated: 11-6-2019