I am not a designer. I don’t claim to be capable of creating good design and I wouldn’t even claim that I have particularly good taste in design. I am, however, a fan of good design and I get asked about the graphics I use for my blog posts and video presentations quite frequently. Hence this post.
Graphics and design are important to me for all of my websites. The visuals of any site are what form the “first impression” and are therefore relevant to conversions and profit. Just like you dress well when you want to make a good impression, even though you know that your clothes don’t convey your personality, you should make sure that your website is visually appealing, even though you know the content is more important.
How to Enhance Your Site With Images
For any relevant page or post on your site, I recommend that you have at least one image above the fold. Most WordPress themes have the option to display a “featured image” to go with each post, usually displayed either immediately above or immediately below the post title. This makes a lot of sense, because an image right next to the title will help communicate what the content is about and it will help engage visitors.
The best images to use are those that somehow symbolize or summarize what your content is about and images featuring people (specifically, faces). People respond positively to images of other people, particularly images of good-looking people. Advertisers have discovered this for themselves long ago, which is why so many products are advertised with beatiful men or women, even if the product has absolutely nothing to do with them.
The second type of image to use on your site are of the “worth more than 1000 words” type. Whenever you are describing a process or an object, it makes sense to show an image (screenshot, flowchart, photograph…) along with the description.
See my post on how to speed up WordPress to see how you can add images to your posts without it slowing down the loading times too much.
Where to Find Images and Graphics
First, there are some premium sources of images. iStockPhoto is one of the most popular image sources online and it can be very useful. Whatever you need, they likely have a whole range of suitable images. Plus, for the web, you only need relatively low-resolution files, so the images come fairly cheap.
Finding free images that you are allowed to use without violating any copyright is a bit tricky, but not impossible. My favourite sources for free photographs are MorgueFile and Creative Commons Search. In the latter, I like to search flickr for images that I’m allowed to edit and use commercially:
I also really like to use icons, as web-images or as images for my slideshow-videos. You can find icons to match pretty much any purpose or topic, using icon search engines such as FindIcons. You can apply filters to find icons that match the style and color you are going for and to only show icons that are free to use, with or without attribution necessary.
It’s quite rare that an image is free to use for commercial purposes and also doesn’t require attribution. When an image requires attribution, simply link back to the source, either directly below the image or at the end of the post.
Finally, you can make and use screenshots, where applicable. To quickly create screenshots and even add simple annotations, I recommend Jing.
Less is More
In many cases, you’ll need to edit images to make them suitable for your site and you can do so using Photoshop, GIMP (which is like an open-source Photoshop) or any other image editing tool. At the very least, you’ll need to crop and resize many images, to make them fit in with your content. Of course, you could just upload the image in it’s original size and then shrink it by defining a new, smaller size in HTML, but that’s not recommended. Your site performance will be much better if you resize the image first, then display it at it’s full size, on your site.
When you are picking and editing images for your site, the most important rule of design to keep in mind is this: less is more.
Actually, that should be “less is better”, but you know what I mean. As a non-designer, the best way to make your graphics look good is to keep them simple. Fewer colors, fewer effects and a smaller scale almost always work in your favor. Here’s an illustration of how to and how not to add a square frame to a simple icon image:
Graphics for SEO
Apart from the engagement/conversion factors mentioned above, images also benefit your site in terms of SEO. On the one hand the alt-texts of images are an SEO signal that Google seems to pay some attention to and on the other hand, from my own experience, it seems like “media rich” posts are easier to rank than plain text posts.
To SEO your images, simply make sure that they have an alt-text defined, which includes a relevant keyword or two.
If you can’t find suitable images for your post and don’t want to spend money on professional stock images, you can also just use typography as an image. For example, you can have a headline or a quote and display it as an image, along with your optimized alt-text.
Here’s a separate post with more information about how to use fonts and typography.
Non-Designer Video
Here’s an off-the-cuff video of me creating a graphic for a blog post, applying some of the principles discussed in the post above:
I hope you enjoyed this post! If you have any questions or want to share your thoughts, please leave a comment below!
Hey There,
I just found your site via OnlineIncomeLab and wanted to say I like your posts, particularly those in the “Throw money at it” series!
I’m terrible at design but, even worse, hardly have any time to spend on it which is why I generally outsource most of it. Do you find it’s worth the time it takes to do all of the editing that you do?
Anyway…glad to find your site…will be bookmarking for future reference. Thanks!
Hi Justin,
Glad to have you on board!
To answer your question: no, I don’t tink it’s worth spending the time on fiddling with design. From a purely economical perspective, it would be smarter if I outsourced it. As I said in the video, it’s more of a hobby for me.
However, knowing where to find a couple of good images for free and knowing little things like the fact that people tend to respond well to faces, so you can use portraits to hook people into a post are very useful.
Hello Shane,
Thanks so much for another in your never-ending highly informative educational posts. Your modesty amazes me, as you seem to create so much material in such a short time. You are much too modest in your estimation of your design abilities. You have a natural eye for graphics design and I find all of your web posts, pages, videos, products, and more are all very visually appealing. When I started following you and purchasing your products I noticed that right away. Attention to detail and design is important to me. And you a very much the consummate professional.
I learn a great deal from you by just looking at your “stuff”. You seem to be a real renaissance man with more and more talents appearing each week. Thanks for taking the time to share all of your talents with us mere mortals, such as I, who toil away and know that I am very grateful for all you do.
Thank you very much, Charles! I believe first impressions are very important, online as well as offline, that’s why things like graphics are so important to me. :)
Another great free image website is stock.xchng – http://sxc.hu
When searching for an image, they also show you a sampling of what istockphoto has available for the same image search.
Thanks for the tip, Jacquie!
Thank you for the download for the video following this one.
Can we have a download for this one too? Helps a lot to have the download.
Don’t have to worry about cable going out.
Easier to scroll thorough it to find things again.
Hi Jer,
I just added a download link for the video. Thanks for the suggestion!
As a non-designer I am very grateful for this post and this kind of post. I find it hard enough to get a blog post done at all and then I have to know graphics as well?
Sheesh!
:-)
I’m off to read part 2 now!
I know it can seem like I get lost in details sometimes, but I’ve found that paying attention to details pays off.
I also used to think along the lines of “what does it matter, for a simple niche site?”. But recently, I’ve found that it makes quite a big difference for rankings as well as conversions, when you tweak such things as the readability of a site, add some simple graphics etc.
Shane,
what about image placement on an adsense site? I worry that any image on the page will pull eyeballs away from the money links.
thanks for your thoughts!
joejoe
That’s a good question. My theory is that having an image above the fold on an AdSense site will actually help, because people don’t click through to your site and then immediately click an ad. In most cases, they’ll first at least glance at your main content and then go for an ad. So, the image will reduce your bounce rate and make it more likely that you get clicks. Extra tip: have an image with a person looking in the direction of an ad-block. ;)
I will test images vs. no images once I get a higher traffic volume to my AdSense sites (I only have two of them, as I’m not much of an AdSense guy).
Hi Shane,
As a former sign painter and design artist, just wanted to pass on a little tip.
When you’re doing layout, in most cases, all text…other than the very bottom line, should be lower case, with the exception of the first letter of the word or sentence. Upper case only lettering goes on the bottom line…this is called a hard line.
You’re message will look more aesthetic and balanced.
Love all your help and advice,
Bob
Hi Bob,
Thanks for the tip! I’ve never heard of this principle before. Will try it out the next chance I get. :)
Hey…you’re welcome. Anything to help a struggling marketer…lol