Developing a set of illustration guidelines for Granify
It can be difficult to explain what exactly Granify does, especially to someone who doesn’t have a background in AI and machine learning. Whenever asked what e-commerce optimization is, I struggle to convey the scope of what Granify is capable of.
The intersection of data, machine learning and e-commerce is fascinating but also quite complicated, and this is exacerbated when you have only a fleeting moment to demonstrate how Granify puts these pieces together. So when we recently decided to redesign our website, I suspected illustrations would be the key to our proverbial salvation.
Why we needed illustrations
Illustrations have the immense power to distill very intricate information into an easily digestible nugget of information. If a picture is worth a thousand words, then an illustration is worth ten times that because it has the unique ability to use metaphor to demonstrate abstract ideas.
An illustrative style will also help us stand out among our competitors and inject some personality into the brand. We can also hopefully avoid the rampant visual clichés that exist. For example, a quick Google search for “machine learning” will yield hundreds of brains wired with circuitry with various levels of glowing-ness (to use the technical term).
Our goals
We knew from the very start that choosing a style would be tricky. We are a B2B company, which means that we are selling our product directly to other businesses.
We set out to avoid bland B2B marketing that looks vaguely “tech-y” but doesn’t tell you a thing about the product (ie: the glowing brains mentioned above).
Our clientele spans a diverse range of industries, so we needed a style that would make sense in various contexts. We also needed something easily replicated by any member of the design team.
Lastly, we have a robust value system here at Granify, and we wanted to ensure that whatever illustrative style we came up with incorporated those values.
Style experimentation
Now came the real work: actually deciding on a style. We started by grabbing a bunch of visual references of stuff that we liked and met to discuss the merits of all the different styles and why it would or wouldn’t work for our audience. Once we identified the traits of what we did like, it was easier to start experimenting.
With a treasure trove of amassed reference material, I locked myself in a room and furiously sketched out as much as I could over the course of a few days, constantly checking in with the rest of the design team to make sure I was on the right track. I pared down all of my favourite process work into something presentable for a final showdown of styles, and we hashed out an early version of the style that we would eventually adopt.
Though time consuming, this experimental stage allowed us to figure out exactly why we chose the style that we did.
Why we chose isometric
Because it looks great! Also, with careful consideration we identified a few key reasons isometric was the way to go:
- Isometric drawings adhere to a grid. This provides a built-in consistent perspective across illustrations. Plus, you know how designers feel about grids (we love them).
- We can easily create reusable elements. By using a standardized grid, we can create any number of elements for a vast library for future use.
- Easy to replicate across the design team. Provides an easy set of rules to follow for consistency. Also, no need to worry about pesky things like foreshortening.
- Isometric projection gives clean understanding of the object. The reason architects use isometric perspective is to provide clarity, which is exactly what we were aiming for.
- The style works thematically. Granify analyzes huge amounts of data from shoppers, so the idea of an unseen omnipresent observer from above fits in well with isometric perspective. (That sounds creepy. Don’t worry, it’s not creepy. We don’t observe any personal details about anyone, just how you shop).
- BONUS: Our logo already adheres to isometric perspective. Nice.
Technical execution
The Grid
It all starts with THE GRID. All hail its isometric perfection. Adhere to the lines and everything else will fall into place. Tricky shapes like circles can be easily broken down into blocky shapes, then adapted by following the planes. Trust thy grid.
Composition
Our illustrations should be friendly, fun, optimistic and futuristic. They should never be too overtly silly. They should be simple enough to convey a message without ever being boring. The idea should always be easy to grasp even if the illustration is visually complex.
The compositions should be dynamic with plenty of white space and high contrast achieved through bold, clean lines. Great care must be taken to guide the viewer’s eye through the flow of the illustration. The flow can be determined by avoiding visual tangents and using bold colours strategically. Rounded organic shapes are used to ease the viewer from one point to the next, so be aware of how shapes interact with each other.
Each and every object made should be simplified whenever possible, so it can work in conjunction with other pre-existing elements to build a unified composition. However, take care not to oversimplify to the point of abstraction. Same rules apply to characters, who should interact seamlessly with the elements around them.
Most elements have a shadow underneath to give the impression of light, floating objects, enhancing the futuristic vibe. If an element is being used individually, a rounded background shape with lowered opacity can be a good way to make it a standalone object.
Stroke weights
Primary stroke weights are 4pt, and secondary strokes for finer details should be 2pt. All strokes should have a rounded cap and a rounded join.
Colour usage
Keep in mind the context of where the illustration will appear, as sometimes we will want to grab people’s attention, and other times we’ll want it to merely support (not distract from) other content.
The default colour used for strokes is Forest (#08262C). Green (#94D500) and teal (#085156) should be used for supporting elements. Shadows and background shapes should not have strokes.
The primary fills should be our white and Forest (#08262C), with green (#94D500) used as a vibrant accent colour. Teal (#085156) can also be used as a substitute for the dark if you feel that your composition is getting too dark. Background fills should be green at 25% opacity or teal at 10% opacity to make them recede.
When using any bold accent colours, restraint should be taken to ensure they don’t dominate the composition.
If the illustration is going to appear on a dark backdrop, employ the use of green and white fills for maximum contrast. Avoid using teal on a dark background.
People and characters
Some folks are a little bit freaked out by artificial intelligence. I get it. We’ve all seen Terminator. So the use of friendly characters is a good way to put a more human touch into our brand and make AI a bit more relatable and much less scary. As such, our characters should be approachable and engaging.
Characters should be constructed with rounded, soft shapes to highlight their organic forms. Great care should be taken to ensure constructing lines are smooth and flowing, and harsh angles should rarely be used.
We want to be as inclusive as possible with our characters, so we are currently building a library of different races and genders, of all shapes and sizes, to reflect the diversity of our team and clients all around the world.
Next steps
Now that we have some guidelines established, we need to keep evolving our newfound style and develop even more consistency between illustrations. Our asset library will continue to grow, and eventually it should be easy for nearly anyone to construct a composition entirely with pre-existing elements.
We also need to figure out things like how to standardize animations and reevaluate our icon sets. There is still a lot to do, but I am thrilled with how the illustrative guidelines have turned out at this point. I can’t say how grateful I am to work at a company that allows for such creative freedom and trusts their employees. Also, this never would have been possible without the support and contributions from the rest of the design team, so big shout outs to Chris Murray, Mike Buss and Colin Spence.
I want to acknowledge how much of an impact the amazing Meg Robichaud’s articles had on this whole project. I’m very grateful for the resources she provided, and wouldn’t have known where to start without her guidance. Thanks Meg!
Please feel free to check out Granify’s shiny new website, and please let me know what you think in the comments. Thanks for reading!
Dalaney LaGrange is currently a designer at Granify. Prior to that he was an illustrator at a textbook company and taught illustration at a digital arts college in Edmonton, Alberta.
Previous to his design career, Dalaney guided tours on horseback through the remote rocky mountain backcountry. Preceding that, he was a medic in the far Northern regions of Alberta. He also has worked as a bartender, actor, ski instructor, mail carrier, framer, pipe plant employee, lumber yard worker and some other stuff.
He likes his current job best though.
