Visual Design Theory & the Web

Thumbnails and Comps

In this lesson we're going to begin drawing first thumbnail sketches and then composites, or comps, of possible web designs. I always begin my thumbnails on real paper with real pencils or ink. The best paper I've found for the job is simple graph paper, because it is already lined into grids. Remember the rule of thirds and the golden ratio? Using graph paper helps us quickly visualize these proportions, and allows us to sketch out the layout of a page using grid theory.

Preliminary Research

Before sketching thumbnails of possible web designs you should always begin by looking at as many competitors' web sites as possible. These often provide an actual working model that you can try out and observe as a user might experience it. Working through competitors' sites to achieve user goals gives you an idea of what works and what doesn't, what is frustrating, and what is easy, and if the site is designed for "scent".

A Reference Folder

To this end I recommend that you print off any pages that you are using as a reference, and any designs that appeal to you or contain elements that you hope to replicate. Keep all of these print-offs, along with your sketches and any notes on the project, in a single folder for future reference.

To review, you need to:

  1. Obtain graph paper and a pencil/pen
  2. Research competitor's page designs
  3. Print copies of these designs, and collected any ideas or design notes
  4. Obtain a folder to keep it all in

Now you're ready to begin your visual design! We ease into the process by brainstorming with thumbnails.

Thumbnail Sketches

Thumbnail sketches are akin to doodles; they are nothing more than quick, rough drawings that approximate layouts and placement of key design features or elements. Drawing thumbnails with actual paper and pencil is a great way to brainstorm layout possibilities swiftly and easily.

Advantages to Thumbnailing with Real Paper and Pencil

Using paper and pencil for your thumbnails, rather than a computer, offers a Web designer a number of advantages over just hopping into Photoshop, Illustrator, or your text editor and cranking out a design:

  1. Drawing thumbnails with pencil and paper is often faster and easier than designing through a computer application.
  2. Drawing thumbnails on multiple pieces of paper allow you to shuffle and compare ideas quickly.
  3. Minneapolis-based graphic design firm Little & Co. argue that "designers conceptually explore less options when working on computers -- it gets tight very early in the process... The time you invest in that instead of roughing out thumbnails sometimes cuts the number of options." (Computers help and hinder design", Minneapolis St Paul Business Journal).
  4. Paper thumbnails don't perish, meaning they can be kept around the office, referred to easily later, and may even spawn new ideas in the future. Computer sketches are more likely to be revised or deleted, and older drafts forgotten.
  5. Thumbnail sketches on paper reinforce retention. According to designer/consultant/writer Fred Showker states:

    Drawing thumbnails, no matter how simple or primitive, reinforces retention 100% better than computers. You draw a layout quickly using the basic shape tools on the computer, and you've got an electronic thumbnail -- it's perishable. It's forgotten in moments.

    You draw it out on paper and you remember it... you develop it by drawing over and over. This hand-to-eye activity makes the images on the paper more important than they would be on the computer screen. The creator is more "connected" to the image. I've even observed more thought and more mental analysis goes into the image -- and better ideas emerge.

    (Fred Showker, "The Joy of Thumbnailing")
  6. Paper thumbnail sketches are extremely portable. For instance, I can sketch on a napkin if I don't have anything else with me, and I can pocket that napkin, take it to anyone anywhere and quickly and easily share that idea.

Thumbnailing for Web Design

Thumbnails for Web design are a lot like static wire frames, which we talk about in Web essentials, but less complete or less finished. Thumbnail sketches for Web design should be used to:

  1. narrow down layout options for the pages of the Web site
  2. sketch alternate layout options for different page types
  3. illustrate simple user paths

For this course I want you to draw actual Web design thumbnail sketches for your organization's Web site on paper. I'll want you to draw as many as necessary until you have 3 different layouts in thumbnail sketches that you are generally happy with. You can base your thumbnails on competitors' web sites if they are doing something right in terms of usability or graphic design.

You may also sketch out thumbnails to show different page types, or the relationship from page to page, or to storyboard user paths. I highly recommend doing this as a learning exercise.

Composites

Whereas designers start brainstorming layouts and designs with a pencil in hand, producing doodles that may be incomprehensible to anyone else, a composite, or comp for short, takes your thumbnail sketch and makes it presentable for a client to see.

Comps can be hand drawn, if they are done so neatly and professionally. Once you've thumbnailed your layouts and narrowed it down to a few ideas, you're ready to make more sophisticated composites of those those thumbnails on the computer, using Photoshop, Illustrator, the Gimp, etc.

Though comps are not finished designs, they are the necessary middle step between thumbnail sketches and the final visual design.

At the same time, comps should be impressive at some degree in that they effectively communicate the basics of the information to any third party who might glance at them. When showing a client composites I recommend bringing in 2-4 composites that you are happy with. Talk about the different layouts or features, point to pros and cons of each design, and get a sense of which composites are most attractive to the client. You may end up mixing pieces of each comp together to make a new Frankensteinian composite; in fact, I've found that is nearly always the case with the clients I've worked with.

References & Further Reading