Blog Tip Thursday: Design Tips for Better Blog Graphics

Every week, we share one of our favorite ‘how-to’ posts about blogging, social media, and the community we LOVE to love. Our desire is you consider HLB a resource in your efforts to blog BETTER – we want to be stronger bloggers ourselves, and we see the desire for stronger posts and cleaner designs. We understand wanting to know the BEST plug-ins, aps, programs, and resources to keep your site in tip top shape. And nothing makes us nerd-out more than getting super meta about all things blog-world. We’re not experts, we’re simply bloggers ourselves – sharing our own experiences, tips and tricks of the trade each Thursday with a BTT post. We welcome your questions, your suggestions for future topics, and your ‘how-to’ post recommendations at healthylivingblogs@gmail.com!

Hi — I’m the blogger behind life + running. When I’m not blogging, sweating, crafting or eating I’m a professional graphic designer. I’m headed to the HOW Design Conference in Boston this week, and thought it would be appropriate to share some design tips and inspiration with you.

Follow some of these tips to make your blog graphics memorable and easy-to-read. I can’t share all my expertise with you in one post, so if you have questions, shoot me an e-mail at calee [@] chimesdesign [.] com, or tweet me.

The basic idea: Keep it simple!

You have your readers’ attention for 7 seconds — assuming that the viewer is on your blog. If the viewer sees your graphic on another site, like Pinterest or through Google Reader, they may be scanning through quickly and you get about 1-2 seconds (max) of their attention. The simpler the graphic, the easier it is to read and the better your readers will remember what you had to show them.

Here are 10 tips for better blog graphics along with examples I’ve created of the good, the bad and the ugly.

1. Choose easy-to-read fonts and only use 1-2 of them at a time — here’s a great tutorial on font pairing. Use the more interesting or weighty font for words you would like to emphasize.

• If putting type on an image, the simpler the font, the better. It’s the image’s job to catch attention and the text’s job is to inform. The text should not detract from the image. One display font for emphasis is fine, but don’t go too crazy — and watch the contrast. Put a color block behind your text if need be.

• Limit your color choice to 1-4 in the overall graphic, and 1-2 for text on an image. Too many colors is confusing to read.

• Aim for high contrast between the background and the text.

• Don’t outline text, or use drop shadows, glows or any other sort of decoration on your text. This inhibits readability.

• Same goes for photos — don’t use filters (like sketch, comic, etc.) if you want your image to be recognizable. These should be used only to create an interesting background, but don’t expect the viewer to recognize what’s in the image. I can’t even bring myself to make an example. Just don’t do it!
• If using multiple sizes of text, keep it to 1-2 and make the size difference very apparent.
  

• All caps is hard to read if used with frequency. Hmm … maybe I should adjust my h1 and h2 on my blog.

• Stuck on color? Look at your favorite fashions, fabrics, photos or sites for color scheme inspiration. Colourlovers has ready-to-use palettes. Use the eyedropper tool in photoshop or illustrator to pluck your favorite colors (hint: the scheme I used for these graphics came from a painting). Pinterest is a great place to find images from which you can pluck great color schemes.
• Use common fonts, color, pattern, or other graphic style for your graphics. Not only does this further enhance your blog’s identity, it makes designing graphics much easier. I use the same pairing of fonts that I’ve used since starting chimesdesign.

Looking for more inspiration? Here’s a collection of what I deem to be good blog graphics.

Now that you’ve got the basics about graphics, let’s talk intellectual property.

If the image isn’t yours, you need to credit it to the original creator. Period. I can’t stress the importance of this.

I’ve heard professionals say that if you can’t recognize the original image then you don’t have to credit it. That rule may hold true in print (I still credit the owner), but on the web you can easily link to the creator by adding a [ source ] tag (link goes on source) below and/or by linking the image and adding text as to who originally created the image. If you can’t find the original post for an image, credit its creator as best to your knowledge by linking to that person’s main website. Chances are that the creator will contact you to correct the link if necessary.

If you get your image off Pinterest or another social bookmarking site, you might have to do some extra clicking and research to find the origination of the image. In the end it’s worth doing because the creator of the image could stumble across their image on your site and be very upset with you and in some cases this could result in a lawsuit.

Regarding images you create? Watermark them with your website. It saves the rest of us time finding the original owner if we are borrowing images AND it potentially brings traffic to your site when people share your images.

Give credit where credit is due — to yourself and to others.

\\\\\\\\\\\

Do you have any tips for creating web graphics? Is there anything that you see out there that you absolutely hate? Is there anything you love and would like to see more of?

Find this post valuable? Share it!

•