2 February 2016
Creating a Unified Brand Icon Style for Gaslight
A few months ago, I was tasked with redesigning all of the iconography that is used on our website. At the time, this seemed like a big chunk of work to accomplish all at once. Especially since we like to work iteratively here at Gaslight, and we’re usually focused on client work. So we decided to focus on redesigning the icons for the services section for this initial redesign.
I started by taking an inventory of all the icon and illustrations currently on the website. To know where to go with a new style, I needed to know what I was starting with. This revealed a series of disparate styles. That seemed like a bit of a problem from a branding perspective. How did this happen? Different designers created icons and illustrations at different times, and new designs were not informed by their predecessors.
Brand Icon Inventory
Based on the current inventory of icons, I realized that I would need to develop a style that any designer at Gaslight could pick up and replicate with ease while simultaneously adhering to our brand in order to avoid repeating the same mistake. We all pitch in on internal brand work when we have time.
Next I began exploring options for what the new Gaslight icons could be. Each of these explorations included the elements any icon in the system would be built with: colors, color combinations, lines styles, line weights, and base shapes. I also experimented with sample icons using these base elements to explore the flexibility of each system.
New Icon Style: Exploration 1
New Icon Style: Exploration 2
New Icon Style: Exploration 3
At this point in the process, I presented these options to the other designers. I explained my thought process and reasoning behind each of these icon system explorations. We all decided that a simple line drawing with some off-register color would be the best option (refined version of Exploration 1). It was apparent that it would be very flexible for future icons and easy for other designers to replicate. Plus, it had the added benefit of being stylistically similar to the whiz-bang machinery illustration that is on our homepage and painted on the office wall.
It was now time to put this icon system to practice. I started to draw the new icons for the services page of our site. At this point, I was able to further refine and define this system. Certain inflexibilities in the initial system I designed started to pop up, and I had to come up with solutions that would then be added back into the icon system. Overall, I created nearly twenty new services icons.
New Services Icons and Style Guide
OK, the services page icons were done. Now what? Well, other designers would probably be continuing to create new icons for other sections of the site. So I needed to create a way for them to understand exactly how to make icons that would maintain visual consistency.
I created a simple icon and illustration style guide for the other designers to reference. I documented how to use shape, line, line weight, and color. Using this guide, other designers here at Gaslight have been able to incrementally create new icons for different sections of the website all while maintaining consistency.
