Thumbnailing

It’s hard to know where to start when working on a new application or adding a feature to an existing application. Some designers like to go straight to code, while others make sophisticated mockups in Photoshop or Sketch. I like to start with paper and pen.

About 10 years ago I took up watercolor sketching as a hobby, not realizing it would have a huge impact on me later as a UX designer. One of the most valuable concepts I learned was the practice of making several thumbnail sketches before proceeding in a specific design direction.

What’s Thumbnailing?

“Thumbnailing” is the process of making small, postage-stamp or thumbnail-size sketches of a subject without adding much detail. When drawing from life, thumbnailing allows the artist to look at the subject from several different angles before dedicating time and energy to a much larger rendering.

Thumbnail sketches are also very handy for digital design. There are no hard and fast rules with regard to actual size, so these tiny sketches can be larger if necessary. I often make mine about 2 inches square, plus or minus depending on the idea.

Why Do It?

Thumbnailing is great because it allows you to come up with multiple layout ideas quickly and inexpensively before jumping into the details. Don’t like that first or second idea? No problem – just keep doodling. Drawing skills don’t really matter as long as you can capture the required elements in your app.

It’s extremely useful for thinking through any type of interaction, from how a landing page should look, to an onboarding flow, or creating a signup process.

For me, the biggest benefits are speed and the ability to come up with multiple ideas before committing to one. If I just crack open Sketch at the beginning of a project it’s a lot easier to immediately get caught up in details like alignment, spacing and font sizes, which misses the point.

With thumbnails I can focus on answering the following questions:

• What’s the most important element?
• How is the user going to interact with it?
• What’s the next step?

Literally Get Your Team On The Same Page

Thumbnail sketches literally help your team get on the same page. If all they have is a feature list or user stories, people will often walk away from meetings with their own ideas of what something should look like and/or how it should function.

Simple thumbnail sketches can provide that first visual reference that points everyone in the same direction. They also encourage clarification and better overall communication.

How To Start Thumbnailing Your Designs

To get started, just grab an 8 1/2 x 11 sheet of paper and a pen. I like to use pen instead of pencil. Using a pen forces me to get my ideas down quickly without getting hung up on whether my lines are straight or giving me a chance to erase and start over again.

Draw a few squares on the page and link them together with lines or arrows as you go. Don’t worry about details for now – think big picture instead. I also like to annotate any ideas for animations or other functionality. That helps me think through how the user will interact with each screen and how the system should respond.

Use Your Own Visual Vocabulary

It’s good to start your thumbnail sketching adventure with an existing visual vocabulary if you have one. What’s a visual vocabulary? It’s a collection of easy-to-remember design elements you draw from memory and use over and over again in your sketches.

For example, think email icon for email, putting an “x” in a box to represent an image, or several lines stacked together representing a paragraph of text. Check out my YouTube video on whiteboard sketching to get a better idea plus a downloadable cheatsheet to help you get started.