So you wanna design social media graphics.

By Dani Ward | July 22, 2021 |

In case you didn’t know, I had a whole graphic design career for the decade-plus before I made the transition over to art. I actually taught graphic design theory and career-prep at the college level for 5 semesters. You could say design is kinda my thing, even though I spend many days now working on art…and, of course, the social media graphics I need to market my art.

People live more of their social lives online now than pretty much ever before. (Those of us who have disabilities that limit our ability to Get Out and Do Things were here before the pandemic, y’all.) Social media graphics have a much wider reach than they once did! And that means design decisions — in memes or educational graphics — are affecting more and more people.

A friend sent me a link to a series of graphics explaining aspects of Ehler’s Danlos Syndrome, lamenting the various inaccessibilities of the images. So I thought I’d take the time to do a quick walk-through of how to design successful information graphics for online distribution, using this existing set as an example.

I’ll start with an overview of what’s wrong, then follow up with how I addressed those problems. For those of you who are nerds like me and want to know the “why” behind my critiques, I’ll publish an in-depth critique over on my graphic design site, going over each slide and each decision.

What’s wrong with these social media graphics?

  • Title image for a series talking about Ehler's Danlos Syndrome. Largely white text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Hypermobile Ehlers Danlos Syndrome: what it is & why it sucks."
  • Largely white text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "What It Is. There are many proteins in connective tissue. One of the key proteins is collagen." Beneath the text is an illustration of what proteins look like.
  • Largely white text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "What It Is. In Ehlers-Danlos syndromes, there are faults in the genes that determine how the body makes collagen." Beneath the text is an illustration of scissors cutting into a strand of DNA.
  • Largely white text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Why It Sucks. Normal joints act like screws, joints with hEDS act like rubber bands. The muscles overcompensate leading to severe & chronic tightness + pain. But thats not all…" Included illustrations are 2 rubber bands, and a gender-inclusive torso with pain points shown on the neck and lower back.
  • Largely white text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Why It Sucks. These rubber band joints also cause joint instability. It does not take much for the with hEDS to have a joint move out of place. It sucks as much as it sound like it does." (Odd wording isn't typos, just literal transcription.) Illustration included is 2 rubber bands.
  • Largely white text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Why It Sucks. One of the other main symptoms of hEDS is chronic fatigue. When people experience pain, their brains go into overdrive to try and figure out how to locate + stop the pain. When you are in pain 24/7 it is both mentally and physically exhausting." Beside the text is an illustration of a battery running low on energy.
  • Largely white text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "If you love someone with HEDS… Be patient and believe them. Don't invalidate their experience just because they 'look' health. I promise they aren't just 'dramatic,' 'lazy,' or 'high maintenance.' Not all pain is visible." An illustration of a femme-presenting person holding a large heart is included.
  • Largely white text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Thank you for your support!" The BRÜCC logo is above the text, and below the text are icons of a bookmark, paper airplane, heart, and speech bubble.

The design template.

The first two things I think when I glance at these images is, “Wow, that rainbow is HUGE” and “Hmm, it’s kind of hard to read.”

First things first, though. That rainbow takes up a lot of space. It draws so much attention to itself that it fights with the text for which is more important.

In fact, it’s hard to standardize much of anything when that graphic element uses so much space. Text size, margins, text and image placement — everything suffers from this one design template decision.

The logo is strangely prominent in every slide, as well. Branding is important, but this feels a little bit too much.

Typography.

Image originally from thedisneyprincess.tumblr.com. It's 4 stills from the movie, The Incredibles. The antagonist, Syndrome, is monologuing to Mr. Incredible about the villain's inventions. He says, "And when I'm old and I've had my fun, I'll sell my inventions so that everyone can be superheroes. Everyone can be super. [chuckling] And when everyone's super…no one will be."
You can learn a lot about design from The Incredibles, actually.

There are a few reasons the text itself is hard to read. It’s difficult to look at stark white text against a black background for extended periods of time. And with all of the text being white? It’s genuinely painful to read.

Plus the thin strokes in the letters in the headlines almost disappear into the darkness, making the letters harder to decipher. Between that and the headlines being all-caps, I have to spend more time looking at the headlines than I want to. It’s hard to skim.

The main text being all italics is a distracting decision. Italics are usually saved for emphasis or short sections of text. Like Syndrome (almost) said: “When everything is emphasized, nothing is.”

Since the headlines and the main text are both bold and not terribly different in size, they sort of blend together on slides with a lot of content. There’s not much of a hierarchy going on.

Color use.

I already touched on why using white for the text isn’t great. But in general, I really like the color scheme. It’s vibrant and reflects the brand colors really well.

But the colors use is kind of…willy-nilly. (That’s the technical term, you know.) I mean, the colors indicate emphasis on specific words. But there’s no rhyme or reason to why certain colors are used for certain words. It’s trying to add emphasis to emphasis, but ends up feeling chaotic instead.

A suggested redesign.

  • Title image for a series talking about Ehler's Danlos Syndrome. Largely white text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Hypermobile Ehlers Danlos Syndrome: what it is & why it sucks."
  • Very light gray text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "What It Is. There are many proteins in connective tissue. One of the key proteins is collagen." Beneath the text is an illustration of what proteins look like.
  • Very light gray text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "What It Is. In Ehlers-Danlos syndromes, there are faults in the genes that determine how the body makes collagen." Beneath the text is an illustration of scissors cutting into a strand of DNA.
  • Very light gray text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Why It Sucks. Normal joints act like screws, joints with hEDS act like rubber bands. The muscles overcompensate leading to severe & chronic tightness + pain. But thats not all…" Included illustrations are 2 rubber bands, and a gender-inclusive torso with pain points shown on the neck and lower back.
  • Very light gray text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Why It Sucks. These rubber band joints also cause joint instability. It does not take much for those with hEDS to have a joint move out of place. It sucks as much as it sounds like it does." Illustration included is 2 rubber bands.
  • Very light gray text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Why It Sucks. One of the other main symptoms of hEDS is chronic fatigue. When people experience pain, their brains go into overdrive to try and figure out how to locate + stop the pain." Beside the text is an illustration of a battery running low on energy.
  • Very light gray text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Why It Sucks. When you are in pain 24/7 it is both mentally and physically exhausting." Above the text is an illustration of a battery running low on energy.
  • Very light gray text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "If you love someone with HEDS… Be patient and believe them. Don't invalidate their experience just because they 'look' healthy." An illustration of a femme-presenting person holding a large heart is included.
  • Very light gray text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "I promise they aren't just 'dramatic,' 'lazy,' or 'high maintenance.' Not all pain is visible." An illustration of a femme-presenting person holding a large heart is included.
  • Very light gray text is on a black background, with a 3-color wavy rainbow above it (the colors are magenta, yellow, and cyan). The text reads, "Thank you for your support!" The BRÜCC logo is beneath the text, and beside it are icons of a bookmark, paper airplane, heart, and speech bubble.

Template changes.

The original design clearly had some sort of template in mind, but it didn’t seem to account for the information it needed to display.

In my template, I made the rainbow graphic much smaller and more dynamic. I wanted it to still have an impact without taking up a full third of the graphic. So I made the logo smaller, as well, and tucked it up in the corner out of the way of the content.

Finally, I standardized the text margins. Now, the text on each slide begins where viewers expect it to begin.

Typography changes.

I wanted to honor the spirit of the original typography. So I chose a different font for headlines that still has that thick/thin dynamic but with slightly thicker lines. I also decided to set all the headlines (excepts for the title image) in lower-case letters. It’s more readable and provides a nice contract to the elegance of the typeface by making it seem more approachable.

The body copy (main text) is now a sans-serif typeface. There is debate on whether sans-serifs are easier to read, but I chose this typeface to contrast with the headlines and be easy to read.

The only text that is italicized now is text that has a specific emphasis.

Finally, the size difference between the headline text and the main text is increased to help with skimming.

Color changes.

None of the text is white now. It is very light gray instead.

Instead of having multiple colors used to highlight various bits of text, I chose one of the purples from the logo and paired it with italics to emphasize text.

Added slides.

I split 2 of the original slides, making for a total of 10 slides instead of 8. This allowed me to draw attention to specific information and to give information room to breathe and not be crowded. I kept the number to 10, however, since that’s the maximum number Instagram can display. This content is repeatable there.

Final thoughts.

All in all, I spent about 2 hours on this redesign. I made small changes, but they drastically affect the ease with which these images can be skimmed, read thoroughly, and understood. They also remain faithful to the brand presentation from the original designs.

Little changes can affect big change. Small designs decisions can make your content look better and be more accessible. And when you’re designing educational graphics on a type of disability, accessibility is particularly important.

Speaking of disability and accessibility…

Disability awareness and justice is an important topic to me. Accessibility is important to me. It ought to be an important topic to us all. But it affects me specifically, because of my multiple disabilities.

Every single one of us will become disabled. It’s a fact of life, of entropy, of growing old. But disability can also come at any time with no warning. It can be temporary. Or it can last the rest of your life.

And if you live in the United States, where marriage equality isn’t guaranteed for disabled folks, it is absolutely in your best interest to pressure your state representatives to support the SSI Restoration Act.

The Supplemental Security Income Restoration Act of 2021 would, among other things:

  • key SSI benefits to at least 100% of the federal poverty level and index it to inflation
  • raise the savings and asset limits from $2,000 to $10,000, indexed to inflation
  • raise income limits from both work and other sources
  • eliminate the 1/3 benefit reduction most recipients endure for the “in-kind help” of housing or food
  • eliminate the marriage penalty

These changes — the first update to the program since 1989! — would seriously increase the quality of life of every SSI recipient.

Get involved (and get a free print!)

"Nothing About Us Without Us" design. The design itself is prominently teal and lime green on a very dark teal that's almost black. Everything looks as though it could have been drawn with a thick marker. The central design is a teal speech bubble with an uneven white border. A carat points up and right from the upper left corner of the speech bubble, and another carat points down and left from the lower right corner. The lettering is drawn in such a way that the immediate message reads, "Nothing without us." Those words are huge, bold, and white with dark teal outlines that disappear in one-point perspective behind the smaller cursive "about us" that's written in lime green between the lines. There are accent marks (that I often call "jazz hands") on either side of "about us" that help draw attention to the phrase and give it an interesting shape. The handle "@fatgirlmedia" is written in lowercase letters beneath the design within the speech bubble. Surrounding the speech bubble are quite a few illustrated elements representing various disabilities. These elements include, starting from top left and going clockwise around: 2 hands symbolizing interpretation for folks who are hard of hearing, a brain with a lightning bolt as its stem to represent mental health struggles and disabilities, a prescription bottle, an insulin reader, a walker/rollator, a prosthetic arm, a syringe, a cane, a stethoscope, a strand of DNA, a person in a wheelchair, an ear with soundwaves crossed out, an infinity symbol signifying neurodivergence, a pair of sunglasses, a heart with heartbeat radiating from it, a scale, a prosthetic leg, an epipen, and a crutch. There are also capsules and tablets littered throughout the illustrations to add some visual balance. Finally, underneath the speech bubble are the same words, written in Braille. This print also comes with the Braille punched through, for those who request it.

I’ve not seen this bill get a lot of mainstream attention. It’s possible (probable, even) that this is the first time you’re hearing of it.

As such, please — please take the time to contact your representatives about this bill. If you use Resistbot, you can text “sign PSLOAE“ to send an already drafted letter of support. Make sure you inform the folks in your life about the bill and the life-changing implications it has. Refer them here. Help them contact their representatives, as well.

For incentive and as thanks, I’d like to offer you something.

If you post publicly that you’ve contacted your representatives, include screenshots or other evidence and tag @FatGirlMedia. When you do that, I’ll send you a free 5x7in print of the Nothing About Us Without Us design. Just DM me on social media with the link to your post, or email me at dani@fatgirlmedia.com. Specify whether you’d like Braille imprinting, as well.

This offer will last until the bill has been voted on.

We can make a difference, together. Disability isn’t a nebulous topic somewhere out there. Everyone is going to be disabled at some point in their lives. Let’s do our part to take care of ourselves and each other.

Posted in Tutorials and tagged , , , ,

Have something to say?