Design Week Kickoff \\ 10 design tips for better blog graphics – life+running

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

design week 2012 graphic

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.

design tips for better blog graphics button

[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.
    example of a bad font choice using fancy and hard to read type
    example of good font choice using easy-to-read type with minimal use of display typefaces
  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.
     example of too many fonts used on an image making it hard to tell what the image is and what the text says

    example of easy to read type on an image that doesn't detract from the image
  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.example of too many colors being used in text, making your text hard to read
  4. Aim for high contrast between the background and the text.
    example of too little contrast
  5. Don’t outline text, or use drop shadows, glows or any other sort of decoration on your text. This inhibits readability.example of unreadable outlined text in a graphic
  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.
    example of poor size contrast in text
    example of good size contrast in text
  8. All caps is hard to read if used with frequency. Hmm … maybe I should adjust my h1 and h2 on my blog.example of all caps being hard to read
  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.
    example of how common graphic themes tie your blog graphics together
    example of how common graphic themes tie your blog graphics together
    example of how common graphic themes tie your blog graphics together

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.

33 Comment

  1. And remember, search engines and blind people can’t see your images, so always use the alt attribute to describe your graphic.

    IMHO i disagree with #5, but the line between subtle and obnoxious when it comes to drop shadows is a fine one.

    1. chimes says: Reply

      Ooh good point about the ALT tags. I might have to add that to the version that I sent to HLB for them to post. Also, Pinterest now uses the alt tags as the text to post.

      I need to be better about alt tagging. I’m terrible at it.

      I was aiming this post at people who don’t have a design background, so I just decided to say NO drop shadows or outlines. I think they’re good for web graphics when necessary to help readability, but you’re right — the line is VERY thin and people without a design background probably don’t understand the difference between subtle when necessary and obnoxious.

  2. i would like a hands on tutorial. Can you come visit?
    xxoo

    1. chimes says: Reply

      Girlfriend, I would LOVE to come visit you! There’s a quilt conference in Austin in February of 2013. I MIGHT go to that. Maybe. Otherwise I’m really wanting to take Mark to Austin. 🙂

  3. YAY! I can comment!

    Thanks for the tips in this post! I wish I knew more about graphic design but haven’t had a chance to learn yet – this is a great quick tips post! I win at fonts on my blog by just not using them… 🙂 Someday I’ll learn how!

  4. These are great!! (And I need to listen to a few of them, ahem.) I especially like the graphical illustration/variations of the words on the bbq chicken recipe. What a difference some of your tips really make!

    1. chimes says: Reply

      Glad I could help! I think you’ve been doing a great job with yours. There are a few blogs that consistently have graphics like the first BBQ chicken one, which prompted me to write this post.

  5. oh man! What a great tutorial! Tweeting it up now!

    1. chimes says: Reply

      Thanks, Lindsay! I actually sent this to HLB for a Thursday tips post, but decided that I’d kick off the week with this too.

  6. Good information here! What kind of software do you use to create those blocks with words?

    At one point I figured out how to make a blog grab button…but now I can’t remember what I did.

    Also, what the heck is alt attribute?

    1. chimes says: Reply

      Hey Amanda! I used Illustrator for these. I can’t remember if you’re still a student, but you can get an educational version of Adobe’s software for pretty cheap. Otherwise if you look on Amazon or Ebay for the previous version of the software, you can get it cheap too. You can go to Adobe.com and download a trial version if you wanted to play around with it. I use photoshop too, but mostly illustrator when I’m putting type or illustrations on graphics.

    2. chimes says: Reply

      OH and ALT tags … there should be a field when you go to add photos to your blog that says “alternate text”. Fill it in. 🙂

  7. […] P.S.  If you’re a blogger who makes their own images (for recipes or workouts), you simply MUST read Calee’s guide to better blog graphics!!  Go here. […]

  8. Great tips! One (probably stupid) question… how do you add text to pics? My basic iPhoto/Flicker photo editing doesn’t give me an easy option (as far as I can see).

    1. chimes says: Reply

      Hey Laura!

      I use adobe illustrator and/or photoshop to add text to the pix.

      You could try out a couple of these: http://www.apartmenttherapy.com/12-free-photoshop-alternatives-145697

      Or if you want to spend the $, I recommend photoshop vs. illustrator. Illustrator is better for tweaking text BUT photoshop gives you more bang for your buck because you can edit photos in it as well. You can download a free trial from Adobe.com. If you look on Amazon.com you could get an older version of the software on the cheap.

  9. This is so helpful! I am graphics illiterate and am trying to figure it all out… I needed this!

    1. chimes says: Reply

      Glad to help! 🙂

  10. Katie says: Reply

    Awesome tips, Calee!!

Leave a Reply

%d bloggers like this: