{CUE MOVIE ANNOUNCER VOICE}
In a world…where bad fonts kill good blogs, and unsuspecting people throw their phones in horror and recoil from their laptop screens at the sight of clashing colors on Instagram…there is a way…to restore order and sanity to an internet under attack from the villainy of bad graphics in need of design makeovers.
Or, if you prefer a little less drama…
Do your graphics need design makeovers?
Stay tuned…
Your graphics are the first part of your blog or website someone sees. Whether it’s a blog post, a Facebook ad, or an Instagram feed, the graphics tell your story long before anyone reads a word.
So, what story are your graphics telling?
Let’s take a look at three graphics gone bad – like, turn into a crazy tyrant and take your blog hostage bad – and then, for grins and giggles, we’ll fix them! It’ll be like My Fair Lady, when Rex Harrison turned Audrey Hepburn from a grubby flower girl into an evening-gown-and-hair-jewels princess. Like that took a lot of work.
On to the tales of horror! And the inevitable happy endings.
We’re using quote graphics to tell our tale, but these tips can apply to any blog graphics.
Land of the Screaming Colors
Design Makeovers: #1
Colors can start out so sweetly. You pick a pink, a blue, a yellow. What harm can colors possibly do?
Oh, just seer your eyeballs and make you start seeing spots when you look away, that’s it. And if you allow color combos like this on your blog, people WILL look away…for good.
THE BAD:
Where this goes wrong:
- The colors scream at you. Too bright, too clashing, no neutrals to provide relief.
- The fonts (Comic Sans and Curlz MT) are WAY too overused, and have officially joined the Never-Use-These-Fonts-Ever-Ever-Ever list. Add Papyrus to that, also.
- Everything is centered except the green stars at the top.
- The text breaks at weird places, making it difficult to read the quote.
THE FIX:
This is an extremely simple graphic. Two fonts, three colors, and done. I could change the quote and colors, but leave the basic design in place and make a whole new graphic if I wanted.
Here’s why this works:
- The line breaks happen at natural places in the quote. It helps your brain follow the words better. And I am all about helping my brain.
- The colors don’t scream at you anymore. I toned down the yellow and balanced it with some nice teals. And the text is in an easy-to-read dark gray.
- Simple wins.
One more thing – the grammar nerd in me insists that this read:
“When life gives you lemons, make lemonade” (Grammar Nerd Me desperately wants a comma.)
But the designer in me is adamant that a comma would throw off the balance of the text.
I know, my head is an interesting place.
Well, this graphic satisfies both Me’s. I can pretend that the comma is there, and just hidden by the yellow overlapping the word “lemons”. I can move on with my life.
Night of the Hidden Text
Design Makeovers: #2
Sometimes, even if you get the color right, another culprit can be lurking around the corner, just waiting to trip you up.
Like a crazed, axe-collecting psychopath drawn to clueless coeds and hapless designers. (You gotta watch out for those, people.)
Simple truth: If you can’t read the text, the design doesn’t matter.
THE BAD:
Where this goes wrong:
- You have to strain to read what the graphic says! The letters blend into the background too much. You don’t want to give your readers extra work just to hear you.
- The font (Arial) is also a little boring. It’s more suited to a business document.
THE FIX:
Notice that, like the first example, this is still a pretty simple design. One font, some semi-transparent bars, and a great photo. Why add more?
Here’s why this works:
- The white font stands out better against a dark background. When in doubt, go for contrast.
- The semi-transparent bars help the font stand out even more, but don’t get in the way of the design. Oh, and it lets me throw in some brand colors.
- The woman in the photo is off to the side, which gives me room for the text. Not everything has to be centered.
- Simple wins.
I encourage you to try out the semi-transparent bars on your next graphic. It’s such a great little trick, and can work with almost any design scheme. Just change up the fonts and the colors of the bars, and you have an entirely new style – but your text will always be legible!
Here’s a tutorial to get you started: How to make an Instagram graphic in 15 minutes.
Tale from the Effects Nightmare
Design Makeovers: #3
Several years back, you saw text effects EVERYWHERE. Drop shadows, embossed text, glowing text, and all in one design! It was like an outbreak.
Well, in some places, those effects keep returning – like zombies that refuse to die quietly.
THE BAD:
Where this goes wrong:
- Drop shadows have their place. But on dark text, a drop shadow just makes the words look fuzzy.
- Embossed or beveled text (like in “Today”) had a moment about 10 years ago. Now, it just dates an image. It’s the “sparkly jeans and a side ponytail with a big neon scrunchie from the 80’s” of the design world. (Which I totally rocked, by the way.)
- Outer glows, inner glows, and any other glows (like in “adventure”) are similarly dated.
- The background stripes, glowing boarder, and beveled dots aren’t adding anything to this image – they’re all just competing for attention. There’s way too much going on.
THE FIX:
Just like the first two examples, the hero of the day is simplicity. I did some fancy arranging with the text, but it doesn’t compete with the beautiful background photo. Everything plays well together.
Here’s why this works:
- There are drop shadows here, but they’re properly used. They exist only to make the text easy to read, and they’re really only visible where the white letters overlap onto the white part of the photo.
- The text is all nestled together so that the important words stand out, and the whole quote is easy for the eye to follow.
- Simple wins.
Your blog graphics can have a simple ending with a few design makeovers.
I know we used some pretty outrageous examples of “blog graphics gone bad,” but keep in mind, I had some pretty hideous B-movie horror stories to live up to.
But just like summer-break coeds never think they’re staying in a cabin haunted by a murderous poodle still looking for a bone to gnaw, it’s entirely possible to make some of these mistakes simply because you don’t know to watch out for them.
One more reminder…
TODAY’S TAKEAWAYS:
- Screaming colors are rude
- Illegible text is mean
- Drop shadows won’t save the world
OR, TO PUT IT ANOTHER WAY…
- Design doesn’t work if you can’t read it.
- Everything should work together – not compete.
- Simple and effective is better than loud and illegible.
Simple wins.
What a happy ending.
RELATED POST: One Month of Instagram Graphics in One Hour
Design Assets I used:
- Example 1
- Bebas Neue (light)
- Angelova Monoline
- Example 2
- Bebas Neue (regular)
- Woman with backpack
- Example 3
