Symbolizing Diversity: Creating Inclusive Illustrations in Sketch
I wrote about creating more inclusive visuals a couple years ago, and I’ve been trying to be more deliberate in my own practice. While working on one of the tools in my upcoming product, the UX Compendium, I wanted to build something to help other designers create more inclusive personas and scenarios. I’d been playing a lot with Sketch symbols and felt that they offered the viable flexibility to accomplish this. After some experimentation, I think I’ve built a robust library to create a wide array of inclusive characters. And now I want to show how I did it.
It all starts with a single symbol, which I named Character. Within that symbol, I added nested symbols for every other changeable element, from hair and clothes to eyes, nose, and mouth. By changing various overrides, you can concoct thousands of different possible characters and expressions.
Creating diverse characters
To create a wide range of characters within a reusable symbol, I started with the basics. I decided that the head and body shape would need to remain constant. This makes it much easier later to add hair and clothes without requiring multiple copies of similar symbols or some sort of logic to dynamically load or alter shapes. (A hair style on one head shape might fit just fine, but on a wider or narrower head, it may leave gaps or feel off, etc.) I also decided that the character would be facing the “camera”, rather than a three quarter view. A three quarter view would be great for creating scenarios where characters interact with each other often and is something I would love to explore down the road.
In order to make it easy to change the skin color, I used a similar technique to the concept behind dynamic icons. I first created a generic head and body layer and set it as a mask. Then I layered a nested symbol above of it that consists of a single rectangle with my first skin color. The skin color symbol layer is stretched across the entire canvas, but because the body layer is a mask, the color only appears within the body shape. (To prevent other elements from being masked by the body, I grouped the body and skin color layers.)
On my Symbols page in Sketch, I then duplicated the skin color symbol (keeping each copy the same size) and changed the hue for each swatch. I named them with a “## Name” pattern going from “00 Pale” to “06 Dark” so that the skin colors would be arranged in order from light to dark. (The default skin color is set in the middle to “03 Tan”.)
A hairy dilemma
With the skin color now in place, I moved on to the rest of the character. Hair is another instantly identifiable difference from one person to the next so I set about creating a wide variety of long and short hair styles. (I could easily create hundreds of symbols just for hair styles alone, and I plan to add more styles over time.) When thinking about how hair interacts with our head, a problem immediately came up. Our real heads are three dimensional, but an illustration isn’t. We can only fake three dimensions by layering things above and below each other. I quickly hit a point with some hair styles where I wanted some hair to obscure parts of the face and other parts to be “tucked” behind the ears and neck. At first I thought I’d have to use two separate layers or symbols with the body nested between. A better solution, though, was to “cut” those tucked parts out of the hair layer.
I then used the same masking trick from the skin symbols to add a range of different hair color symbols. (Hair color symbols are different dimensions from the skin color symbols so they don’t get intermixed.) Again, as with the skin, I named the Symbols in “## Name” order to give them an explicit order in the override selector.
A range of emotions
If you’re much of an emoji user, you have a good idea how many emotions can be conveyed with just the facial emoji. (And that’s still a very small subset of our real expressions.) Our faces are endlessly expressive, and each part of our face contributes to those expressions. Rather than try to capture a set of overall emotions by using a nested symbol of a full face, I decided to break the face down into smaller components: eyebrows, eyes, nose, and mouth. This makes it easier to mix and match different element symbols for a wider range of emotions.
Each facial element symbol set uses a different size (with some padding above, below and to the sides) so they don’t get intermingled in the override selector. I set a background color on the symbol artboard so that the elements would stand out from the default white background, then I turned off the “Include in instances” option so it wouldn’t be part of the nested symbol.
Dressing up or down
We have only so much control of what our faces and even hair look like. Our clothes, though, are how we show our personality to the world. So the clothing options needed to represent a broad range of styles as well. Using the same color trick as skin and hair, I was able to add a full rainbow of colors as well as plenty of neutrals. In addition, I created symbols for various styles of shirts and another overlapping set of symbols for possible outerwear like sweaters and jackets. The most difficult part of creating different styles was keeping them to a standard shape. They all had to fit within the torso shape of the body mask. If they didn’t, then the “cut” hair (from above) would overlap oddly.
Adding depth
Another key part of the library is a set of device symbols held by hands. I used the same trick as above to add a skin color override to the hand. But with just a hand shape and the skin color, it was hard to convey how the hand was actually positioned. I wanted to add some depth, using light and shadows.
In some illustrations, I might do this by taking the current color of the object and using a darker shade or lighter tint of the same color for the shadows and highlights. But that won’t work when the skin color might change. So instead I used blend modes and opacity to add both shadows and highlights, with the original hand shape acting as a mask. (It was already a mask for the skin color.)
The other difficult part of adding depth is that some parts of the hand appear to be behind the device while other parts appear in front of it. I could achieve this by sandwiching the phone layer(s) between the background part of the hand and the foreground part of the hand. But then I would then have to change the skin color override twice, once for the background part of the hand and once for the foreground. That would also leave the weird possibility of the two parts being mismatched. Instead I opted to use the same “cutting” technique I used for the hair above, where I cut the device out of the portions of the hand that were in the background.
The downside of this method is that I’d have to create a different symbol for each similar device (like if I wanted multiple phone models of varying shapes and dimensions). Since I wanted to simplify to a single type of look for each device, this was less important to me. If you want more flexibility in your symbol library, you may have to settle for having to select the skin tone twice instead.
The end result is a better, more realistic (but still cartoonish) hand that looks like it’s holding the device naturally.
If you like this …
I learned all of this while working on the UX Compendium, a set of libraries and templates built in Sketch to help speed up your design process. If you found this helpful and would like to learn more, you should check it out and consider sharing it with others. Thanks for reading!
One side note
A month or so after I began working on this library (and a few months before I wrote this article), another amazing designer — Pablo Stanley — debuted a free Avataaars Sketch library for creating diverse avatars. It’s really great, and if you’re looking for something to play around with this concept, you should definitely check his library out. He uses a lot of the same techniques described here.
Originally published at uxcellence.com on February 12, 2018.
