Design Week Kickoff \\ 10 design tips for better blog graphics

Welcome to design week on life + running! Besides sweating, crafting and eating I’m also a professional graphic designer. I’m headed to the HOW Design Conference in Boston tomorrow, and thought it would be appropriate to share some design tips and inspiration with you.

Today’s topic: Blog graphics. From buttons, to headers to photography, every blog has to have graphics.

[pinit]

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.
   
   
2. 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.
    
   
   
3. 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.
4. Aim for high contrast between the background and the text.
   
5. Don’t outline text, or use drop shadows, glows or any other sort of decoration on your text. This inhibits readability.
6. 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!
7. If using multiple sizes of text, keep it to 1-2 and make the size difference very apparent.
   
   
8. All caps is hard to read if used with frequency. Hmm … maybe I should adjust my h1 and h2 on my blog.
9. 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.
10. 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.
    
    
    

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.

EDIT: My fabulous friend Stephanie, who’s actually a web developer and designer pointed out that it’s good practice to ALWAYS remember to use the ALT text to describe your images because blind people and google search can’t actually see your images. Thank you, lady! I may have gone back and alt tagged all of these images.  

\\\\\\\\\\\

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? 

PS: I’m guest posting over at Oatmeal after Spinning today and giving away one of my creations from my etsy shop.