Make at least 12 icons that will form a complete set by first, determining the theme of the icons and second, establishing rules they must all follow.

Why chemistry icons?

For this project I decided to make chemistry icons for a science education company. The company needs icons that represent the tools you’ll need to perform various experiments. At the beginning of each experiment, a list of what is needed will be provided as both words and icons.

Sketching

The first thing I did was ask the company what kind of icons they would use. Then I wrote down a list of about 15 icons. I sketched various ideas for each item on the list.

Mockup_Sketchiconset_sketches-01 iconset_sketches-03

As I sketched, at first I was just trying to draw the item so that I could figure out what features define it, and what features are just extras. I was also exploring different ways to represent the same object.

Choosing a style

Now I had to decide which style of icon would work well for the science education company and their experiments. I decided to go with simple shapes with just enough detail to understand the object. I didn’t want too much detail in the icons because that might confuse the users who look at the icons. I don’t want them getting caught up in the differences between their ruler and the ruler icon. I wanted the icons to look generic, instead of having so much detail that it makes the user think they have to use a ruler that is red and 10 inches long, and so on.

Here are the first 6 icons I created in Illustrator right after sketching ideas.

draft_icons_blarsen

Establishing the rules

Now that I had a general style, I needed to decide what rules and restrictions to place on my icons so that they all looked like they belonged to a set.

  • In every icon, the size of the white space will be the same thickness.
  • Each object will be shown as a profile view.
  • Every icon needs a disconnect at some place.

Completing the set

With rules in place I continued to create 6 more icons in order to make a complete set of 12. The big change between this step and the last was deciding to tilt each item 45 degrees. I did this because I noticed that my microscope and pencil were perfectly lined up with one another and liked the way that looked. So I moved all my icons to the same 45 degree angle, except the laptop and the goggles didn’t really work in this case.

draft_icons_blarsen_Artboard 3 copy 2

Trashing the laptop & goggles

When I received feedback, I found out that these two icons just weren’t working with the set. Also, the laptop didn’t really fit in with this set anyway, because all these items are tools you would use in an experiment, while a laptop helps you view directions and videos. Instead of making the goggles work for this set I decided to get rid of them and replace them with a rounded glass tube. I also learned that the 45 degree angle of my icons worked well and was making them seem more like part of a set.

All 15 icons

I ended up adding a few more icons when I took out the goggles and laptop. I realized that there are many different types of glass containers for holding liquids and that I should represent a few more of these.

draft_icons_blarsen_Artboard 3 copy 5

Adding color

draft_icons_blarsen-18

After trying all these color schemes on all 15 of my icons, I decided on this one because it portrayed the feelings of calm, collected, and cool. That is how the users of these icons should feel when they’re doing an experiment. If you’re not prepared for an experiment, it could go really wrong, very quickly.

draft_icons_blarsen-19

Final icon set

The objective of this project was to create a set of 15 chemistry icons that would look like they belonged together. I made them feel like a set by:

  • Giving each icon two colors (base color and highlight color)
  • Making sure each icon had a part separated by whitespace
  • Keeping the white space consistent
  • Rotating each icon to a 45 degree angle
  • Making the curved liquid line consistent throughout the icons
  • Using the same rectangle width to create at least one part of each icon

vector_icons_blarsen-01