Visual Design Theory

Thumbnails and Comps

Let's take another look at my 5-stage Web design process:

1. Define the Project
2. Develop Site Structure & Organize Information
3. Develop Page Structure & Organize Interactions
4. Design Graphic User Interface
5. Build Web Site
6. Produce & Publish Web Site

After you've determined the primary goal or purpose of the Web site that you are going to design (stage 1), and after you've done some research into who the users are, what they want, you'll want to begin exploring user scenarios to determine the fastest and easiest ways to help get your users from point A (the "home page") to point B (their goal). This can assist you in determining structure and organizing the Web site's content (stage 2).

We've discussed how as you work through possible user scenarios, it's a good idea to look at competitors' web sites. 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".

The next step leads us into stage 3, and begins with brainstorming ideas for how your Web site will look and function. You can begin drafting your Web site design using first thumbnail sketches, and then composites.

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.