How Thumbnail Sketching Can Help Web Designers?

Posted on May 19, 2012 by

Long before mockups of web interface came along, print designers frequently already used thumbnail sketching and it was a tried-and-true method in the design industry. Though some web designers shun it as unnecessary, wireframing is a popular practice in the industry. Most web designers consider a minimal, basic rendering as an important step that allows them to focus on essential layout principles.

Thumbnail sketches are a great first step that use similar concept to wireframing, only on a more basic level. Newer generations of web designers are often unfamiliar to this concept.

What’s thumbnail sketching?

It may sound a bit funny at first, but any web designer should already know what a ‘thumbnail’ is. For example, the term “thumbnail gallery” is a grid of tiny images that serve as previews and links to their larger equivalents. The purpose of thumbnail sketching is to help you gather plenty of ideas very quickly. It is essentially a way to rough out many possibilities; they have many similarities with wireframes, but quicker and smaller. Experienced web designers usually create numerous thumbnail sketches and then choose some to create wireframes.

If you are new to the process, get a pencil and draw a few lines to divide a paper into 6 or 8 equal boxes. This isn’t meant to hone your drawing skills, instead it helps you to generate better ideas, just let the ideas flow. Because thumbnail sketching should be quick, it can look somewhat sloppy. Use only basic shapes and you shouldn’t spend too long on a box.

Why is thumbnail sketching a good thing?

It may be difficult to see what benefits you can reap from hastily drawn sketches, but you might be surprised. Some web designers are far too easily to be affected by a case of tunnel vision. They sit down on the front of the computer and the first thing that comes into their mind is something of an almost finished shape. After a while you will become attached to it and this is a predictable psychological response. Unfortunately, some first ideas aren’t always the best.

A good web designer shouldn’t be attached to one design too much, as abandoning it for something entirely new can be exponentially more difficult. When our brain is stuck, old ideas often sneak their way in. Even if your new ideas flow freely, it may still take a lot of time and effort to come up with great ones. A big flaw of creating one big sketch on a piece of paper is that we are less likely to put critical thoughts into the idea generation process. You might potentially be able to come up with two or three more ideas, but often you don’t have the time to make other sketches.

Thumbnail sketching eliminates this problem. By dividing a piece of paper into six, eight or ten boxes, you can stretch your creative mind and force your brain to work harder by coming up with as many different design variations as possible. After you fill all boxes, you’ve a unique advantage of taking a bird’s eye view on all possible designs. Making an intelligent decision is much easier as you know which design is worth pursuing further.

Many web designers think that they already have done enough initial steps in a design project and they don’t need an extra step. This might be a valid point, but thumbnail sketching can significantly improve productivity if performed correctly. You don’t need to kill an entire day for thumbnail sketching. Simply dedicate a chunk of time during the idea generation phase, it may take between 30 minutes and one hour, it’s up to you. This exercise may prevent designer’s block before it sets in. It is possible to quickly bust out a web design if you put your mind through the wringer. You’ll also be more confident that you already have the best idea in place.

Can we use thumbnail sketching for other purposes? In web design community, thumbnail sketching is usually used to generate user interface and layout ideas, but it is also applicable for other tasks. For example, website logo creation is a task that could benefit from thumbnail sketching. With this method, you can sketch six, eight or ten possible logo ideas on a piece of paper, in a very short amount of time.

Useful tips

Some web designers are sketch artists and they couldn’t be happier with a pencil in their hands. Others are completely horrid with pencils and can’t seem to create a decent sketch. For the first time ever, the latter could have a mush easier time. Thumbnail sketching are perfect for those who can’t draw as real artists have trouble of going too fast and not fleshing a concept out. Often, artist-types generate fewer thumbnails just to make sure that all circles are perfect and lines are straight.

When sketching thumbnails the key is to prioritize on quantity over quality. There’s nothing wrong about creating nice looking thumbnails, but you should remember that it’s important to get all ideas in your head onto the paper. For example, you can draw a bold line within each box to represent a headline to skip the laborious lettering process.

You should also avoid too much time tweaking a box. If you start sketching the first box on the paper and realize that you don’t like it, move on and resist the urge to erase it. Perhaps in a couple of hours, you’ll look back and can see solid ideas in it. When generating ideas using thumbnail sketching, don’t stop at four or six boxes; as a creative professional, you should have a flood of ideas. In some web design classes, students may be asked to create more than twenty thumbnail sketches for a single task.

When trying to produce so many thumbnails, you could be tempted to create numerous variations of the first box. This could reduce the effectiveness of thumbnail sketching as your goal is to create numerous unique concepts. Push your mind and try your best to come up with different concept in each box. Because thumbnail sketching is a part of the brainstorming phase, it doesn’t hurt to have some bad ideas, because they are still useful to distinguish good ones. Be weird, go crazy and think outside of the box!  After you complete a task, it’s a good idea to keep your sketches in archives for future references. As you begin a new project, it could be helpful to review thumbnail sketches made for precious projects. They could remind you of important concepts and prevent you from losing the focus.

Many web designers purchase a special stylus for the iPad and create sketches using iDraw or Adobe Ideas app. Other great tablet is the Samsung Galaxy Note 10.1, which comes with S-pen. It can distinguish many different pressure levels, allowing you to draw far more realistic lines. But again, pencil and paper are both very affordable and fool-proof; in addition, you can convert them to digital formats using scanner or any point-to-shoot.


Creating many sketches on a piece of paper can feel annoying or overwhelming at first. But it can be an enjoyable practice once you get the hang of it. For some designers, the initial stage of a project is the most exciting when their mind is bursting with so many ideas. In all honesty, some designers can’t get any benefit from thumbnail sketching and if after a few tries you can’t get anything out of it, you shouldn’t waste your time. However, it is recommended to give this method a solid go for a few projects.

Author :

  • admin