As a designer, you may find yourself in a position where you are creating visual guidelines for others to follow or maybe need to be following existing ones. At Automattic, a project led by the marketing designer Joan Rho consisted into generating new illustrations for helping us evolve the brands WordPress.com and Jetpack. Joan and a few teammates worked with a renown illustrator from the tech industry, Alice Lee, and came up with a set of approximately 60 illustrations as well as a directional guide for designers to follow along. Since then, there have been multiple occasions to create new illustrations. I’ll explain my personal process in this post.
First off, here’s a preview of the guide as well as some of the basic illustrations.
The guide
Characters and elements
There’s also a color palette that was created. It’s good to have it, but it seems like we naturally always go back to a blue palette – for now.
The working station:
I have 5 documents opened whenever working on new illustrations. They consist into:
– The guideline (.PDF) As a reference
– The existing illustrations (.ai) As a reference
– A working document (.ai) – This is the one that only I see and use; it’s my messy working space
– A ‘clean’ document (.ai) – This is the one that I’ll be sharing with my coworkers; illustrations are kept in their original form (e.g. the strokes are kept as is)
– A document to prepare SVG files – This is the ‘final’ one where the illustration is being cleaned and strokes are outlined
The process:
Because I’m walking in someone else’s shoes, my process differs from a flow that I would have started from scratch. Although these sets of actions are personal to me, I believe that I’ve come up with an efficient way to honor the original style of our illustrations while ensuring their evolution.
Let’s take an illustration for representing an anti-spam concept as an example.
1. A research is done to see what other entities have been using to represent anti-spamming. Some examples include Google and The Noun Project.
The noun project
2. Reusing elements from the basic set of illustration is key. It ensures that new elements won’t feel foreign. (In this case, I will reuse the speech bubble.)
3. I’ve included stroke profiles in my Illustrator software. Without those, the new illustrations would look disconnected.
4. By combining steps 1, 2, 3, and by keeping the guideline as a reference, a few illustrations are being created.
5. Even though this is not an explicit rule, you can see that imageries like a bug and a skull don’t feel in line. The best option here is to go with an illustration that is simple, respect our style and has a clear meaning (That’s #6).
This is probably the only time that I had to do more than 2 or 3 drawings before getting it right. The more I practice, the more I become productive.
Here are other illustrations which were created following this simple process
Et voilà!
