The project consisted of building an illustration style guide of reusable elements for our design team. I worked closely with our design lead to define our design principles, write our technical guidelines and create the library of illustrations itself.
TL;DR
I creates an illustrations guideline + an asset library
My Role
Product Designer / Illustrator
The role of illustration
Through illustration we reinforce Spokeo’s brand and help express our company’s mission in making our customer's world more transparent. Illustrations help breakdown often complex and abstract ideas. We give a face to concepts that are inherently faceless, e.g technology, transparency, data.
Principles
The following principles help keep the designer focus on why we use the illustration.
Transparency
• Our illustrations aim to be as transparent and clear as possible. We should never use illustrations solely for decoration. Illustrations should be practical and add context to the message you are conveying.
Impact
• Illustrations tell stories. The narrative should have clarity and only a single purpose. When done correctly, illustrations should help elaborate and illuminate the content in complementary ways.
Technical guidelines
Part 1 of the guide I focused on when to use what type of illustrations. Even with an illustration library I needed to prepare technical constraints in order to maintain consistency within our illustrations when new graphics were needed.
The set of rules covers everything from how to create gradient backgrounds to masking a shadow. Below, I will only cover a few.
Gradient backgrounds
Adding a background color to your illustration is a great way to improve the contrast. These methods are especially helpful when you need an alternative to a drop shadow.
Data points
Data points are the abstract representation of our data flowing through our content. They are also a part of our initiative in creating beautiful data, making our illustrations sparkle just a bit.
Drop shadows
Stylistically, shadows can help add depth and contrast to your illustration. They are strong indicators of where the light source is coming from and the amount of elevation an element has.
Masking shadows
Small details matter. Everything from folder structure with the design tool to cropping a simple shadow.
Assets library
The library optimizes the usage of illustrations within the team. It's a living document waiting for the next person to add to it. I created to guideline flexible enough to be able to evolve into whatever is next to be needed.
Below I will highlight a few of my favorite illustrations from our guide.
