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. Woo Hoo! Always glad to see another blogger that uses Illustrator (or Photoshop) for photos and graphics. That’s what I was “raised” on (well, it was new when I was in high school anyway).
    One thing though- I DO use a slight drop shadow on some text that lays on top of photos (like my header) so that it stands out from the picture. But, I’m selective about it, and prefer for it to look more like a soft outline than a really obvious (or distant) shadow.

    1. chimes says: Reply

      I am with you on that. I aimed this at nondesigners and most ppl don’t know the difference between functional and a style.

    2. I basically LIVE in Illustrator. I really don’t remember how to use anything else. I’ve been out of practice for too long. 🙁

  2. […] of the 30 things I want to do in my year of 30.  One day I well learn to make my lists pretty like Calee but I am not smart enough […]

  3. […] I gave you tips for designing blog graphics. Today? Tips for resumés and other job search […]

  4. DAMMIT CHIMES. NOW I WANT TO REDESIGN MY BLOG. AGAIN. MORE. WHATEVER. I DON’T KNOW. MY CAPS LOCK APPEARS TO BE ON AND I APPEAR TO BE UP PAST MY BEDTIME OR I’D PROBABLY OPEN ALL OF MY ADOBE PROGRAMS RIGHT THIS VERY MINUTE AND TINKER. SIIIIIIIIIIGH.

    1. chimes says: Reply

      lol You could just do a new header and buttons. Super easy fast changeout!

  5. Marissa Roberts says: Reply

    I learnt so much from this post, thank you! I’ve only just started really getting into taking and editing my own pics for my blog and I’m LOVING it, but I don’t have much natural talent when it comes to design. The chicken recipe examples are amazing 🙂

  6. Great tips! Goodness knows I need help with these things. 🙂

    1. chimes says: Reply

      Thanks! Also, I love your blog name.

  7. Thanks for this post! I’ve started to utilize your tips and I think I said “well duh” to myself when I was done making graphics. Thanks so much for your help!

    1. chimes says: Reply

      No problem! I’m trying to be better about sharing design tips since a lot of people have to use graphic design in their daily lives. I’d rather see some decent designs than a bunch of crappy ones. 😉

  8. These are great design tips for blog graphics. Blog owners and designers are surely grateful of these ideas. Thanks for sharing.

  9. […] 10 Tips For Better Blog Graphics What Is Aperture? Photography 101 Most Popular Photography Tips, Tricks & Hacks of 2011 Ultimate Social Media Sizing Cheat Sheet Manual Photography Cheat Sheet Create Your Own Infographics 30 Places To Submit Your Photos Grab My Button Code Generator 5 Free Photo Editors 10 Household Items To Improve Your Food Photography How To Remove Background Image in Powerpoint How To Make A Rollover Image 10 Amazing Articles On Iphone Photography How To Use Images On Your Blog How To Create An Animated GIF […]

  10. […] Kit via Katy Widrick Pick the Right Target for a Conference Sponsorship Pitch via Blogging Basics 10 Design Tips for Better Blog Graphics via Life + Running How to Write an About Page via Musings of a Housewife Spinach Goatichoke Dip via […]

Leave a Reply

%d bloggers like this: