Kieran Black
Kieran Black
custom-icons@2x.png

Custom Icons

Custom Icons

custom-icons-1@2x.png
 
 
Due to NDA and the sensitive nature of my work, some details have been intentionally modified or omitted from this project

 

Intro

LocalSearch is a company that helped people find information for over 20 years, whether that's finding the best local plumber or a bite to eat at a new restaurant. The product originated as a phone book across Australia and has now become a multi-platform digital product on iOS, Android and the web for over 3 million daily active users.

 

The Challenge

A new set of functional icons needed to be created as part of a bigger effort to solidify LocalSearch's brand presence in the market. At the time, the icons that were being used in LocalSearch's internal and external apps weren't organised at all. Different, weights, sizes, styles and formats. What was needed was an easy to use icon set that could be used in many situations across platforms. 

 

My role

I was the only designer on this project but I had the help of a great front end developer to make this icon set. We were able to discuss and collaborate on different aspects and as a result create a better outcome.

 

Think

We first considered all of the constraints:

  • Had to work well on iOS, Android and on specific web browsers
  • Had to be versioned (for developers' and designers' peace of mind)
  • Had to be small enough that it didn't slow down page load time
  • Had to be flexible and be used all across our product line

 

With these in mind, we sought the help of Google Analytics to see what browsers, the data connection speed and current page load time that was being held hostage.

We found that we had three options that would suit all of our needs, a sprite (either SVG or PNG), individual assets (SVG or PNG) or an icon font (one single asset). An icon font would allow us to namespace different icons (easy for the devs), give icons colours (great for asset management) and would also allow the set to be used across multiple platforms. We created an SVG backup system as well to make sure it was definitely browser compatible.

The website's traffic was still largely desktop/@1x driven for the company’s target market (rural Australia) therefore, a 2px line icon makes more sense, easier to read, etc. Also, 2px line icons look at home alongside Google’s Material Design. iOS on the other hand, looks a lot nicer with 1px line icons and also compliments the HIG (Human Interface Guidelines). So we had planned to create two distinct icon sets, one for web and Android (2px) and another for iOS (1px).

The next step was to figure out the style of these icons, should they be sharp or rounded, should they be solid or stroked? The already existing brand guidelines for LocalSearch allowed us to make a decision quite effectively.

 

Make

The icons were first made in Illustrator but we soon found out that a workflow needed to exist to export to an icon font. Photoshop is known for its versatility and I was able to find a plugin that creates an icon font based on layer names. The tedious task of transferring from Illustrator to Photoshop began. I hit a few snags that I then wrote about in an article

PNG Express was used to export the font from Photoshop. This took a while to set up, but once it was, it was nothing but smooth sailing. I would create a new icon copy it from Illustrator into Photoshop, export the layers and then hand off the files for testing with the front-end developer.

Icon fonts don't natively work in iOS but we were developing the apps using a framework called Ionic which allowed us to use the font easily. Namespacing the icons took sometime but we got there in the end. We named them using purposeful and meaningful categories.

 

Check

One of the main goals was a lightweight asset and we really did achieve that. From one asset we were able to create countless variations of icons. This caused page load time to decrease and was remarked as a success.

Usability was a big factor throughout, any developer should be able to include the font in the HTML and be able to create icons with ease just by typing in the namespace. This was accomplished through a tight collaboration with the front-end developer.

 

What I learned

Icon font creation is hard — since accomplishing this task I've learned of plugins that work in Illustrator so I could skip the tedious work of transferring the icons into Photoshop.

Creating meaningful and memorable namespaces is key — keeping it simple meant it became second nature to name the icons and also call on them in the code.

Adobe's products don't always play nice with each other — I became more aware of the minor details that could cause major implications in the long run.

 

 

 

Final Design