Illustrating Manifolks
Recently I was tasked with the challenge of illustrating people within the Manifold brand. While the original purpose was for a comic we published on Hackernoon, these “Manifolks” have evolved in style and made their way into our product, providing some context where teams features are in play. Illustrations of people in product is a particular challenge that wound up throwing me for quite a loop through the process. I learned some lessons along the way and thought I’d share some of that hard earned wisdom so others can get over the bumps a little easier.
The place for illustration in product
Our approach to illustrations in the product was focused and purposeful. We wanted to provide general context and a level of comfort as some of the concepts are inherently esoteric when you experience them for the first time. There are other reasons one would use illustration across a product, and we’ll continue to expand ours in the future along these lines:
Tell a story, as in Sentry’s animated banner
Provide context/explanation, as in Duolingo’s course graphics
Accompany an interaction for clarity, as in Basecamp’s helping hand
Reward a user with a moment of delight, as in MailChimp’s high-five
While this list isn’t exhaustive, it’s a good starting point to give yourself a framework to ensure illustration doesn’t obscure or decorate unnecessarily. One might also note that a few of these examples use people, or in MailChimp’s case, a mascot. Why might one opt to illustrate a person or mascot?
As it turns out, not only are our brains more likely to remember visuals than words, we are incredibly tuned to look for faces, gestures and emotions when viewing illustrations. Using people in your graphics is a great way to create immediate understanding and empathy. For this reason, we’ve started to use them where they’d be best suited to communicate human interaction and generate empathy.
Illustrating Humans (or humanized mascots) for product
Humans aren’t quite as easy to approach as objects in illustration, I mucked up quite a bit before I landed on something I liked. Here are some factors to keep in mind while you explore humans in your product illustrations.
Consider your entire brand
In MailChimp’s above example, their brand is fun and playful, so their mascot matches with soft edges and a cute and encouraging animation. In the above example of Sentry, whose brand is minimal and solves a very big problem for developers (error logging to prevent possible outages), they’ve created an illustration that is minimal in colour, subtle in animation, and exactly captures the tone of the “outage” story many on call developers have had to deal with. In Manifold’s case, our brand is minimal (but colourful), geometric, and professional but approachable for developers in tone. It also visually leans on metaphors of math and science to communicate project-level information. My eventual approach wound up using the colour and geometric shapes of our brand and making subtle nods to sci-fi.
Don’t get too close to reality
When I first started drawing and shared some early concepts with my colleague Ming (always a great thing to do), she noted that it was getting a little “uncanny valley” for her. Wikipedia explains that the Uncanny Valley as a phenomenon where when people observe human-like visuals which appear almost human but not exactly, it can “elicit uncanny, or strangely familiar, feelings of eeriness and revulsion in observers.” So ensure people can recognize a person in your illustrations, but you’ll want to make steps to ensure it’s far enough away. Let’s get into actual human proportions — once we know what’s actually happening, we can be thoughtful about straying from real proportions in a considered way.
A quick note — before I ever get into nitty gritty, I crack out my sketchbook and let my brain wander, without judgement. I find this helps me explore without getting locked into anything or worry yet about proportions.
People and their proportions
Many moons ago, when I was first learning art, these are general proportions I learned. There are other systems, all of which are helpful places to start for this kind of work, but this is one I remember well. I use it as a starting point when considering drawing faces.
When I draw a front-facing face, I usually start with the circles — one for the top of the head to the nose, and another one, 50% or so of that size for the nose to the chin. Within those circles, the eyes are usually about a 1/3rd of the way up within the top circle and the mouth a 1/3rd down within it’s circle. If you then split the face horizontally into 5 sections, you’ll see the the eyes fit into columns 2 and 4 and the nose spans the width of column 3. It’s not perfect, but a handy tool to have a great baseline understanding!
You can see here for our character, overlaid with the previous grid, I’ve shifted things around this grid a bit. What thematically informed these characters were both anime and sci-fi as our brand is math/science influenced. If you look at anime proportions, they shift their noses and mouths down the faces of their characters, creating a more circular, friendly feeling. They also always make their noses smaller, which also gives more visual lightness. Lastly, for her neck and body, I went for an overemphasized skinny neck and triangle shape, seen a lot in anime as well. Overarchingly, I wanted these characters to align with the geometric feeling of our brand with a friendly nod to our science origins.
While this is a first round of illustration, I’m looking forward to expanding on these Manifolks and creating some visual library standards for illustrating people within our brand.
Diversity in Product Illustrations
I’ll own up to my privilege here — I’m a white, able-bodied woman with few socio-economic struggles. That being said, I try to stay vigilant about remembering this fact and remember that representation is important. It is a fact that the tech industry is predominantly white and male, but there are so many developers out there that are not (and those that might become skilled developers are often blocked due to racialized, gendered and/or socio-economic barriers). As a designer, I do feel a responsibility to visually capture the world and I believe designers can be responsible for starting to think about diversity from the ground up. It was important to me to start our set of people with a character that wasn’t a white male. While our group of people illustrations is still small and a WIP, I try to be mindful of these intersections of privilege and power as I carry forward. I loved Meg Robichaud’s article on this matter and think it’s a great read for anyone with diversity and illustration on their mind.
This was a really cool challenge for me as a designer and illustrator and I’m glad I could come out of it with some ideas to share. I hope this will be helpful to others, and if you’ve experienced lessons in your product illustrations, share them with us below, and we hope you’ll clap if you found this helpful!
