Archive for September, 2009

Beautiful Post Thumbnails: Top Examples & Best Practices

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 | Loads of quality Images
GraphicRiver | Various Icons, Illustrations & Stock Imagery
Dreamstime | Big collection of premium Images | 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

The Envato Marketplaces Re-Design: Our Involvement

We’ve recently had the pleasure once again of working with Collis Ta’eed and the team at Envato, a company we admire – and one full of creative & down to earth guys – running a very successful network of sites. Having them use your icons on their site(s) is one thing, but working with them is a true honor.

Here’s our write up of our involvement in the recent re-design, our thoughts on it – and our early design drafts for Collis.

A look at the new Envato Marketplaces

There’s a lot of people to please when you’re re-designing such a huge network of sites, and a lot of pressure on the team behind it, it calls for some creative thinking and a fresh look at things. The first time I saw a near finished Envato Marketplaces re-design I knew right away that I was looking at something that people were going to love, and I think that’s probably a big hurdle when you’re making a big change to something people are used to.

Anyway, here’s some screenshots for you to gawp at first!

What Work Did We Do?

Well, we’re going to show you some of our early mock-ups that we sent to Collis months ago. Now I must explain, you’re going to look at the mock-ups and wonder why our drafts look nothing like the final designs showcased above. And you would be right to be curious. On the face of things it’s hard to see the relation, but I can assure you we played our part(s).

The Interesting thing about this Re-Design

Before you look at the mock-ups then, it’s probably interesting to know how Collis went about the project. He approached 3 designers, myself, Aaron Lynch & Kai Loon informing us of his master plan to give the Marketplace a refresh. He wanted a new perspective on the design and some ideas from outside of his own head.

Our brief was to create something from a fresh pair of eyes, and offer something different to Collis. We had a lot of creative freedom as we we’re always aware that Collis was going to take our designs and create something himself, we just had to offer him something different that he could take away, take elements from – or simply just use them as inspiration. For me it was a clever approach on Collis’ part, it offered him a variety of styles from a variety of designers that he could take and shape into a fantastic design.

Our Early Design Drafts

Now I wouldn’t normally share screenshots of work that didn’t follow through into the final live version, but this was such a unique and different approach to a re-design process that I don’t mind sharing some screenshots with you all. Keep in mind these snippets are from 3 different design concepts.

You can see from the details above the overall level of finish and quality. Something that Envato uphold throughout all of their websites, but other than that I wanted to try something that I purposely wouldn’t normally do, rather than trying to create that typical Envato look I though that Collis would much rather appreciate something that was different, even if it wasn’t ever really going to be used as the base of a design there’s various elements that I offered in a different light.

Full Screenshots of the designs (if you must)

Concept 1 – A polished finish with a minimalistic approach.
Concept 2 – A slight hint at texture and injection of colour.
Concept 3 – A lot of colour & big bold typography.

Looking through the final live version of Flashden for example I can see things that could have been made as a result of my designs, but there’s a lot of it that never crossed over – but that was never really the point of this project.

It’s also worth noting that a lot of our Icons, that are on sale – are being used throughout the marketplace, and we just love seeing our icons used, especially when they are executed so well. Feel free to share in the comments where you are using our icons.

Custom Icon Design

One thing we did complete from start to finish was a re-vamp of the Envato badge icons that are used throughout the Marketplace, on profiles & portfolio’s of all of the users. There was already a full set of icons that were being used, so we had to touch-up and re-draw the ones that worked well enough, but then come up with a completely new concept for many of the icons.

Why not check out all of the badges out for yourself.

Now Go Check It Out

Now that the site is all new and shiny it’s the perfect time to sign up, if you haven’t already. *Note Signing up an account will give you access to all of the network sites. There’s a lot of offer across the Network, everything from Icons to Sound & Video files, a truly remarkable network of sites, and a huge pleasure to work on.

Follow Me

You can now follow authors on Graphic River & the other Marketplaces. It’s a great way to keep up to date with your favorite authors and the recent updates are shown very neatly on the front page for you. It’s a fantastic way to keep your eyes on what is going on.

Graphic River Updates
Twitter Updates

Follow the other people mentioned:

@collis @aaronlynch and @kailoon – *all well worth following!

178 Free Icons: WooFunction Free Icon Set goes Live

WooFunction Icon Set: 178 Free Icons

A really great set of icons for free. Something that you’ve seen before on this blog, but I think this most recent free set shows just how far I’ve come since the first set, just over a year ago now. This new set of icons was made exclusively for WooThemes & with their help we’ve proud to offer you this fantastic set of icons for absolutely nothing!

With this set we’ve gone for a more refined, Mac OSX style Icons (almost) – which seem to be really popular with web designers recently. We’ve also gone for a (smaller than usual) 32 x 32px size, with a few of them available also at 16 x 16px. The pack includes 178 transparrent .png files.

To anybody who was confused by the title image, it’s not your fault. I was trying to use the icons in a statement, you see the Icons spell out the line below… Ahh never mind! I’ll stick to normal image previews from now on!

See & Grab the Icons

Take a look, let us know what you think. Download links are below the preview and comments are welcome too. This set is completely free to use, just make sure you give credit – details of which are below!

WooFunction Icon Set: 178 Free Icons

Share These Icons

Please make sure you read this before using or sharing online. Thanks.

If you find these icons useful we’d like you to pass them on to other who you think might appreciate the set. The URL to share is:

Important: Even though we won’t force you, we appreaciate if you link to this article when sharing the icons. This icon set is released on the GNU General Public License.

Download The Icons

The icons are being hosted at WooThemes, so head on over to the Download page and download them, don’t forget to leave a comment and let us know what you think of them too.

There’s a lot more Icons on offer

We’ve got a lot more icons available for download, so if you liked these you are in for a treat. Keep an eye on our icons portfolio for more sets from us. We’re happy to get your ideas and thoughts which will help for future icon releases.

Daily Edition: Re-Inventing a WooThemes Classic

Any WooThemes fan will be familiar with their popular Gazette Edition theme, but for 2009 they wanted something that would push the Gazette Edition theme forward with a more modern, stylish and minimal design. They contacted us about the fantastic project and we gladly accepted.

As with most things, the more time you spend working at something the better you become at it. For me each time I work with WooThemes just gets better and better. There’s a real understanding on both sides which makes the projects they give me a real joy to work on. And at the same time it means we make something which not only keeps you guys happy, but gives all involved in making the theme a real sense of satisfaction.

Daily Edition is the latest result of this meeting of great minds. * ;)

From the moment they emailed me about the project to seeing the teasers released and finally seeing the theme go live I’ve been buzzing about this latest theme. Although each project I work on is special to me, I just felt this latest design hit the nail on the head, so for me seeing the fantastic comments on the early preview release it was a huge relief to see that people took a shine to it.

As Adii from WooThemes said himself;

Breathing some new life into the incredible success of Gazette Edition we wanted another news/magazine based theme that was minimalistic enough to let your content speak, whilst customizable enough to brand however you like. We approached our friend Liam McKay as we thought this was just up his alley, and did he impress!

Theme Details

Taking my initial design, and working it into 19 individual styles – and then pumping all sorts of JQuery goodness into the theme, on top of the fantastic custom theme options and features WooThemes love to build into each theme, this latest one is classic Woo at it’s best.

As mentioned the Theme aims to build upon the success of the Gazette Edition theme, with a more modern approach and minimalistic feel, so it had to have the great things people loved from the Gazette Edition, but be different and fresh enough to be value for money.

The standard WooThemes options apply for buying with pricing starting at just $70. And with a very helpful and devoted team on hand to answer all of your questions and queries, quality and value for money come as standard.

Important: This week you can use the discount code WEFUNCTION for 25% off the Daily Edition Theme!

The Wallpaper

A big part of this theme which I’ve not really done before was the creation of a Wallpaper to accompany the theme and to support what the theme was all about. My approach was to go for a really soft brushed, collage effect of memorable news items from history.

It’s actually quite a textured piece with a lot of brushes in play with various overlays and subtle watercolor elements mixed with a lot of clouds, smoke, and some hints of grunge. The deeper you look at it the more you can see the work that has actually gone into it. The wallpaper is available in various sizes and is available on the theme details page.

Your Thoughts

As always I’d love to hear what you like (or dislike about the theme) so make sure to check out Daily Edition – Also please make sure to check out the Wallpaper and let me know what you think of that too. A lot of effort went into both and opinions are alwats welcome.

  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress