UXcellence Exploring excellent user experience

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.

Screenshot: The character symbol is selected in Sketch with the overrides panel shown to the right.
The Character symbol is composed of ten nested symbols, some of which have further nested symbols for refining variations.

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.

Illustration: Twelve different characters of various races, genders, and wearing different outfits and hair styles all created from a single Sketch symbol.
These twelve characters (and a nearly infinite number more) can be created from our single well-defined Sketch symbol.

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”.)

Screenshot: The default character symbol shows a gender-neutral person of medium complexion and medium brown hair. On the right of the symbol are seven skin-color symbols ranging from pale to dark. On the left of the symbol are nine natural hair colors from grey to black and four bright dyes.
The default character symbol is flanked by hair and skin color symbols. The hair and skin color symbols (hair on the left, skin on the right) are different sizes so that they don’t interfere with each other in symbol overrides.

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.

Screenshot: A side-by-side comparison of the character flattened and an isometric view showing how the hair is layered above the body, with the shoulder and ear cut out so the hair appears to go behind them.
To make the hair appear three-dimensional, I “cut” the left ear, neck, and right shoulder out of the overall shape of the hair.

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

Animation: A character face cycles through smiling, sadness, confusion, anger, love, hunger, and sickness.
By providing a range of different symbols for eyes, eyebrows, mouths, and noses, the variety of potential emotions can be limitless.

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.

Screenshot: A sample symbol of the eyes shut with the symbol background color settings to the right. The background color for the symbol is set to a tan color and Include in Instances and Include in Export are both unchecked.
The handy background color settings for symbols are easy to overlook.

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

Illustration: A collection of different shirts, jackets, sweaters, and a scarf in various colors.
By combining different styles of shirts and outerwear in a rainbow of colors, you can quickly create a diverse wardrobe.

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

Screenshots: To the left is a hand holding a phone with no shading added. The fingers overlap the screen, but without depth, it looks odd. On the right, a hand holding a phone with shading added. It looks more realistic.
In a side-by-side comparison of two hands, one with shading and one without, I know which one I prefer.

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.)

Animated: Within Sketch, the user changes the skin override from one color to another and the skin of a hand in the symbol changes accordingly.
Changing a single override changes the underlying skin color, which blends smoothly with the overlaid shadows and highlights.

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.

Like this? Please share:

Explore more like this