Close Photoshop and Grab a Pencil: The Lost Art of Thumbnail Sketches

by on 10th November 2011 with 10 Comments

screenshot

Long before web UI mockups came along, print designers would hone their ideas using a tried and true method called thumbnail sketching. This practice seems to be somewhat of a lost art so we’re going to shed some light on it!

Today we’ll briefly discuss what thumbnail sketches are, some tips for creating them and how to effectively implement them into your already busy workflow.

Before Wireframing, Thumbnail

screenshot

These days wireframing is a very popular practice. Though some shun it as unnecessary, plenty of designers and UI/UX professionals see a very basic, minimal rendering as a key first step that allows you to focus on basic layout principles independent of superfluous styling.

There’s definitely something to be said for critically considering how your page will be structured on a basic level. In fact, I often wonder why I don’t see more discussion regarding the full-fledged wireframe’s older brother: the thumbnail sketch.

The thumbnail sketch is an awesome first step that uses the same ideas as a wireframe, only on an even more basic level. For those new to the concept, let’s take a look at what thumbnail sketches are.

What Are Thumbnail Sketches?

The name sounds funny at first, but if you think about it, you already know what a thumbnail is in a different context. For instance, if I use the phrase “thumbnail gallery,” you likely instantly know that I mean a grid of small images that typically serve as links to larger equivalents.

Using this knowledge, you can probably guess that thumbnail sketches are groups of little drawings. The purpose of thumbnail sketches is to get lots of ideas on paper in a very short amount of time. It’s basically a way to visually brainstorm where you don’t obsess and tweak but instead rough out a large number of possibilities. They’re a lot like wireframes in form, just smaller and quicker. It’s often the case that designers will create several thumbnails, then choose a few of the best to turn into wireframes.

screenshot

How It Works

To start the process, grab a pencil and draw several, small empty boxes to serve as your browser chrome, page bounds or whatever medium you happen to be working in. You can even find basic printable starter pages like the one below to help get you started.

screenshot

From here, you simply let the ideas flow. This is not a practice for honing your drawing skills, instead your focus should be on idea generation. Thumbnail sketching is quick and perhaps even somewhat sloppy. Use basic shapes and don’t spend too long on a single image, as soon as you can get a feel for what that basic layout idea might look like, move along.

Why Is This a Good Thing?

screenshot

What possible benefits could you reap from pages of small, hastily drawn sketches? You’d be surprised. As designers, we far too easily get a case of tunnel vision. We sit down at our computers and create the first thing that pops into our heads and proceed to a point of almost finished quality.

The problem with this is that once you invest any real time in an idea, you become attached to it. You can’t help it, this is an automatic psychological response. Unfortunately, your first idea isn’t always the best you could do and is usually, as a rule of thumb, your most generic.

Once you’ve made that attachment to one design, leaving it behind and trying something completely new is exponentially harder. Your old ideas tend to sneak their way in because your brain is stuck. Even if you don’t have this problem, you’re still spending lots of time and coming up with only a few basic ideas.

The main flaw with this method is that you don’t put any critical thought into idea generation. By “critical thought” I mean real comparative criticism and logical reasoning. Instead, you just run with three ideas at the most and then decide between those. You might be able to come up with ten other ideas better than your first three, but you simply don’t have that kind of time so you never proceed further.

With thumbnail sketching, you really stretch your brain and force yourself into real creative thought by producing as many different variations as possible. With this method you have the unique benefit of standing back and looking at everything you can think to do and making an intelligent decision about which ideas are worth pursuing further.

Save Time in the Long Run

Some of you are probably thinking that you already have enough initial steps to perform on day one of a design job and don’t need to add anything else! This is a valid point, but if done right, thumbnail sketching can actually improve your timeline rather than wreck it.

First of all, you don’t need to kill a whole day at this. Simply dedicate a small chunk of time to basic idea generation: ten minutes, twenty, thirty, it’s up to you. Further, performing this exercise takes a powerful swing at designer’s block/hesitation before it even happens. You’ll find that you can bust out a design much quicker if you’ve already put your brain through the wringer and can be confident that you’re proceeding with your best idea.

Not Just for Layouts

screenshot

Typically, I speak of thumbnail sketches in terms of generating layout ideas, but the practice is beneficial in any type of design. For instance, logo creation is likely a place where you do this without even thinking about it.

Sitting down with a pencil and sketching out a million ideas seems like a very natural first step in logo generation, so why not apply this same technique to just about everything you design?

Headline type treatments, web pages, brochures, business cards, app interfaces, character design, all of these and more can benefit from a few minutes of dedicated thumbnail sketching.

Tips for Proper Thumbnail Sketching

screenshot

Now that you know what thumbnail sketches are and how to implement them into your workflow, let’s finish off with a review of some basic but helpful tips to get you started.

These Are Low Fidelity, so Cool It on the Details Picasso

Some of you out there are sketch artists. You’re never happier than when you have a pencil in your hands. Others are truly horrid with a pencil and can’t produce a decent sketch to save your life.

For the first time ever, the latter of these two groups might actually have an easier time! If you can’t draw, great, you’re perfect for creating thumbnail sketches. Talented artists tend to have trouble with the idea of going fast and not really fleshing concepts out. It’s often the case that artists spend more time generating fewer thumbnails simply because they can’t help but make sure every line is straight, every circle is perfect, etc.

Just remember the key at this step is quantity over quality. I have nothing against great looking thumbnails, in fact, I love browsing through ideas from top-notch artists, just make sure that you remember that your goal is to get all of those ideas out of your head and onto paper. For example, if you can draw a box and later remember that it represents your headline, then skip the laborious lettering.

Keep Moving Forward

Another thing to keep in mind is to avoid spending lots of time tweaking an idea to get it just right. If you start sketching one of your ideas and realize that you hate it, resist the urge to erase it and start over. Simply trudge through it and move onto your next idea. Maybe in a few hours you’ll look back on that sketch and see a solid idea in there.

The More the Merrier

When you’re generating thumbnails, don’t stop at five or six. You’re a creative professional, you should have a lot more ideas rolling around upstairs than that. I knew a design professor that would make his students generate twenty-five or more unique thumbnails for every single project. This is a much better number to aspire towards!

Don’t Draw the Same Thing 50 Times

When faced with the task of producing so many thumbnails, your first instinct will be to start several tiny variations of the same idea. This is often a worthless practice when compared to the value of focusing on truly unique concepts. Try your best and push your brain to produce concepts that are as different from each other as you can manage. Remember that this is the brainstorming stage so there aren’t any bad ideas. Go crazy, think outside of the box; be weird!

Keep Them When You’re Done

If you can, it’s a good practice to save your thumbnails for future reference. As you proceed further into the project, you might want to look back on them. You might lose your focus and need to be reminded of where this idea started or your client might hate your initial concepts so much that you’re sent quite literally back to the drawing board (I’ve been there plenty of times).

screenshot

One thing that I like to do is grab a stylus and create thumbnail sketches on my iPad using an app like Adobe Ideas or iDraw. Having my initial ideas in digital form is immensely helpful for long-term storage and retrieval. Plus, from the iPad it’s a short hop to import these into Illustrator or Photoshop.

Conclusion

Putting your initial ideas into thumbnail sketches might feel like an annoyance at first, but once you get the hang of it you’ll find that it’s a really enjoyable practice. For me, one of the best parts of a project is that initial stage where my mind is firing on all cylinders and I’m bursting with possibilities.

In all honesty, thumbnail sketches might not be for everyone. If you truly don’t get anything out of it, then don’t waste your time. However, I recommend giving it a solid go for several projects. Really put your best into it and see if you don’t walk away with a higher number of truly great ideas.

If you use this method, leave a link to some of your recent thumbnail sketches below so we can check them out!

Photo Credits: Dan Lurie, Tobias Soft (1)(2), nunile, Jeremy Keith, Shawn Campbell and CannedTuna.

Comments & Discussion

10 Comments

  • http://www.anilamrit.co.uk Anil Amrit

    Excellent article.

    Time and time again I tell people the mac is just a toolbox. Sketch pad first, do a brain dump and then refine on the computer.

    I’ve even had noob designers say that it’s a waste of time! They do one sketch in detail and then off they go on the mac.

    I always keep my sketches however untidy they are and actually use them as part of my portfolio presentations.
    Important in my eyes as it shows a persons thought process.

  • https://twitter.com/#!/clementgarnier Clément Garnier

    Really interesting article. The link for printable pages does not work though. Here’s one the one I found on Flickr: http://www.mediafire.com/?p1bnog073fbyrly – but it is loading very, very slowly.

  • Joshua Johnson

    @Clément, sorry about that, fixed now!

    @Anil, thanks! You keep on those noobs, learning the right way will set the course for their entire career.

  • http://www.compareandrecycle.co.uk Lee

    Sketching is really helpful when coming up with ideas. If I start in front of a screen I can rarely come up with too many ideas but on a piece of paper they flow on after the other.

    Often I think it’s better to stay away from a computer entirely during the early design stages.

  • David

    Starting from nothing in PS is basically asking for a time sink. Even if you’re a pro with the software, it still takes much longer to make basic alterations to lines and shapes than it does in a sketching environment.

    A logically workflow produces a quality result.
    Any UX designer worth their salt starts the interface design process with thumbnails. Its a basic a funneling process. Start anywhere from 6 to a dozen thumbnails, and note the time spent on these is measured in seconds, you get the basic idea down and you’re done.
    From there you pick 3-5 and move to wireframing, fleshing out some details.
    Then once you have the basic skeleton of your layout established, open up photoshop and make it shine.

  • http://www.justjeets.com jeetendra

    Its basic strong foundation practice we learned in our college time. Its good practice and saves lots of time playing chess in PS. The problem with today’s designer is they get dominated with PS effects and tool and forgets their own creativity. Most of the designers today tries to pick elements from other websites and tries to create the design. This is where their design fails because it don’t have original creativity.

  • http://www.gauravmishra.com Gaurav Mishra
  • http://www.elijahclark.com Elijah Clark

    I agree. We do get tunnel vision. Even as a tech designer, i still like to start with paper so that i dont get attached to anything. paper just allows for more options for some reason. seems that when i start to design digitally, i’ll spend hours at it until its perfect, but a sketch allows me to be more creative.

  • http://optimiseweb.co.uk Adrian Hart

    Great advice. I recently forced myself to sketch new project ideas before I went near Photoshop. I find it helps prevent churning out the same old layouts time after time. Now I do it for every project.

    Thanks for your wise words Joshua.

  • http://crampmystyle.wordpress.com Mariclare Lawson

    Terrific article. I always draw it out first, or take paint to canvas. Then transfer the original art to the digital platform. It’s the only way to manipulate the computer and tech tools the way I want. If I can combine the organic way I create and the skill that has now become a way of my every day existence, then the end result will truly be satisfying.

Subscribe

Membership
About the Author