Black Illustrations has just released the free Movement Pack, which includes 10 illustrations made for social media and digital projects to help creators fight racial inequality.
"In an effort to help aid protestors, organizers and social media managers, we created The Movement Pack featuring Black Lives Matter illustrations for use with your digital designs," says John D. Saunders.
The web is for everyone. While this may seem like an obvious statement, it hasn't always been the case. Where once it was prohibitively expensive for many people to own a computer and maintain an internet connection, the widespread availability of cheaper mobile devices and internet access have democratized the web. In fact, the United Nations estimates that, by the end 2015, 3.2 billion people were online – two billion of those being from developing countries. The ethnicities and geographic locations of web users have never been so diverse. So, then, why doesn't the web look like it?
There is a general lack of representation of people of different ethnicities in online imagery. In parallel, there’s a growing force of designers trying to solve this. When Neosha Gardner couldn't find decent images of black women in stock imagery, for example, she created her own stock photography service in 2015 called CreateHER Stock, which has seen considerable success providing stock imagery that depicts black and brown women in various lifestyle, business, and everyday settings – especially useful for content creators.
When it comes to web design, however, illustrations continue to rule the day. Websites of all kinds use them to portray brand values, tell stories, and explain workflows and product uses. Much like the problem with stock photography, identified by Neosha, there are similar diversity issues with stock illustration. It simply isn't meaningfully diverse.
Creating illustrations for web that are actually diverse: The case of Black Illustrations
John D. Saunders is a web designer, marketer, and founder of the agency 5Four Digital. In an interview for Shaping Design, he’s incredibly enthusiastic about his practice, speaking of his love for the human element that’s so central to his job. The web experiences he creates are for "all types of clients from all different ethnicities and walks of life," John says.
When it came to finding illustration assets for his diverse client base, however, John kept running into a wall. He simply could not find assets that accurately reflected the different ethnicities of his clients. To him, it was about so much more than skin tone.
"You might see an illustration of a 'person of color,' but it's literally just an illustration of a white person with the pigment changed. They don't necessarily have the hair texture, body type, and different features that a person of color would have,” explains John. “I thought to myself, I think there is something that we can do about this."
This is the key design challenge that sets stock photography apart from web illustration; in photography, the ethnicities of the models portrayed are an unquestionable part of the photo as a whole. For many distributed illustration packs, however, simply 'reskinning' illustrations with different pigments is often passed off as a solution.
John set out to provide a different product, one that would accurately represent black and brown people in commonly used web illustration contexts. This is where Black Illustrations, his passion project, was born.
Showing illustrations of people of diverse ethnicities, of diverse gender and sexual identities, and depicting people with disabilities using a product communicates that they, too, are being considered in the design of the product or service.
Diversifying the 'illustration pack' from the ground up
Being a 'doer,' John leveraged his agency's resources to create the assets he could not find on the marketplace. Taking a look at the existing illustration packs on the market (he's a fan, noting their versatility and overall 'friendliness' in web experience), he observed the most common contexts in which web designers need to use illustrations.
While John took inspiration from various other illustration packs, when it came time to produce the web illustrations themselves, he and his team started from scratch. "Illustrations out there I had seen may not have had the right hair texture or broad features a person of color would have... for us, it became about more than saying 'this is a specific type of person or demographic we're creating," John says.
Instead, "It's saying, I'm a person of color. I'm going to create a character that looks like me, that has features like me,” He elaborates, stating that the illustrations mirror what he sees and perceives in his surroundings. “Now that we've done it, I hope we're going to start seeing other platforms pop up doing the same thing, and creating a broader conversation of having design from people from all walks of life. The great thing about 2020 is, all of the resources to do this are available to anyone now. You have people from anywhere and everywhere leveraging these illustrations, and then creating their own as well."
To distribute the illustrations, John’s agency, 5Four Digital, now offers illustration packs of more than 60 images in several file formats, for use in tools like Adobe Illustrator and Photoshop. John and his team are constantly adding illustrations and providing more contexts in which web designers can use them.
The illustrations are mostly free, with one newly released paid pack, which is a series of lifestyle images. John says that keeping the core packs free is important, so that the illustrations can achieve greater market penetration and more designers can represent different ethnicities in their work, contributing to a much more diverse online world.
The importance of representation in web experiences
"The time is now for this," says John, referring back to how web users are more diverse than ever. For him, it's about fairness and inclusion first and foremost. "People from anywhere, [regardless of where they may be from], when they're browsing the internet; when they're on the website; when they're looking at a service-based company or looking at a new SaaS product, seeing people that look like them helps that product resonate more, because they're seeing themselves in the product."
This leads to an even wider issue of representation in web design. Showing illustrations of people of diverse ethnicities, of diverse gender and sexual identities, and depicting people with disabilities using a product communicates that they, too, are being considered in the design of the product or service.
Provided you have a product or service that is designed with accessibility in mind, this may be instrumental in driving adoption. This is not only a question of fairness (in the 21st century, digital products and services can and should be barrier free in every way possible). There is a compelling business case to communicating this commitment to diversity effectively.
In 2019, Adobe's Diversity in Advertising survey found that more than six out of ten respondents saw diversity as an important attribute in advertising. 21 percent said they'd boycott brands that didn't showcase diversity. A quarter of respondents said they were more likely to purchase from brands exhibiting diversity in their advertising, and perhaps most impactful, 56 percent of consumers said they think more negatively of a brand that's lacking representation in advertising. Your website, and the level of diversity in the illustrations on it, are therefore directly linked to your success.
John brings up a similar point. "When people see content that resonates with them, they are often more liable to purchase the product or feel more connected to the product. I think this opens up a bigger conversation of having people from all walks of life on the design side, [operating at] the heart of that design process," says John.
"You might see an illustration of a 'person of color,' but it's literally just an illustration of a white person with the pigment changed. They don't necessarily have the hair texture, body type, and different features that a person of color would have."
Does a lack of diversity in web illustrations reveal a greater diversity problem in design teams?
Design is making great strides in improving diversity at the decision-making level within companies across the world. What was once an industry almost entirely dominated by white men is now much more representative of the user bases their web and app experiences serve.
"We've seen a lot more diversity in the digital space. CEOs, marketing directors, and other leadership are starting to understand that you need to have all types of people on your team to be able to reach an audience that's more broad than your own, especially older individuals, women, and people of color,” John points out, while mentioning that we still have a long way to go. “It's just the way it's been, and we're not at a point now where there's that equal representation of everyone. But it's getting better," says John, adding that initiatives like Black Illustrations will hopefully make it easier for people of color to see that web design is an environment welcoming to their input and participation.
Feedback to 5Four's illustration pack has been mostly positive, but there have been some negative reactions as well, focused on whether the Black Illustrations effort is exclusionary itself. For John and his team, the objective has always been to inspire others to follow in their footsteps.
"My goal here is to show a different perspective where you can have someone else say, 'well, hey, I'm of Asian descent. Why don't I do an illustration pack of Asian individuals?' Or hey, 'I'm of a mixed descent, why don't I do an illustration pack?' And then, you have this platform where you have people from all walks of life creating content," he says.
John D. Saunders' best practices for using web illustrations
If John and his team's Black Illustrations project is of interest, and if you'd like to use the illustrations in your own web designs, you can head over to his site and download the first illustration pack for free.
John is passionate not only about the creation of these assets, but also how they're used to create effective, easy-to-use, and compelling websites. Drawing from his background in web design and digital marketing, I asked him to also share his best practices for using illustration on websites.
Here are his top tips to keep in mind when using assets from Black Illustrations, or other illustration packs:
Leverage whitespace effectively. Make sure your content, whether it's a website, a responsive design, or a mobile design, has adequate space to breathe. Make sure the content isn't convoluted, and that it's easy to view. Remember to also check it out from a user perspective.
Look at lots of other designs. Whether you prefer Behance, Dribbble, or another platform altogether, check out the work of other amazing, award-winning designers. Get inspired by what they're doing, and try your own take on the designs they're creating.
Sketch with a paper and pen. While viewing other designers' work and looking for inspiration, doodle! Keep a paper in front of you and a pen in your hand. Sketching out your initial ideas will help you gain an understanding of what you're trying to accomplish with your own design.
Leverage your network to gather feedback. Everyone has some type of audience, whether on Instagram, via a Facebook group, etc. Ask them for their opinion on concepts and designs, and find out what they'd like to see more of. You can also create polls, questionnaires, or Google Forms to get your questions answered. You're not going to know what your audience thinks until you reach out directly.
John and his team employed several of these techniques when developing Black Illustrations. They tested the first set of images with their existing audience, and leveraged their growing user base to find out exactly what designers and content creators wanted to see in terms of new illustrations for the second and third iterations.
A wave of adoption and the continued success of Black Illustrations
5Four Digital employed a very grassroots marketing plan when first launching Black Illustrations. They got the word out about the illustration pack via Reddit and Facebook groups, and even John himself was surprised by the reaction.
Not only were there many downloads, but there were clear signs of adoption right away, as designers were creating web experiences with the illustrations. Additionally, people have been using the illustrations on presentations, pitch decks, and even on flyers. "This is why we do what we do," John says. "We create these digital products and entities that we hope add value to people's lives. And it's just really great to see it having an impact."
John is making a difference for many internet users worldwide, regardless of their economic status or geographic location. For him, the democratization of the web has a direct impact on designers and design teams as well. "There's no excuse now, right?" he asks.
"The internet has empowered all of us to be able to cultivate new skills, apply those skills, and create digital entities that don't cost a lot...If you have an idea, you can make it happen in a lot of ways, without a lot of money."
5Four Digital plans on continuing to create new illustrations to add to the Black Illustrations project. At the bottom of the product's website, there's even a link for making an illustration request. The team is dedicated to working with the community to figure out how to best make a difference with the project as it grows. For John, his primary goal remains to encourage others to create their own version of Black Illustrations, whatever that may be.
"I just hope it inspires people to heighten the aesthetics of the projects that they're working on with diverse image content. And hopefully, that it inspires them to create their own digital product, or even just sketch or doodle to get the creative juices flowing.”
