Embracing Diversity in Design
Designing for every single user isn’t a hindrance — it wholly amplifies your design.
We’ve all seen it. The website hero image that shows a group of confident, young individuals working together. Celebrating. Smiling. So full of optimism and hope. A desperate attempt to feature one subject from every race or culture. I understand why designers might choose such a photo. They’re just trying to cover all their bases or be “representational.” But in reality, they’re simply furthering clichés around what a “diverse” group of individuals look like. And we have accepted it. This tokenism. This inability to just be real.
Photos, of course, aren’t the only things that keep a brand stagnant and outdated. As our team has started looking at ways to enhance and evolve our own brand, I’ve been thinking about how to make sure Friday’s language and visuals truly represent our team and our clients. And that approach is something that, I believe, every organization would benefit from. So here are some quick and easily implemented ways to help your brand (and ours) acknowledge the marginalized and underrepresented individuals we gratefully serve.
Photography
Stock photos
Images are there to guide our expectations. To set a mood, a norm, a meaning. And if all we adhere to is stereotypical representation, we’re just reinforcing a sense of mediocrity and insincerity. Fortunately, there are so many resources to help designers make better photo choices, specifically when it comes to inclusion of multiple races, genders, ages, abilities, and bodies. However, as we’re aiming to be inclusive, it can be tricky to fall into stereotypical imagery. But don’t worry, here are some super helpful stock image sites that will help you avoid “standard” ideas and proudly showcase some realness.
Resources:
TONL | Nappy | The Gender Spectrum Collection
Alt-text
Alt (alternative) text is a crucial tool to get your message to the members of your audience who are either unable to see the screen or have opted out of downloading images. A field that allows designers to type in a quick description for email and social-media, alt text often defaults as the name of an image, but it’s even better to provide a literal explanation for the reader to visualize. Consider the context and think about why the image is there to determine your alt text description. Plus, being specific and illustrative not only helps your audience — it also helps you determine if an image is doing the work it needs to do.
Resources:
Accessibility and Usability at Penn State guidelines | Alt Text for SEO: How to Optimize Your Images
Color
ADA compliance
One of my favorite parts of creative work is pushing the boundaries of color, exploring the endless amounts of combinations, hues, tones, grayscale, monochromes, and everything in between. So when I first began to work on websites that needed to comply with WCAG (Web Content Accessibility Guidelines), I immediately felt frustrated and confined. But as I started to apply higher contrast colors, I grew more sensitive to the many ways people rely on color for guidance — whether they’re colorblind or not. So even when sites or designs don’t necessarily need to be WCAG-compliant, I’ve found that it’s good practice to deliberately heighten the contrast in my color choices — or even just play with the ways my colors are applied — to advance the color palette and design to a whole new level.
Resources:
Web Content Accessibility Guidelines | Color Contrast Checker
Dark mode
Users have been pushing for dark mode access to more websites and apps than ever before. But what does that mean? The option of toggling text and background color? Not really, but unfortunately, that’s what I find in a lot of sites. If you want to design a dark-mode version of your website, don’t take the lazy way out by simply focusing on the obvious inversion. Make sure to follow guidelines for WCAG contrast compliance on all things — images, buttons, text, and graphics — to maintain beautiful color balance.
Resource: 99Designs Tips for Dark Mode Design
Words
Collateral translation services
With more than 43 million native Spanish speakers in the U.S. alone, using a translation service to reach your audience is a no-brainer. Google Translate is a really helpful free tool, but it has its flaws. So, if you want your humor and wit to come across in multiple languages, consider a paid translation service instead. There are plenty of options out there, ranging from automated bot scanners to actual human translators. Have fun and find out how incredible your design looks in French. Très bien.
Resource:
Bablic
Sound
Closed captioning/transcripts
I can’t say precisely how many videos I watch with the sound on, but I know that it’s not very many. Whether I’m scrolling through Insta or watching Late Show clips, as a new mom, I’m always trying to keep the sound as low as possible. Which is why I’ve got a deeper appreciation for closed captioning. Although many platforms provide closed captioning for free, it’s often forgotten. So remember that many members of your audience choose to turn down the volume or have to use captions in order to enjoy a video, but they can’t because their needs were overlooked. It’s easy enough to use the free services, so why don’t we? And if captions are unavailable for any reason, transcripts are a great alternative.
Resource:
Google closed captioning
User Interface
Mobile menu location/ease
For more than a decade, web designers have used those 3–4 stacked lines we call “hamburger icons” for site navigation — almost always in the right corner of every screen. And unless you’re left-handed, you may not realize what a burden it can be to reach across the screen to get to it. But now that screens are getting larger, as even right-hand users are having trouble, one clear solution is becoming a trend: a bottom-centered menu, which is much more accessible for all users. Sure, it does create a hiccup for users who aren’t expecting it, but I’m confident that users will adapt rather quickly, and be glad they don’t have to put down their coffee and hold their phone with two hands to navigate your site.
Resource:
How to Implement Bottom Navigation
Site load time
Many of us have access to fast, reliable internet in our homes and offices, but millions of Americans in rural and low-income communities don’t. Which means websites can take forever to load. So until internet providers make these areas a priority, there’s something designers can do to help ease the pain. And it’s all about the images. You can optimize images for web view by using JPEG 2000 for photographs and PNG for graphics, and keep images under 100KB whenever possible. It’s easy to do with most photo-editing software (i.e., Photoshop) or even through a CMS plugin. So there’s no reason not to.
Resource:
Page Speed Insights
Quality Assurance testers
Lastly, after you’ve done all the hard work of applying thoughtful and inclusive design, make sure to test, test, test. If you go beyond the members of your team and engage a wide range of users, they’ll identify issues you never thought about. So reach out to friends and colleagues and let them know what issues you’d like them to focus on. Set up an easy process with a checklist, offer incentives, and then offer to do the same for them.
Now let’s get to work — connecting to a deeper audience that will only heighten and elevate our design.
Get stories like this one, along with inspiration from the world of social-impact strategy and graphic design, by subscribing to Friday’s monthly newsletter.
