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.

原文：http://wefunction.com/2009/09/beautiful-post-thumbnails/

日志分页: 1 2 3