Creative Use Of Thumbnails In Web Design

Other than a title, your blog post thumbnail speaks volumes for the content that lies beneath. They help visitors to navigate your site, preview your articles and a whole host of other ways that you may not be familiar with.

With the help of some creative minds, Photoshop and maybe a little CSS3, thumbnails also work well outside of just previewing an articles content. You can find them working their magic on about us pages, portfolio sites, e-commerce sites and several other specific examples.

Creative Thumbnail Examples

Image hovering

When meeting the team over at  Arc90, you first see thumbnails of each member in a somewhat professional/business pose. Hover over the images and you’re shown the fun side of each particular person along with a nice clean speech bubble displaying the name and position of the member.

Make your own thumbs

Drupalcon creates their own thumbnails using image-editing software. If you’re pretty good at Photoshop, why not put your skills to work and design your own thumbs? They’re guaranteed to be original and are a great substitute for a photograph.

Labeling the thumbnails

The portfolio for Front72, a graphic design company, uses a 3D ribbon over the thumbs displaying what type of media each project was designed for.

How could we use this for a blog? Well, we could maybe label the thumbs with the particular category that it falls under or whether it’s a screencast or a blog post.  Essentially, this would allow scanning of the homepage easier for someone looking for a particular type of post.

Realistic images to scale

In the magazine section of ClipStampFold, realistic images/scans of magazine covers are lined up in a timeline format according to date. The fact that the covers are positioned in a staggered fashion helps to draw more attention to the thumbs. Imagine if they had all been scaled to the exact same size, this effect would be rather boring.

Breadcrumbs and thumbnails

Sounds disgusting, but luckily it’s not for lunch. Booreiland makes use of thumbnails within their breadcrumbs, giving you a glimpse of what’s to come. It would be hard to use this on the typical smaller scale in which breadcrumbs are used, yet it works well in the way that it was applied here.

Popular posts in slideshow format

Fubiz displays their popular content in a relatively small sidebar slideshow. By placing a simple label over each thumb, with an italicized title, there is no guessing about what the image represents. This is an interesting approach to showcasing hot topics and as long as you could clearly separate the images from ads, it could be very effective.

Take time to choose relevant images

It’s always a good idea to use relevant images when deciding which image works best for reflecting whats in the content.  UX Booth always does a good job in this department.

Who says your thumbs have to be square

The web agency Refresh chose to use speech bubbles throughout their site as thumbnails. Sure we’ve seen speech bubbles before, but note the attention to detail that they applied. Each bubble has one square corner to keep it stylish, the white frame helps to hold the image and each bubble uses global shadowing for a nice 3D effect. Well-executed in my opinion.

Grungy thumbs

James Lai Creative also uses a slideshow type format to showcase his work, but with a little bit of a grunge effect. The textured background is brought into the framing of the thumbs and pieces of tape are used to take the effect a bit further. Clicking on the thumb brings up a larger image above with info about the project.

Make thumbs part of your design

Visualbox brings their thumbs to life by implementing them into their tiled background. I can’t say that I have seen this before and it really works with their overall design. Hover over the thumbs for the client name, and click it for an auto-scrolled ride downward to a larger image of the work.

Thumbnails beneath thumbnails

The Creative Finder uses thumbnails beneath thumbnails for a quick, easy way to browse designer portfolios. Click the larger image to be shown more info about the project and designer. Yes, that is a pigs face sticking out of someones stomach.

Add depth to images

Tutorial9 is known for creating their own custom thumbnails for individual articles. As you can see here, blurring an image and adding well-placed text can help liven up a thumbnail by creating a little depth. I’ve used this technique on a few occasions here at Bluefaqs, and it’s quite easy to execute.

Functional options when hovering

The team over at WooThemes adds some functionality to their thumbs. When hovering over a theme preview options are brought up to view more info about the theme or move on to the next one. This is a great way to save real-estate on your font page and is an excellent example of usability.

Let’s talk about placement…

WebDesignerDepot has some very well-placed popular posts situated just beneath their last two articles. I would imagine that if you were to look at a heat map, these thumbs would prove to be quite popular. Using large relevant thumbs helps to separate them from the advertisements that appear just to their right.

Make use of opacity

45royale uses opacity in their thumbs to help distinguish between which project you’re currently viewing. Hover over the lightened thumbnails to see the image come to life, along with a distinct title. I don’t know exactly why, but I am drawn to place my mouse over images with a dropped opacity. Am I the only one?

Whats your perspective

Arkitip changes the perspective of their images to help grab your attention. This is a great way to liven up a thumb and help bring it to life. Notice how the sash on the second book dips below the link (out of bounds), while it kind of blends into the text in this example, I can see how this technique could add realism to what could ordinarily be a boring image.

Smart thinking

At first I was just going to point out the postage stamp type border for the thumbs at Clearleft. I then noticed how they tied the title into the effect. Taking the phrase “…1st Class ideas…” and using a 1st class stamp effect as a thumb is just a well-played idea. Here’s a quick tutorial on creating that border.

Indicate the type of media

If using a thumb to represent a video, why not add a play button to help indicate the type of media? The Dallas Theological Seminary uses this on their site and I’ve seen it on many other sites as well. It’s a good way to let the visitor know ahead of time that their about to watch a video and not read type.

Had the play button not been added, I honestly wouldn’t know it was a video unless I looked across the screen and saw the tiny film camera icon that is barely recognizable.

Shadowing techniques

ZCOPE uses highlighted thumbs to indicate which larger image you are viewing on the left. I wanted to point out the non-standard use of shadowing that was applied to the active thumbnail. This technique helps to bring the image to life by giving it a curled appearance.

Thumbnails are great for browsers too

I’ve recently been using Google Chrome, kind of on a trial basis for browsing and for writing a few posts. I’m amazed at the thought that was put into this browser.

Relevant to this post, when opening a new tab I’m shown eight different screenshots/thumbnails of the sites that I have been frequenting. I often find myself clicking on these thumbnails and they have proven to be quite useful. This goes to show that creative use of thumbs can be implemented outside of a website.

Know of some other noteworthy examples?

Designers are always coming up with new creative ways to use thumbnails. If you know of a site that takes full advantage of  thumbnails, please let others know by adding a link and a brief description in the comment section. Feedback on the examples above are also greatly welcomed and encouraged.

Written by Shawn Ramsey

When I’m not brewing my own beer or hiking through the local National Forest, I’m busy building a more beautiful web.

@shawnramz → / bitdrips.com →


5 Comments

  1. Colin Dempsey January 18, 2010 at 5:35 pm #

    You use some nice examples in this list and good explanations. I think we will see some really great thumbnail designs once CSS3 really takes off. Great read!

  2. Design Informer January 19, 2010 at 1:23 am #

    Excellent post Shawn. Well researched and very in-depth. Thanks for this article. We need more high quality articles such as this.

    I like how you go through and explain each sample used. :)

    • Shawn Ramsey January 19, 2010 at 5:46 am #

      Jad,

      I believe taking the time to explain your thoughts about each item is much more effective than just listing a bunch of examples with practically no commentary. I’m glad that you enjoyed the article.

  3. designi1 January 19, 2010 at 12:02 pm #

    Awesome Shaw…the first example you show us its very funny… and yes i really share the same opinion the thumbnail can be very useful to appeal our taste for the entire content. Nicely done here!!!

    • Shawn Ramsey January 19, 2010 at 3:13 pm #

      designi1,

      I really like the first example as well. Anytime you can combine something smart and funny, I believe that you should go with it. Thanks for the comment!

Leave a Reply