Design for Non-Designers: Graphics

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: [thrive_borderless type='custom_code'] [/thrive_borderless]   Download Video I hope you enjoyed this post! If you have any questions or want to share your thoughts, please leave a comment below!