Your blog post thumbnail will play a big part in how your users see your website, and how they navigate it. A well designed post thumbnail can really engage your visitors and help encourage them to explore your website.
Examples of Post Thumbnails
A very Unique Solution on Tutorial9
Introducing, a true master at making an interesting post thumbnails, Mr David Leggett. In this case a very bold & unique use of the content (icons) to create a memorable thumbnail.
Clean and crisp thumbnail on AppStorm
A very clean lighting effect in the background with a modern font & great colors to catch attention. Notice the 1pixel white drop shadow on the word “interview” – a simple & effective approach.
Keeping your Photographs Relevant (UX Booth)
Another fantastic example from David Leggett. This time he’s not relied on his skill in Photoshop, he’s simply relied on that old favorite the photograph. A good looking, and relevant photo perfects your content perfectly.
Clever use of Screenshots on Obox
This example by Obox shows how placement of the elements on the thumbnail can generate interest. You get a sneak peak at the content with some cleverly placed screenshots with a good background lighting effect and the all important text which looks fantastic and the contrast is perfect.
Picking the Perfect Image, Courtesy of DesignShard
Again, Keeping your image relevant is a must. And in this example another photo, but it has 3 things: simplicity, visual impact and relevance.
OutlawDesign Makes the Thumbnails Part of the Design
Two great examples on Outlaw Design Blog. We see a stunning Photograph on one, and on the other one of the logo’s from inside the post has been chosen for the thumbnail, a great visual impact.
You can also start to see how the blog design benefits from showcasing multiple good looking thumbnails. The post thumbnails really become part of the design in this case.
UxBooth again with Text Over Photographs
Using fantastic looking text on top of some really appealing images can be a real hit. This is a great example of strong typographic elements on top of a crisp & relevant photograph.
WebDesignLedger Improve Exploration
Apart from looking great, a relevant & good looking thumbnail can help visitors navigate through your posts. This is particularly important if you have a lot of posts on your blog or site.
WebDesignerDepot Keep it Simple & Effective
If you are lucky enough to be writing about something that includes a lot of great looking content, show off this content. It’s not just a quick solution but a very effective one, and again it would help people who are scanning your content understand what the post includes.
Fubiz Lets the Image do the Talking
Layout can play a big part in the effectiveness of your thumbnails. This example uses quite a large image with a simple line of text. For me these are very useful, especially when the image is very pretty!
Fubiz does more with their Thumbnails
Having such interesting post thumbnails gives you the chance to experiment with alternative ways of navigating content, like this fantastic gallery view on Fubiz.
Build Internet combine Photography & Text
Text on the top of a photo once again, just another example of how this can work so very well. Remember our quality tips too when putting together any graphics.
Good Thumbnail Positioning on PSDTuts
The layout of your thumbnails is important. This style (which I first saw used across the Envato sites) seems to be very popular with bloggers.
WebDesignerWall Uses CSS to Style Thumbnails
A Simple use of a gradient & some nice typography. What I like about Web Designer Wall is that each of their thumbnails has the white edge with a gray border, it gives your images a bit of consistency and having a default style on images can make them fit in with your site a lot better.
Imeem have also styled their Thumbnail Border
Every thumbnail on the imeem website looks like it’s almost a photo sitting on top of the page. There actual photo does not have this effect on it, the frame around the image has been made & just sits behind, this makes your thumbnail look as if it’s it’s part of the frame, but really it’s all separate.
It’s a easy way of styling multiple images and leaves you open to change the style of the border, when you update your web design.
Methods of Making Creative Thumbnails
Summing up your post into one image, and making it look attractive is a big part of catching the interest of readers who are exploring your homepage. It has also become more common to see thumbnails next to blog title on a homepage, rather than just text. Layout of the image is important too, finding the perfect place to put your image is an art in itself. Sometimes a full image is used, sometimes a small thumbnail, anything from a photo to a sketch or full vector illustration, the ability to create so many different things should be your biggest advantage!
You have a fresh canvas with each blog post, you don’t need to keep constancy with your thumbnails & post images, each one can be a new work of art, a chance to express yourself and a chance to back up what you are writing with your creativity.
There are a variety of ways capturing & creating the perfect thumbnail for your post, but it’s important that the image compliments the post, keeps relevant and isn’t too complicated – we’re going to explain a select few examples in further detail now.
Unique & Custom Graphics
Without doubt this would be the most time consuming way of creating good looking thumbnail/introduction images for your post, but as you will see it’s clearly worth the time when you get it right. This process would involve looking at the post as a product, and the post thumbnail as an advert for that product, you need to find creative ways to best showcase that product, using a mix of various design methods.
A closer Look at Tutoria9′s Unique & Bold Style
David Leggett, the fantastic designer behind Tutorial9 has included some important techniques to style his thumbnail, a nicely executed drop shadow, a background lighting effect that helps to build depth, and also some blur is applied on some elements to also build depth and give the image something different visually. David has also kept some basic ideas in mind, such as contrast (light on dark) and he’s included a tag-line.
I think this example is a great use of space, and the fact David has made his image posts such a big feature on his site gives him room to experiment & create something outstanding each time. Have a think about what you can take from this and apply to your next blog thumbnail, remember to keep Quality in mind.
Relevant & Interesting Photography
Photographs have always been a very pure and captivating way of getting a point across or sharing an emotion. They can keep those same attributes when being used in you thumbnails. Remember to spend some time, either taking images yourself, browsing stock photo websites or searching flickr for captivating images that the author has released under the creative commons agreement. *Use Advanced search for Creative Commons settings
Example of Relevant Photographic Thumbnail
This Article on Simplemom is a fantastic example of getting your images absolutely right. The image wasn’t taken by the author of the article, but it couldn’t get any more relevant to the topic. This just goes to show how taking the time to find a perfect image is well worth it, and a clever photograph really helps to compliment your content & invite readers to your post.
Other than symbolizing the content of the article very well it’s also a pretty image visually, I like the feeling of depth and the contrast with the colors and the whole composition just ticks all the right boxes. Remember if your original photo doesn’t have all of these things, some simple touch up’s in Photoshop wouldn’t go a miss.
Creativity with Screenshots
Many posts online these days (this one included) have a lot of images throughout. If you’re writing about something that exists on a website or blog you might have some screenshots to support your content. If you do a small amount of work in Photoshop you can make these screenshots worth of a thumbnail.
Fine Example of Using Screenhots as your Thumbnail
In this example by Andrew, he’s used a screenshot as the backrgound to the image. Rather than a standard screenshot he has cleverly built up a sense of 3D and depth – first by creating a lighting effect, and then placing the screenshot at an angle, to give the feel that it’s not just a flat image. He’s brilliantly continued this theme by placing a really nice graphic on top of a post-it note.
I really like how Andrew has built something up from nothing, and with a little bit of effort he’s created something truly interesting that works.
Multiple Uses for your Thumbnails
Using thumbnails gives you the advantage of using them in a variety of ways, and in a variety of places throughout your website. Having the choice to do what you want with them means you can be as creative, or as straight forward as possible. Let’s look at a few solutions.
Featured Posts Slider
GOOD is a fantastic website design all in all. But the featured posts with thumbnails are a particularly beautiful element of their website. The thumbnails are very good looking, but the layout and the use of a scrolling showcase transform them from just being beautiful, to being incredibly useful.
Gallery of Posts
The Autoblog website has a lot of new articles each day, so drawing attention to posts can be hard and things quickly move off the front page, so having a gallery style feature area allows for you to keep interest on a article long after it has been publishes. It also improves interactivity, and although I’m not completely in love with the design, it works very well and could look very nice.
Another good example of this would be Fubiz (as featured earlier in the post).
Make Lists easier to Scan
For sites that have a lot of content listing other articles, be it popular, featured or recommended etc, is quite an important part of internal traffic and exploration by users. Sometimes these lists can look a little un-inviting, especially if long. Adding thumbnails to your lists could be a great solution.
Draw Attention to Related Posts
Thumbnails with related posts not only look great, but provide something stimulating and fresh to look at, and gives the user something to do once they have finished reading your post. Without doubt it’s a smart way of drawing and keeping attention on your articles
Think about the Positioning on your Blog
Aside from using in galleries, sidebars and below your content for related posts, you need to get the positioning of your blog post right from the very beginning. Think about in which pages your thumbnail is going to be used, and how in you can best display the image to benefit both the content and the user.
Example Layout Mock-Ups for you
From the examples on this article I’ve created some quick mock-ups of popular layout and positioning of thumbnails which could spark some ideas for your own blog. These are just quick examples but illustrate only a handful of successful ways you could integrate thumbnails into the layout of your blog posts.
Full (Fixed) Width
Using the full column width gives you a lot of space to use, and there is a good balance between content and the image. The down side is that it doesn’t look great on fluid width sites.
Next To Title
Your images tend to be smaller in these places, but the positioning is great & it makes scanning through the posts very easy.
Next to Title Right
Another fantastic solution, I think this one looks great and keeps your title in line with your text.
Thumbnail within Content
To keep focus on the title you could move the thumbnail to a more obvious place. In this position the image is part of the content, and the text can wrap around it or go along side it. A good solution but for me not always the best looking.
Thumbnail within Content (Right Side)
Same advantages and disadvantages as mentioned above. Although this one doesn’t break up the layout on the text as much and for me sometimes is a better solution then the one above.
Full Image with Small Paragraph
If the content is visual based & you have a lot of good photos or images you could use a full image could be a huge hit. Trying to describe how cool something looks is nowhere near as good sa just show how good it looks, and that’s a big plus for this layout option.
Final Thoughts & Tips
The point of this post was not to just simply show you some good looking screenshots, we intended to make you think about why you should be using thumbnails on your blog, and show you how a little time & effort with your post thumbnail.
This is not something for designers specifically, it’s more for content writers and webmasters to start thinking about how and why then can help their users by either putting some time in yourself, or hiring somebody who can create such images for you.
• Keep it Relevant
Relevant images will compliment your content and help users to navigate your site if you integrate them well.
• Don’t be afraid to Pay for Quality
Whether it’s paying for good quality images, or hiring a designer to spend a little time working on a creative thumbnail for a post.• Make sure you give Credit
If you use an image from flickr for example, it’s always nice to give a link back to the original source and author.• Think about your Layout
If you’re going to add thumbnails to your posts have a good think about where you are going to place them.• Think of creative ways to use them
Once your blog posts each have a cool thumbnail start thinking of interesting ways you can get your users to interact with your content – use your thumbnails to your advantage.
Resources
iStockphoto.com | Loads of quality Images
GraphicRiver | Various Icons, Illustrations & Stock Imagery
Dreamstime | Big collection of premium Images
Sxc.hu | Free images, beware that these images are often over-used
StockVault | Quality free images
Flickr | A link to Flickr Creative Commons search
Photoshop Action for Screenshots | Tutorial that could be used for Thumbnails
Using Images to Take Your Posts to a New Level | Fantastic Video & Post
How To Find Free Photos for your Blog | Great tips and resources